redirecting

21 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

permanentRedirect accepts absolute URLs

The permanentRedirect function accepts absolute URLs and can be used to redirect to external links.

redirect function usage locations

The redirect function can be called in Server Components, Route Handlers, and Server Functions. It can also be called in Client Components during the rendering process but not in event handlers.

permanentRedirect function usage locations

The permanentRedirect function can be called in Server Components, Route Handlers, and Server Functions.

redirect with try/catch blocks

The redirect function throws an error so it should be called outside the try block when using try/catch statements.

redirect function status codes

The redirect function returns 307 (Temporary Redirect) in most contexts, or 303 (See Other) in Server Actions when JavaScript is not available.

permanentRedirect function status codes

The permanentRedirect function returns 308 (Permanent Redirect) in most contexts, or 303 (See Other) in Server Actions when JavaScript is not available.

useRouter hook for client-side redirects

In Client Components, use the push method from the useRouter hook to redirect inside event handlers. Import useRouter from 'next/navigation' in App Router or 'next/router' in Pages Router.

useRouter hook example App Router

In App Router, use 'use client' directive and import useRouter from 'next/navigation', then call router.push('/destination') in event handlers.

Link component preferred over useRouter

If you don't need to programmatically navigate a user, use a Link component instead of useRouter.

next.config.js redirects configuration

The redirects option in next.config.js file allows you to redirect an incoming request path to a different destination path. It supports path matching, header, cookie, and query matching. Configure it by creating an async redirects() function that returns an array of redirect objects.

next.config.js redirects object structure

Each redirect object in next.config.js must have: source (the incoming request path), destination (the path to redirect to), and permanent (boolean to return 308 for true or 307 for false).

next.config.js redirects wildcard matching

next.config.js redirects support wildcard path matching using colons. For example, source: '/blog/:slug' with destination: '/news/:slug' will match and redirect /blog/post-name to /news/post-name.

next.config.js redirects platform limit

The redirects option may have a limit on platforms. For example, on Vercel, there is a limit of 1,024 redirects. For managing 1000+ redirects, consider creating a custom solution using Proxy.

next.config.js redirects execution order

The redirects option in next.config.js runs before Proxy.

Proxy redirect with NextResponse

Use NextResponse.redirect in Proxy to redirect users based on conditions before a request is completed. Proxy runs after redirects in next.config.js and before rendering.

Proxy redirect execution order

Proxy runs after redirects in next.config.js and before rendering.

Proxy redirect example with authentication

In Proxy, use NextResponse.redirect with NextResponse.next() to conditionally redirect. For example, check if user is authenticated and redirect to '/login' if not. Use the matcher config option to specify which paths the Proxy applies to, e.g., matcher: '/dashboard/:path*'.

Managing redirects at scale with Proxy

To manage 1000+ redirects, use Proxy with a redirect map stored in a database or JSON file. Optimize data lookup by using a Bloom filter to efficiently check if a redirect exists before reading the larger redirects database.

Redirect map data structure

A redirect map is a JSON object with paths as keys and objects containing 'destination' (string) and 'permanent' (boolean) properties as values. Example: { '/old': { 'destination': '/new', 'permanent': true } }

Bloom filter for redirect optimization

Use a Bloom filter in Proxy to check if a redirect exists before fetching from a Route Handler or API. If a match is found in the Bloom filter, forward to the Route Handler to check the actual redirect database. This avoids importing large redirect files into Proxy, which can slow down every incoming request.

Redirect status code calculation

When managing redirects programmatically, use status code 308 for permanent redirects and 307 for temporary redirects. Calculate with: const statusCode = redirectEntry.permanent ? 308 : 307

Give your agent this brain