Read and write cookies directly at the edge.
You can read and write cookies directly on the edge and action as needed.
https://edge-functions-cookies.vercel.app
Since you can read cookies on the edge and rewrite the user to a statically generated page, eliminates the need of using getServerSideProps + redirect just to access the cookie, hence improving your site's performance and maintaining the same url.
The magic happens in the middleware.ts
file:
import { NextRequest, NextResponse } from 'next/server' export const config = { matcher: '/', } export function middleware(req: NextRequest) { // Parse the cookie const isInBeta = JSON.parse(req.cookies.get('beta')?.value || 'false') // Update url pathname req.nextUrl.pathname = `/${isInBeta ? 'beta' : 'non-beta'}` // Rewrite to url return NextResponse.rewrite(req.nextUrl) }
You can choose from one of the following two methods to use this repository:
Deploy the example using Vercel:
Execute create-next-app
with pnpm to bootstrap the example:
pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/cookies cookies
Next, run Next.js in development mode:
pnpm dev
Deploy it to the cloud with Vercel (Documentation).
Read and write cookies directly at the edge.
You can read and write cookies directly on the edge and action as needed.
https://edge-functions-cookies.vercel.app
Since you can read cookies on the edge and rewrite the user to a statically generated page, eliminates the need of using getServerSideProps + redirect just to access the cookie, hence improving your site's performance and maintaining the same url.
The magic happens in the middleware.ts
file:
import { NextRequest, NextResponse } from 'next/server' export const config = { matcher: '/', } export function middleware(req: NextRequest) { // Parse the cookie const isInBeta = JSON.parse(req.cookies.get('beta')?.value || 'false') // Update url pathname req.nextUrl.pathname = `/${isInBeta ? 'beta' : 'non-beta'}` // Rewrite to url return NextResponse.rewrite(req.nextUrl) }
You can choose from one of the following two methods to use this repository:
Deploy the example using Vercel:
Execute create-next-app
with pnpm to bootstrap the example:
pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/cookies cookies
Next, run Next.js in development mode:
pnpm dev
Deploy it to the cloud with Vercel (Documentation).