Topic

Use Next proxying carefully

Definition

A Next.js rewrite or proxy forwards a matching web request to another destination while preserving a controlled browser-facing route shape.

In simpler words

It can change where a browser request goes, but it does not change who owns the API or who authorizes it.

Proxying can simplify a browser path, but it must preserve cookie, CORS, and error behavior intentionally.

Open official example (opens in new tab)

After this you can

Recognize a rewrite boundary
Explain why proxying is not authorization
Preserve the product API contract

Forward requests without duplicating rules

A rewrite maps a request path to another destination. The browser may see one stable route while the upstream server receives the request, but domain validation and permission checks still happen upstream.

Proxying changes topology, not security. It can make development and same-origin browser requests easier, yet it can also hide cookie, header, and error-handling differences if configured casually.

A focused rewrite

// next.config.ts
async rewrites() {
  return [{ source: '/api/:path*', destination: 'http://localhost:3001/:path*' }];
}

The browser-facing path is forwarded; the API server still handles the request.

Mistake: treating a rewrite as access control

// Wrong assumption: “Only /api users can reach Nest now.”
// A rewrite does not block direct requests to the upstream API.

// Right: Nest validates the JWT and permissions for every request.

Authorization belongs at the server that owns the protected resource.

Preserve the request contract

Definition

A proxy must deliberately handle credentials, headers, origin rules, and non-success responses.

In simpler words

A convenient browser route is not a replacement for documenting the Nest API for other consumers.

Test cookie behavior in the deployed HTTPS topology, not only on localhost.

Avoid adding a proxy layer when direct, documented API access already meets the product need.

Live playground

Proxy playground

Follow a browser request through a rewrite to the Nest API.

Rewrites change URL shape, not Nest authorization.

next-proxy

Keep in mind

Treat rewrites as routing, not security.
Verify cookies and error responses through the full proxy path.
Keep the upstream Nest contract usable and documented.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

1. What is next.config rewrites/proxying for?

Concept

Redirect users to a new URL that shows in the address barCache upstream API responses at the Next serverForward certain paths to another origin (e.g. API) during dev/prod needsRename route folders without moving the files

2. Dev convenience pattern?

Syntax

Redirect /api/* to Nest so the browser follows to port 3001Proxy /api/* to Nest to ease cookies/same-origin during learningImport the Nest app into next.config to mount its routesEnable CORS on Next so /api/* reaches Nest directly

3. rewrites vs redirects?

Practical

rewrites change the URL; redirects proxy transparentlyrewrites run on the client; redirects run on the serverrewrites are transparent proxying; redirects change the URLrewrites are permanent; redirects are always temporary

4. Why not proxy everything forever?

Logic

Adds complexity/latency; direct API calls with CORS may be clearer in prodRewrites can only match ten paths per configProxying disables the browser’s cache for all routesRewrites strip cookies from every proxied request

5. WebSocket proxying?

Concept

Add ws: true to the rewrite rule to proxy socketsWebSockets are proxied only if the destination is httpsRewrites upgrade WS automatically when the client sends UpgradeMay need special config — don’t assume HTTP rewrites cover WS

6. Environment-specific destinations?

Practical

Use env for upstream Nest URLDefine a separate next.config file per environmentDetect the environment from the request host at runtimeHardcode both URLs and comment out the unused one

7. Security caution?

Syntax

Rewrites always sanitize the upstream response for youProxied requests bypass the upstream’s authenticationDon’t accidentally expose internal networks via open proxiesOpen proxies are safe because Next validates the destination

8. headers() in config?

Logic

Can read incoming request headers to branch logicCan set security headers globallyCan rewrite request headers before they reach a pageOnly sets headers on static assets, not rendered pages

9. Trailing slash / basePath?

Concept

basePath rewrites every external URL to include the prefixAffect how rewrites match — keep config consistentTrailing slashes are stripped from rewrites automaticallybasePath only affects redirects, never rewrites

10. Which is accurate?

Practical

Rewrites redirect the browser to Nest’s origin directlyRewrites merge the Nest and Next servers into one processRewrites can make the browser talk to same-origin paths while Next forwards to NestRewrites require CORS headers on Nest to work

11. What does this rewrite do?

Conceptintermediate

// next.config.js
async rewrites() {
  return [{ source: '/api/:path*', destination: 'http://localhost:3001/:path*' }];
}

Redirects the browser visibly to localhost:3001Deletes the /api routes from the appCaches /api/* responses from the Nest serverTransparently proxies /api/* to the Nest server

12. How does a rewrite differ from a redirect?

Syntaxadvanced

// rewrite vs redirect in next.config

A rewrite keeps the URL and proxies; a redirect changes the browser URLA rewrite changes the URL; a redirect proxies silentlyA rewrite is client-side; a redirect is server-sideA rewrite returns 301; a redirect returns 200

13. Why read the destination from env?

Practicalintermediate

destination: process.env.API_URL + '/:path*'

So the upstream URL stays hidden from the client bundleSo Next can rotate the upstream URL on every requestBecause next.config cannot contain string literalsSo the upstream URL differs correctly between dev and prod

14. What should you not assume when proxying a WebSocket through HTTP rewrites?

Logicadvanced

// proxying a WebSocket through HTTP rewrites

That the WebSocket needs the same destination as HTTPThat WebSockets require an https upstream to proxyThat HTTP rewrites automatically handle WebSocket upgradesThat the browser will retry the socket over HTTP if it fails

15. What does this config do?

Conceptintermediate

async headers() {
  return [{ source: '/(.*)', headers: [{ key: 'X-Frame-Options', value: 'DENY' }] }];
}

Reads the X-Frame-Options header from incoming requestsSets a security header globally on responsesBlocks all requests that lack an X-Frame-Options headerApplies the header only to the app’s API routes

Checking your session…