--- title: "Preview Mode for Next.js Now Fully Supported on Netlify - Learn More" description: "Netlify" source: "https://www.netlify.com/blog/2020/10/27/preview-mode-for-next.js-now-fully-supported-on-netlify/" last_updated: "2026-07-10T21:03:49.000Z" --- In the Next.js 9.3 release in Spring 2020, multiple features came out making static generation a first-class citizen in the framework. Jamstack developers, rejoice! Since then, more and more powerful features have come into play to make it a more modern, robust framework. One of our favorite features of that release was Preview Mode. Static generation is awesome when you’re fetching data from a CMS and pre-building everything, but sometimes you want to be able to view what your content will look like before running a full build of your website. Preview Mode solves that problem! ## How does it work? Preview mode allows users to bypass the statically generated page to server-side render a draft page from any data fetching solution. So, you don’t have to wait for a build to run to see a preview of what a new piece of content might look like! This is ideal for if you’re using a CMS solution for your sites and your team wants to see what their changes might look like before committing them. This week, we are happy to announce full support of Preview Mode using `next-on-netlify`, which wraps your application in a tiny compatibility layer, so that pages can use Netlify Functions to be server-side rendered! [![Next on Netlify](/v3/img/blog/nextonnetlify.png)](https://github.com/netlify/next-on-netlify) ## Installing `next-on-netlify` The `next-on-netlify` package is a simple install of four steps! First, install the npm module into your project. ``` npm install next-on-netlify ``` Once that’s installed, add a postbuild hook to your `package.json`: ``` { ... "scripts": { "dev": "next", "build": "next build", "postbuild": "next-on-netlify" }, ...} ``` Then, make sure your `next.config.js` has the target set to `serverless`: ``` module.exports = { target: "serverless",}; ``` And finally, update your `netlify.toml` to tell Netlify how to build your Next.js app, where the functions folder is located, and which folder to upload to its CDN: ``` [build] command = "npm run build" functions = "out_functions" publish = "out_publish" ``` It’s done! ### Too much work? If you are interested in a build plugin that does these steps for you, we have one in active development [on our GitHub](https://github.com/netlify/netlify-plugin-nextjs). It is in an early alpha, but please do check it out and file issues if you see them! ## Woo hoo! Are you as hyped as we are? We hope so. If you’d like to learn more, on November 17th [we will be hosting a live demo](https://netlify.zoom.us/webinar/register/9116037648485/WN_0TNryHoCST2RdokvWf4NjQ) on Next.js (hosted by yours truly) covering new features we’re releasing for Next.js development, how you can use Next.js with Netlify today, a live Q&A, and more. If you have any questions in the meantime, head on over to our [Community forums](https://community.netlify.com/?utm_source=blog&utm_medium=community-cs&utm_campaign=devex), and go ahead and install [next-on-netlify](https://github.com/netlify/next-on-netlify) in your Next.js projects if you’d like to take advantage of Preview Mode today. Now go get building! ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=Preview Mode for Next.js now fully supported on Netlify&url=https://www.netlify.com/blog/2020/10/27/preview-mode-for-next.js-now-fully-supported-on-netlify//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2020%2F10%2F27%2Fpreview-mode-for-next.js-now-fully-supported-on-netlify%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2020/10/27/preview-mode-for-next.js-now-fully-supported-on-netlify//) - [Bluesky](https://bsky.app/intent/compose?text=Preview Mode for Next.js now fully supported on Netlify+https://www.netlify.com/blog/2020/10/27/preview-mode-for-next.js-now-fully-supported-on-netlify//) * * * ### Tags - [Next.js](/blog/tags/next.js/) - [Next.js](/blog/tags/next.js/) - [Netlify](/blog/tags/netlify/) ## Keep reading ![](/images/blog-fallback-thumbnail.svg) Guides & Tutorials June 18, 2020 [ ### Next.js 101: What you should know ](/blog/2020/06/18/next.js-101-what-you-should-know/) - ![Profile picture of Cassidy Williams](/_astro/a62099fab0f946e063c4b84ff4b4d9c94f9aa7a5-400x400_ZdakPa.webp) Cassidy Williams ![](/images/blog-fallback-thumbnail.svg) Guides & Tutorials July 15, 2020 [ ### Integrating Netlify Identity into your Next.js apps ](/blog/2020/07/15/integrating-netlify-identity-into-your-next.js-apps/) - ![Profile picture of Cassidy Williams](/_astro/a62099fab0f946e063c4b84ff4b4d9c94f9aa7a5-400x400_ZdakPa.webp) Cassidy Williams ## 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/)