How to Deploy Next.js to Netlify Manually

Netlify's docs aren't that clear about how one can deploy a Next.js website to netlify manually. However, it's pretty simple.

Table of Contents

Install `netlify-cli` and `@netlify/plugin-nextjs`

yarn add -D @netlify/plugin-nextjs
yarn add -D @netlify/plugin-nextjs

Docs:

Place the following in the root of your project:

netlify.toml

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

[build]
command = "yarn next build"
publish = ".next"

Docs:

Generate the access token manually in your Netlify user settings for Personal access tokens:

Under Personal access tokens, select New access token.
Enter a description.
Select Generate token.
Copy the generated token to your clipboard. Once you navigate from the page, the token cannot be seen again.
Save the token as a NETLIFY_AUTH_TOKEN environment variable in your terminal settings or in the UI of a Continuous Integration (CI) tool.

The above can alternatively be done via the command line

Docs:

This site ID can be found in the Netlify UI:

Go to Site settings > General > Site details > Site information, and copy the value for API ID.
Assign the ID to a NETLIFY_SITE_ID environment variable.

This can alternatively be done via the netlify link command.

Deploying to production can be done via the following command:

netlify deploy --build --prod

Remember to add the build flag to the netlify deploy command. This doesn't work:

netlify build && netlify deploy --prod

Docs:

BOCTAOE ✌️