--- 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-08-05T05:01:12.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 Opinions & Insights July 28, 2026 [ ### Open Weights and the 2nd World ](/blog/open-weights-and-the-2nd-world) - ![Profile picture of Mathias Biilmann](/_astro/f193d4707a6391d843d5aaa73338b5a5971ec5cc-960x960_1Yylqm.webp) Mathias Biilmann Tools & Services July 28, 2026 [ ### MCP goes stateless and extensible ](/blog/mcp-goes-stateless-and-extensible) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts News & Announcements July 28, 2026 [ ### New Netlify projects are now private by default ](/blog/new-netlify-projects-are-now-private-by-default) - ![Profile picture of Taylor Barnett-Torabi](/_astro/cf4624da8c1286738397b6fecb53bad504df140b-400x400_ZsvK0s.webp) Taylor Barnett-Torabi ![](/_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/)