Is there a way to have Rewrites or Proxy?

[andrewmurraydavid]

This might be a dumb question, but I couldn't find any docs for it, so I might as well ask.

My team is moving away from nextjs (pages) and moving to TSR (tanstack router with start/vinxi).
One of the difficulties we're seeing is that we couldn't find any docs on rewrites/proxies.

The reason this is a blocker for us is that we need to have the API set cookies from the same domain as the UI (due to multiple envs, legacy auth issue and others).

FWIW, i tried the vite server proxy, but it seems that tanstack router intercepts the request before vite proxy can (assumption).

In our nextjs.config.ts we have the following:

// nextjs.config.ts
{
  rewrites() {
    return [
      { source: "/api/avatar/:path*", destination: `${API_URL}/members/:path*/avatar` },
      { source: "/api/:path*", destination: `${API_URL}/:path*` },
    ];
  },
}

We played around a bit and have a very hacky solution which is very obnoxious. We do send headers and other through, but not in this example.
Hopefully there's a better way that this:

// routes/api/$.ts
// ...

function constructUrl(splat: any) {
  return `${getApiBaseUrl()}/${
    Array.isArray(splat) ? splat.join("/") : typeof splat === "object" ? Object.values(splat).join("/") : splat
  }`;
}

const createResponse = (data: any, headers: Headers, status: number) => 
      new Response(JSON.stringify(data), { headers, status });

export const Route = createAPIFileRoute("/api/$")({
  GET: async ({ params }) => {
    const { _splat } = params;
    const url = constructUrl(_splat);
    const res = await api.get(url);

    return createResponse(res.data, res.headers, res.status);
  },
  POST: async ({ params, request }) => {
    const { _splat } = params;
    const body = await request.json();
    const url = constructUrl(_splat);
    const res = await api.post(url, body);

    return createResponse(res.data, res.headers, res.status);
  },
});

[schiller-manuel]

as of v1.58.7, we have the following:

TanStack Start now exposes the routeRules config option from nitro: https://nitro.unjs.io/guide/routing#route-rules

example:

import { defineConfig } from '@tanstack/start/config'

export default defineConfig({
  server: {
    routeRules: {
      "/proxy/example": { proxy: { to: "https://example.com"} },
    }
  },
})

[schiller-manuel]

@rijk seems to be a different use case. can you please create a new issue/discussion for what you want to do?

[rijk]

Twofold:

1. Proxy internally from /[slug]/[id] to /[id] ([slug] changes when renaming the item and is not used for querying) — I guess this can also be solved by ignoring the $slug parameter
2. Proxy externally as a reverse proxy; /analytics/** → https://eu.posthog.com/**

[ssijak]

@rijk dont use analytics in the url, blockers could block the request, use some random word that has nothing to do with analytics

[carderne]

@rijk for the Posthog use-case: why are you trying to use redirect instead of proxy? The proxy example in the answer above works fine for Posthog.

[Emilios1995]

@schiller-manuel How should we handle this now that '@tanstack/start/config' is not used anymore?

[xuxucode]

How to rewrite /@username to /users/username? username is a dynamic url parameter.

In nextjs, we are using below configuration:

// next.config.ts
const nextConfig: NextConfig = {
  async rewrites() {
    return [
      {
        source: "/@:username/:path*",
        destination: "/users/:username/:path*",
      },
    ]
  },
}

[CanRau]

With the new version currently in alpha you can have a file route called /@{username} and possibly wouldn't need the rewrite for this case anymore #707 (comment)

If you still want to group you could use a pathless layout route