Watch our biggest AI launch event

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Contact Sales

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

‹ Back to blog

Query Params & Cookies

Using Query Params and Cookies in Next.js Static Pages

October 7, 2022

Written By Aziz Abbas

Next.js incremental static regeneration is fantastic—it allows for delivering pre-built static pages at scale, rather than rebuilding the entire site on every deployment (cough, cough, Gatsby!). You may scale to millions of static pages while maintaining the advantages of SSG.

Static pages are built in a non-blocking way:

  • During build time
  • On revalidation hooks calls
  • On the first request after the revalidation duration is over

Because of this, developers can't out-of-the-box build pages that depend on the request context. For example, if your page design is different for logged-in users, return visitors, geographical location, etc., you'd have to render those elements on the client...but there is a solution.

Next.js Edge Middleware to the rescue

With the help of the middleware provided by Next.js, you can write functions that run halfway between the user's request initiation and completion. This way you can process a user's request and rewrite it to a static page if needed.

So in our case, we want to rewrite:

GET http://example.com/my-page

To:

GET https://example.com/my-page/{{path}}

Where path is a deterministic string representation of the various options your static page needs to render accurately.

So, you'd use the middleware to encode things from the request context; such as, geo location, return visitor cookies, and query params. And on the other end you'd have your static path handler decode it.

For example, you could use encodeOptions for whether or not the user is a return visitor, getting their country, and getting the page:

// middleware.js file
import { NextResponse } from 'next/server'
import { encodeOptions } from '../utils';

export default function middleware(request) {
  if (request.nextUrl.pathname === '/my-page') {
    const searchParams = request.nextUrl.searchParams
    const path = encodeOptions({
      returnVisitor: Boolean(request.cookies.get('visitor')),
      country: request.geo?.country,
      page: searchParams.get('page'),
    })

    return NextResponse.rewrite(new URL(`/my-page/${path}`, request.nextUrl))
  }
  return NextResponse.next()
}

Then in your static path handler you can decode these options:

// /pages/my-page/[path].jsx file
import { decodeOptions } from '../../utils'

export async function getStaticProps({
  params,
}) {
  const options = decodeOptions(params.path)
  return {
    props: {
      options,
    }
  }
}

export function getStaticPaths() {
  return {
    paths: [],
    fallback: true
  }
}

export default function MyPath({ options }) {
  return <MyPage isReturnVisitor={options.returnVisitor} country={options.country} />
}

Now we can implement our encoding/decoding functions, which could be as basic as using JSON.stringify . But we can do better than that—let's use a library that produces deterministic strings from an object:

npm install fast-json-stable-stringify

And use it as in this snippet:

// utils.js
// https://github.com/epoberezkin/fast-json-stable-stringify
import stringify from 'fast-json-stable-stringify'

export function encodeOptions(options) {
  const json = stringify(options)
  return encodeURI(json);
}

export function decodeOptions(path) {
  return JSON.parse(decodeURI(path));
}

Combining Next.js middlewares with SSG/ISR pages is super powerful and opens up a variety of use cases, such as:

  • Automatic localization of content based on geographic location, by looking at the request.geo or the Accept-Language headers.
  • Changing themes of the site based on the hosting domain, by looking at the request.headers.get('host').
  • A/B testing variations of the same page.
  • Personalizing experiences based on user type.

For more on how our customers use the same technique to deliver high-performing A/B testing and content personalization with Builder.io, check out A/B Testing and Personalization with Next.js Edge Middleware.

Introducing Visual Copilot: convert Figma designs to high quality code in a single click.

Try Visual Copilot

Share

Twitter
LinkedIn
Facebook
Hand written text that says "A drag and drop headless CMS?"

Introducing Visual Copilot:

A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot
Newsletter

Like our content?

Join Our Newsletter

Continue Reading
Design to code8 MIN
Figma to React Native: Convert designs to clean code in a click
November 6, 2024
AI5 MIN
Introducing Visual Copilot 2.0: Design to Interactive
October 31, 2024
Design Systems8 MIN
Design Systems Explained
October 18, 2024