How to deploy Next.js site to Netlify without ‘page not found’ error.

It was a really drama story for me. Searched millons of blogs. But every time I got ‘page not found’ error on Netlify. Finally, fixed the error. Here is how I did it.

First of all, connect your next.js project github repo (or any other way) to Netlify.

Add netlify/plugin-nextjs from npm to your project

npm i @netlify/plugin-nextjs

Create netlify.toml file in your project root directory

Open it and add this lines to file and save.

[build]
  command = "npm run build"
  publish = ".next"
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
[[plugins]]
  package = "@netlify/plugin-nextjs"

Go Netlify deploy settings

Go to your Netlify account, click ‘sites’ tab. Select your next.js project, click ‘deploys’ tab and select ‘deploy settings’. Set your settings like below.

Create next.config.js file in your project root directory

Add this lines in module.exports object

module.exports = {
  // other exports
  target: 'serverless', // add this line
};

Deploy it!

From now on, every time you push a new commit to your Git repository, Netlify will automatically deploy. You never get ‘page not found’ error.

Enjoy!