DEV Community

Cover image for Deploy a Next.js site to Netlify
jastuccio
jastuccio

Posted on • Updated on

Deploy a Next.js site to Netlify

Next.js is from Vercel.com, but I already have a Netlify account and some familiarity with Netlify. My first 2 deployment attempts failed. I was pointing to the wrong directory.

The publish directory should be ./out

Alt Text

You should already have signed up for Netlify and your Next.js site in a Github, Gitlab, or Bitbucket repo.

Here are the steps:

  1. install Netlify-cli npm install -g netlify-cli (I already had it installed)
  2. log in to Netlify ntl login
  3. Navigate to your sites route directory cd ~/path/to/your/nextjs-site/
  4. initialize Netlify ntl init new site:
    • choose "Create & configure a new site"
    • select your team (if you have more than one)
    • optional - give the site a unique name (or let Netlify randomly assign one) existing site:
    • if anyone needs the steps please request in the comments and I will update the post 5.Authorize with GitHub (or the remote you chose)
  5. use npm run build && npm run export as the build command
  6. use .out as the "Directory to Deploy"
  7. specify your "netlify functions" folder (I do not have any for this project yet)
  8. You could configure build settings, deploy settings, and environment variables in a netlify.toml
// netlify.toml
[build]
  command = "npm run build && npm run export"
  publish = "out"
Enter fullscreen mode Exit fullscreen mode

When you push new code to your remote git repo Netlify will automatically update!

sources:
https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/

https://explorers.netlify.com/learn/nextjs/nextjs-deployment

Top comments (0)