Deploy your Next.js App to Netlify in 2 minutes

Great, you have your Next.js app correctly working on your local machine. You now want to quickly deploy it online to share it with your friends or team. There are several CI/CD services that allow you to publish your static website for free by simply connecting to the Github repository where your project stands:

• Netlify
• Surge
• AWS Amplify
• Heroku
• Vercel

Let's focus on Netlify from here.

Edit your package.json for production

If you created your Next.js app using the npx create-next-app command, your scripts object in package.json file should look like this:

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

Modify it this way :

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

Now, when we create a production build with npm run build, it will export build files to the out directory.

Setting up your Netlify account

This is the easiest part:

1. Create your account here
2. Click on New Site from Git
3. Follow the linking workflow to connect your Github/Gitlab repo (the one with your Next.js app)
4. Make sure you set Deploy Settings like this :
5. Click deploy, wait a few seconds and boom, your app is live.
6. Optional: Connect a custom domain by editing the DNS A record of your domain

From now on, every time you push a new commit to your Git repository, Netlify will automatically be informed to fetch updates and will then rebuild your Next.js project.

Enjoy & Best!