2

According to the docs, Netlify supports next.js through the Essential Build Plugin and manual deployments through a CLI command, but how can I use the two together to build a next.js project in my own CI and deploy only the build output to Netlify?

The plugin page mentions "linking", i.e. it assumes that the project is connected via Git repository and built by netlify, not locally by my own CI.

John Goofy
  • 866
  • 8
  • 22

2 Answers2

2

OK, finally got this working. Wrapping it up in case somebody else finds it useful:

  • install packages netlify-cli and @netlify/plugin-nextjs
  • create netlify.toml in the project root as described in this section of the plugin README (make sure to have paths for publish and functions; functions is required for server-side-rendering and API handlers; both directories will be used for build output during the build)
  • if using Git, add both paths and .netlify (another "temp" directory) to .gitignore to exclude the build output from your repo
  • important (found the info in the documentation of the former/outdated next-on-netlify project and couldn't deploy without this): add target: "experimental-serverless-trace" to next.config.js
  • for the initial setup: netlify login to your account, run netlify deploy --build once, pick a site name
  • if you want to run the deployment in your CI, configure environment variables NETLIFY_AUTH_TOKEN (with a "personal access token" from the Netlify UI) and NETLIFY_SITE_ID (displayed in the Netlify UI after choosing a name and successfully completing the first successful deployment) to bypass login and site selection in the future
John Goofy
  • 866
  • 8
  • 22
2

Install netlify-cli and @netlify/plugin-nextjs

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

Setup the netlify.toml file

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

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

Configure the NETLIFY_AUTH_TOKEN and NETLIFY_SITE_ID environment variables

Generate the access token manually in your Netlify user settings for Personal access tokens. This can alternatively be done via the command line. 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 site ID is 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.

Build and Deploy your Next.js application to Netlify

netlify deploy --build --prod

Docs

Longer Article

https://paulonteri.com/thoughts/deploy-nextjs-to-netlify-manually

Paul Onteri
  • 577
  • 6
  • 11