Use Next.js 12 on Netlify

Yesterday Next.js 12 was released, and there are so many cool features coming out!

There’s a new Rust compiler, which will make builds and refreshes nice and speedy, React 18 support, native ESM support, and a few other really neat things.

You can get started with a new Next.js 12 project here to try all of these projects out of the box!

(Clicking this button will clone a starter repo to your Git provider of choice, and deploy it instantly to Netlify)

Middleware support and the Edge

Out of the box, Netlify supports Middleware features with next/server! Middleware lets you run code before a request is completed. Based on the user’s incoming request, you can modify the response they receive!

To use Next.js Middleware, if you’re on the latest version of Next.js, create a _middleware.js or _middleware.ts file in your pages/ directory. It will run on all routes within the pages/ directory, similar to how _app.js works in wrapping all pages in that directory. Unlike _app.js, it can work on nested routes as well.

For example, let’s say you want a page to show up differently based on a cookie in the user’s request. You can use the NextRequest and NextResponse objects like so to rewrite the route:

// pages/_middleware.js

import { NextRequest, NextResponse } from 'next/server'

export function middleware(req) {
  const someCookie = req.cookies['something']
  const res = NextResponse.rewrite(`/something/${someCookie}`)

  return res
}

As for geolocation, that requires access to Edge Handlers, which is in beta.

Native support out of the box on Netlify

Next.js works out of the box on Netlify with zero configuration thanks to our open source build plugin! The latest version of it is in beta, which you can read more about here.

Help ‘n’ tips ‘n’ fun

If you would like to learn more about Next.js, have questions about it, or would like to build your own plugins for your projects, check out our community site. There you’ll find our forums full of helpful folks, Jamstack Explorers (a free course platform with courses on Next.js, serverless functions, and more), the Netlify docs site, and moooore!