--- title: "Use Next.js 12 on Netlify" description: "You can use the latest and greatest features of Next.js 12 on Netlify today!" source: "https://www.netlify.com/blog/2021/10/27/use-next.js-12-on-netlify/" last_updated: "2026-07-09T02:59:35.000Z" --- 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! [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/next-netlify-starter&utm_source=github&utm_medium=nextstarter-cs&utm_campaign=devex-cs) (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](https://www.netlify.com/products/#netlify-edge-functions), which is in beta. ## Native support out of the box on Netlify [Next.js works out of the box on Netlify](https://www.netlify.com/with/nextjs/) 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](https://www.netlify.com/blog/2021/10/25/preview-whats-new-with-next.js-on-netlify/). ## 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](https://answers.netlify.com/). There you’ll find our [forums](https://answers.netlify.com/) full of helpful folks, [Jamstack Explorers](https://www.youtube.com/@NetlifyApp/playlists?view=50&sort=dd&shelf_id=2) (a free course platform with courses on Next.js, serverless functions, and more), the [Netlify docs site](https://docs.netlify.com/), and moooore! ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=Use Next.js 12 on Netlify&url=https://www.netlify.com/blog/2021/10/27/use-next.js-12-on-netlify//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2021%2F10%2F27%2Fuse-next.js-12-on-netlify%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2021/10/27/use-next.js-12-on-netlify//) - [Bluesky](https://bsky.app/intent/compose?text=Use Next.js 12 on Netlify+https://www.netlify.com/blog/2021/10/27/use-next.js-12-on-netlify//) * * * ### Tags - [Next.js](/blog/tags/next.js/) ## Keep reading ![](/images/blog-fallback-thumbnail.svg) News & Announcements October 25, 2021 [ ### Preview what’s new with Next.js on Netlify ](/blog/2021/10/25/preview-whats-new-with-next.js-on-netlify/) - ![Profile picture of Joel Cloralt](/_astro/c26e6c4a63d29239b50c9b9c12e73d24989e5c74-200x200_2bnSD1.webp) Joel Cloralt ![](/_astro/eb275ddb9290b947ba4c53ac30538c77b44edae9-720x405_1y2MXK.webp) News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças ## Recent posts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças News & Announcements June 24, 2026 [ ### How we measure Netlify’s Agent Experience ](/blog/how-we-measure-netlify-agent-experience) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)