Made in Builder

Made in Builder

Webinar 👉 Visually Build at Scale with Builder.io & Netlify on 12/1

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

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:

To:

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:

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

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:

Conclusion

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.

Share

Twitter
LinkedIn
Facebook

Continue Reading
13 MIN
Movies app in 7 frameworks - which is fastest and why?
WRITTEN BYMiško Hevery & Yoav Ganbar
November 21, 2022
Latest News
The Builder Drop / Issue #4
WRITTEN BYBuilder Team
November 17, 2022
How to Optimally Connect Any Third-Party Service to Your Next.js Site
WRITTEN BYSteve Sewell
November 14, 2022

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Sign up

Log in

DEVELOPERS

Builder for Developers

Developer Docs

Github

JSX Lite

Qwik

INTEGRATIONS

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

COMPANY

About

Careers 🚀

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.
Get Started
Log in

DEVELOPERS

Builder for Developers

Developer Docs

Open Source Projects

Performance Insights

PRODUCT

Features

Pricing

RESOURCES

User Guides

Blog

Community Forum

Templates

Partners

Submit an Idea

INTEGRATIONS

React

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

Shopify

All Integrations

© 2022 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

By clicking “Subscribe”, I agree to Builder.io's Terms of Service and Privacy Policy.