--- title: "How to Deploy Next.js Sites to Netlify — 5-Minute Tutorial" description: "Learn how to deploy Next.js sites to Netlify! Take advantage of Next features like dynamic routes and Preview Mode while keeping the power of Netlify." source: "https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/" last_updated: "2026-07-08T20:58:25.000Z" --- > **UPDATE:** As of March 16, 2021, [Next.js sites are natively supported on Netlify](https://www.netlify.com/blog/2021/03/16/try-the-new-essential-next.js-plugin-now-with-auto-install/)! The instructions in this post are no longer necessary. Did you know you can **deploy a Next.js site to Netlify, including support for dynamic routes, Preview Mode, and more?** Learn how in this tutorial! ## Step 1: Put Your Next.js Site Code in a Git Repo While this is technically optional, the magic of Netlify is that every push to the main branch your GitHub, GitLab, or Bitbucket repo triggers a new build and deploy of your site. For a pared down example, check out [this minimal Next.js site repository](https://github.com/jlengstorf/next-minimal-setup). ## Step 2: Create a New Netlify Site From Your Next.js Site Repo Now that our code is available in a repo, we can **configure Netlify to deploy our Next.js site any time a new commit is pushed**. This is possible in two ways: using the Netlify CLI, and using the Netlify app UI. ### Option 1: Use the Netlify CLI Netlify provides a powerful CLI that allows you to interact with your account. This means you can **deploy a Next.js site to Netlify without ever leaving the command line!** I love this option because it’s fast and I can do it at the same time as I push the repo code to GitHub for the first time. If you don’t already have it, install the Netlify CLI globally and log in: ``` # install the Netlify CLI globallynpm install -g netlify-cli # log into your Netlify accountntl login ``` Next, navigate to the site’s root directory and run `ntl init`: ``` # move into the site's root directorycd ~/path/to/your/nextjs-site/ # create a new Netlify sitentl init ``` ![Terminal output of deploying a Next.js site to Netlify using the Netlify CLI](/v3/img/blog/deploy-next-on-netlify/next-deploy-netlify-cli.png) The CLI will guide you through configuring your new site: - Choose “Create & configure a new site” - Use the arrow keys to choose the Netlify team you want to deploy to - Choose a name for your site or leave it blank to have one auto-generated (you can change this later) - Set the build command to `next build` - For the directory to deploy, enter `out` > Heads up! The directory to deploy can be anything you want except the current directory (`.`). Using the current directory would also publish your source code publicly. ### Option 2: Use the Netlify UI If you prefer not to use the command line, you can **create a new Netlify site using the app UI**. First, visit [https://app.netlify.com/start](https://app.netlify.com/start) in your browser. ![Screenshot of step 1 deploying a Next.js site to Netlify using the Netlify app](/v3/img/blog/deploy-next-on-netlify/next-deploy-netlify-ui-step-1.png) Choose your preferred Git provider from the options and authorize Netlify to access the repo you want to deploy. In the next screen, select your Next.js repo from the list. ![Screenshot of step 2 deploying a Next.js site to Netlify using the Netlify app](/v3/img/blog/deploy-next-on-netlify/next-deploy-netlify-ui-step-2.png) The third screen asks for details about where to create the site and how to build it. 1. Choose the team and branch to deploy from the dropdowns 2. Set the build command to `next build` 3. Leave the publish directory blank 4. Click “Deploy Site” ![Screenshot of step 3 deploying a Next.js site to Netlify using the Netlify app](/v3/img/blog/deploy-next-on-netlify/next-deploy-netlify-ui-step-3.png) ## Step 3: Add the Next on Netlify Plugin Now that the site is configured, **add the Next on Netlify plugin to enable Next’s dynamic features including dynamic routes, API routes, and Preview Mode**. [Install the Next on Netlify plugin](https://app.netlify.com/plugins/@netlify/plugin-nextjs/install?utm_source=blog&utm_medium=next-on-netlify-jl&utm_campaign=devex) (one-click install) ## That’s All! Now that you’ve deployed your Next.js site on Netlify, you have all the benefits of Netlify — including instant rollbacks, Netlify Identity, continuous deployment whenever you push to your repo, and much more — as well as the benefits of Next.js like Preview Mode, dynamic routing, and API routes. We’re so excited to see what you build with Next.js on Netlify! ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=How to Deploy Next.js Sites to Netlify &url=https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2020%2F11%2F30%2Fhow-to-deploy-next.js-sites-to-netlify%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify//) - [Bluesky](https://bsky.app/intent/compose?text=How to Deploy Next.js Sites to Netlify +https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify//) * * * ### Tags - [Next.js](/blog/tags/next.js/) - [Deploy](/blog/tags/deploy/) ## Keep reading ![](/images/blog-fallback-thumbnail.svg) News & Announcements October 27, 2020 [ ### Preview Mode for Next.js now fully supported on Netlify ](/blog/2020/10/27/preview-mode-for-next.js-now-fully-supported-on-netlify/) - ![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/)