---
title: "Announcing one-click install Next.js Build Plugin on Netlify | Netlify"
description: "Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!"
source: "https://www.netlify.com/blog/2020/12/07/announcing-one-click-install-next.js-build-plugin-on-netlify/"
last_updated: "2026-07-09T02:11:38.000Z"
---
Hey devs!

We are super excited to share with you our latest [build plugin](https://www.netlify.com/integrations/) in the Netlify ecosystem, to make it even easier to deploy Next.js apps onto Netlify!

You may be familiar with our project [next-on-netlify](https://github.com/netlify/next-on-netlify), a utility for enabling server-side rendering (and other functionality) in Next.js on Netlify. It wraps your application in a tiny compatibility layer, so that pages can use Netlify Functions to be server-side rendered. To install `next-on-netlify`, it takes 3 steps.

We thought 3 steps was just too much.

## Introducing our one-click install Next.js build plugin!

With this new build plugin, you can use the features of Next.js that you know and love that normally only work with apps that are run with a Node server, without any code changes on your end. This is including, but not limited to:

-   Server-side rendering
-   Incremental Static Regeneration compatibility (via SSRed routes)
-   Preview Mode
-   And moooore!

## Wow! How do I get this?

You can install it from [the Netlify UI via the Plugins directory](https://app.netlify.com/plugins/@netlify/plugin-nextjs/install):

![Next.js Build Plugin in the UI](/v3/img/blog/nextplugin.png "Next.js Build Plugin in the UI")

Or you can install it in your `netlify.toml`:

```
...
[[plugins]]  package = "@netlify/plugin-nextjs"
```

## Wow! How does it work?

Under the hood, the plugin uses the `next-on-netlify` package to copy files from the `.next` directory to where Netlify expects them, and uses Netlify Functions to support server-side rendering any routes (both pages and API routes).

For Preview Mode, we use cookie-based redirects to allow developers to enter and exit Preview Mode for routes configured in their app.

For Incremental Static Regeneration, we currently server-side render those routes. We have some development in the works for caching those pages and including fallback pages, as well. When the additional functionality is added, you won’t have to make any code changes to see the benefits.

## Can I see more?

Of course you can!

The Netlify team will be at [Reactathon](https://www.reactathon.com/speakers/profile/cassidy-williams) this next week where you can ask as many questions as your heart desires.

If you’d like to learn how to write Next.js, we have a Mission just for you on [Jamstack Explorers](https://www.youtube.com/watch?v=0qXjtznmhDI&list=PLzlG0L9jlhENGgDUr09a7JdRgSTybmE1P)!

If you’d like to learn more, here are some blog posts to get you started:

-   [How to Deploy Next.js Sites to Netlify](https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/)
-   [Next.js: Should I use SSR or SSG?](https://www.netlify.com/blog/2020/12/02/next.js-should-i-use-ssr-or-ssg/)
-   [What is React Fast Refresh?](https://www.netlify.com/blog/2020/12/03/what-is-react-fast-refresh/)
-   [A Spooky Adventure at Next.js Conf](https://www.netlify.com/blog/2020/10/27/a-spooky-adventure-at-next.js-conf/)
-   [Preview Mode for Next.js fully supported on Netlify](https://www.netlify.com/blog/2020/10/27/preview-mode-for-next.js-now-fully-supported-on-netlify/)

Ready to try it for yourself? Click the button below to deploy a starter project for Next.js:

[![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=blog&utm_medium=nextstarter-cs&utm_campaign=devex)

(This clones [a starter project for Next.js](https://github.com/netlify-templates/next-netlify-starter) to your GitHub and deploys it to Netlify)

Go get coding!

### Share

-   [X (fka Twitter)](https://twitter.com/intent/tweet?text=Announcing one-click install Next.js Build Plugin on Netlify&url=https://www.netlify.com/blog/2020/12/07/announcing-one-click-install-next.js-build-plugin-on-netlify//)
-   [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2020%2F12%2F07%2Fannouncing-one-click-install-next.js-build-plugin-on-netlify%2F%2F)
-   [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2020/12/07/announcing-one-click-install-next.js-build-plugin-on-netlify//)
-   [Bluesky](https://bsky.app/intent/compose?text=Announcing one-click install Next.js Build Plugin on Netlify+https://www.netlify.com/blog/2020/12/07/announcing-one-click-install-next.js-build-plugin-on-netlify//)

* * *

### Tags

-   [Next.js](/blog/tags/next.js/)

## Keep reading

![](/images/blog-fallback-thumbnail.svg)

Guides & Tutorials November 30, 2020

[

### How to Deploy Next.js Sites to Netlify

](/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/)

-   ![Profile picture of Jason Lengstorf](/_astro/11b8e51d90b26838de71904294430279b7099995-700x700_1R7sJe.webp)
    
    Jason Lengstorf
    

![](/images/blog-fallback-thumbnail.svg)

Guides & Tutorials December 2, 2020

[

### Next.js: Should I use SSR or SSG?

](/blog/2020/12/02/next.js-should-i-use-ssr-or-ssg/)

-   ![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/)