Skip to content

Adding Cookies

Read and write cookies directly at the edge.

Framework Next.js
Use Case Edge Functions, Documentation
CSS Tailwind
Publisher ▲ Vercel

Cookies Example

You can read and write cookies directly on the edge and action as needed.

Demo

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 mantaining 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') || 'false')

  // Update url pathname
  req.nextUrl.pathname = `/${isInBeta ? 'beta' : 'non-beta'}`

  // Rewrite to url
  return NextResponse.rewrite(req.nextUrl)
}

One-Click Deploy

Deploy the example using Vercel:

Getting Started

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/cookies cookies
# or
yarn create next-app --example https://github.com/vercel/examples/tree/main/edge-functions/cookies cookies

Next, run Next.js in development mode:

npm install
npm run dev

# or

yarn
yarn dev

Deploy it to the cloud with Vercel (Documentation).

Adding Cookies

Read and write cookies directly at the edge.

Framework Next.js
Use Case Edge Functions, Documentation
CSS Tailwind
Publisher ▲ Vercel

Cookies Example

You can read and write cookies directly on the edge and action as needed.

Demo

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 mantaining 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') || 'false')

  // Update url pathname
  req.nextUrl.pathname = `/${isInBeta ? 'beta' : 'non-beta'}`

  // Rewrite to url
  return NextResponse.rewrite(req.nextUrl)
}

One-Click Deploy

Deploy the example using Vercel:

Getting Started

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/cookies cookies
# or
yarn create next-app --example https://github.com/vercel/examples/tree/main/edge-functions/cookies cookies

Next, run Next.js in development mode:

npm install
npm run dev

# or

yarn
yarn dev

Deploy it to the cloud with Vercel (Documentation).

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential