How to Deploy a Static Next.js Site to Netlify

To deploy a static Next.js website to Netlify, first you need to export your Next.js site as a static build.

Go to your Next.js project’s package.json file and make sure you have this line inside your scripts object:

"build": "next build && next export",

For context, here’s my entire scripts object:

  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start"
  },

Now you can statically export your Next.js site by running one of these commands:

yarn build

Or

npm run build

Make sure your static site is pushed to GitHub or another remote repository.

Then login to your Netlify account and do this:

  • Click on the New site from Git button
  • Under Continuous Deployment choose one of the 3 Git Providers (GitHub, GitLab, Bitbucket), this will show you a list all your repositories.
  • Choose the project you want to deploy to Netlify and fill out the Build & Publish fields
  • Build command: either yarn build or `npm run build
  • Publish directory: out

It should look like this:

Netlify build settings

Now click on Deploy site.

If you’ve done everything correctly, your static Next.js site will get deployed on Netlify within a couple of minutes, depending on how big your project is.


Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Kofi