Deployment of NextJs website - page not found

I want to deploy a Next Js website, I followed this tutorial:

I used Netlify UI

I got: " Page Not Found"

the site works locally

  • we need to know your netlify site name. Example: gifted-antelope-58b104.netlify.app
    https://cocky-jackson-905ec3.netlify.app/

  • DNS issues? Tell us the custom domain, tell us the error message! We can’t help if we don’t know your domain.

  • Build problems? Link or paste the FULL build log & build settings screenshot

7:31:29 PM: Build ready to start
7:31:31 PM: build-image version: 53b83b6bede2920f236b25b6f5a95334320dc849
7:31:31 PM: build-image tag: v3.6.0
7:31:31 PM: buildbot version: 8ae026ef4905d9174e416775c6b64aa19950569b
7:31:31 PM: Building without cache
7:31:31 PM: Starting to prepare the repo for build
7:31:32 PM: No cached dependencies found. Cloning fresh repo
7:31:32 PM: git clone GitHub - mostafachatillon/healthcare-startup-landing-page: Static website for a healthcare startup built with NextJS and SASS.
7:31:33 PM: Preparing Git Reference refs/heads/master
7:31:35 PM: Starting build script
7:31:35 PM: Installing dependencies
7:31:35 PM: Python version set to 2.7
7:31:37 PM: v12.18.0 is already installed.
7:31:38 PM: Now using node v12.18.0 (npm v6.14.4)
7:31:38 PM: Started restoring cached build plugins
7:31:38 PM: Finished restoring cached build plugins
7:31:38 PM: Attempting ruby version 2.7.1, read from environment
7:31:40 PM: Using ruby version 2.7.1
7:31:41 PM: Using PHP version 5.6
7:31:41 PM: Started restoring cached node modules
7:31:41 PM: Finished restoring cached node modules
7:31:41 PM: Installing NPM modules using NPM version 6.14.4
7:32:01 PM: > core-js-pure@3.6.5 postinstall /opt/build/repo/node_modules/core-js-pure
7:32:01 PM: > node -e β€œtry{require(’./postinstall’)}catch(e){}”
7:32:01 PM: > @ampproject/toolbox-optimizer@2.6.0 postinstall /opt/build/repo/node_modules/@ampproject/toolbox-optimizer
7:32:01 PM: > node lib/warmup.js
7:32:02 PM: AMP OPTIMIZER Downloaded latest AMP runtime data.
7:32:03 PM: npm WARN trafalgar@0.1.0 No repository field.
7:32:03 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/webpack/node_modules/fsevents):
7:32:03 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {β€œos”:β€œdarwin”,β€œarch”:β€œany”} (current: {β€œos”:β€œlinux”,β€œarch”:β€œx64”})
7:32:03 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/fsevents):
7:32:03 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {β€œos”:β€œdarwin”,β€œarch”:β€œany”} (current: {β€œos”:β€œlinux”,β€œarch”:β€œx64”})
7:32:03 PM: added 835 packages from 352 contributors and audited 840 packages in 20.828s
7:32:03 PM: 50 packages are looking for funding
7:32:03 PM: run npm fund for details
7:32:03 PM: found 7 vulnerabilities (5 low, 1 moderate, 1 high)
7:32:03 PM: run npm audit fix to fix them, or npm audit for details
7:32:03 PM: NPM modules installed
7:32:04 PM: Started restoring cached go cache
7:32:04 PM: Finished restoring cached go cache
7:32:04 PM: go version go1.14.4 linux/amd64
7:32:04 PM: go version go1.14.4 linux/amd64
7:32:04 PM: Installing missing commands
7:32:04 PM: Verify run directory
7:32:06 PM: ​
7:32:06 PM: ────────────────────────────────────────────────────────────────
7:32:06 PM: Netlify Build
7:32:06 PM: ────────────────────────────────────────────────────────────────
7:32:06 PM: ​
7:32:06 PM: ❯ Version
7:32:06 PM: @netlify/build 8.0.0
7:32:06 PM: ​
7:32:06 PM: ❯ Flags
7:32:06 PM: deployId: 5fe37ef154191cbe5d7c5b73
7:32:06 PM: mode: buildbot
7:32:06 PM: ​
7:32:06 PM: ❯ Current directory
7:32:06 PM: /opt/build/repo
7:32:06 PM: ​
7:32:06 PM: ❯ Config file
7:32:06 PM: No config file was defined: using default values.
7:32:06 PM: ​
7:32:06 PM: ❯ Context
7:32:06 PM: production
7:32:06 PM: ​
7:32:06 PM: ────────────────────────────────────────────────────────────────
7:32:06 PM: 1. Build command from Netlify app
7:32:06 PM: ────────────────────────────────────────────────────────────────
7:32:06 PM: ​
7:32:06 PM: $ npm run build
7:32:06 PM: > trafalgar@0.1.0 build /opt/build/repo
7:32:06 PM: > next build
7:32:07 PM: warn - No build cache found. Please configure build caching for faster rebuilds. Read more: https://err.sh/next.js/no-cache
7:32:07 PM: info - Creating an optimized production build…
7:32:24 PM: info - Compiled successfully
7:32:24 PM: info - Collecting page data…
7:32:24 PM: info - Generating static pages (0/3)
7:32:25 PM: info - Generating static pages (1/3)
7:32:25 PM: info - Generating static pages (2/3)
7:32:25 PM: info - Generating static pages (3/3)
7:32:25 PM: info - Finalizing page optimization…
7:32:25 PM: Page Size First Load JS
7:32:25 PM: β”Œ β—‹ / 305 B 66.1 kB
7:32:25 PM: β”œ /_app 0 B 58.4 kB
7:32:25 PM: β”œ β—‹ /404 2.75 kB 61.1 kB
7:32:25 PM: β”” β—‹ /cn 306 B 66.1 kB
7:32:25 PM: + First Load JS shared by all 58.4 kB
7:32:25 PM: β”œ chunks/commons.cb8287.js 10.5 kB
7:32:25 PM: β”œ chunks/framework.9ec1f7.js 39.9 kB
7:32:25 PM: β”œ chunks/main.695730.js 6.97 kB
7:32:25 PM: β”œ chunks/pages/_app.ae5001.js 282 B
7:32:25 PM: β”œ chunks/webpack.e06743.js 751 B
7:32:25 PM: β”” css/872f9e3a5991e2738ce7.css 2.27 kB
7:32:25 PM: Ξ» (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
7:32:25 PM: β—‹ (Static) automatically rendered as static HTML (uses no initial props)
7:32:25 PM: ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
7:32:25 PM: (ISR) incremental static regeneration (uses revalidate in getStaticProps)
7:32:25 PM: ​
7:32:25 PM: (build.command completed in 19.4s)
7:32:25 PM: ​
7:32:25 PM: ────────────────────────────────────────────────────────────────
7:32:25 PM: Netlify Build Complete
7:32:25 PM: ────────────────────────────────────────────────────────────────
7:32:25 PM: ​
7:32:25 PM: (Netlify Build completed in 19.5s)
7:32:25 PM: Caching artifacts
7:32:25 PM: Started saving node modules
7:32:25 PM: Finished saving node modules
7:32:25 PM: Started saving build plugins
7:32:25 PM: Finished saving build plugins
7:32:25 PM: Started saving pip cache
7:32:26 PM: Finished saving pip cache
7:32:26 PM: Started saving emacs cask dependencies
7:32:26 PM: Finished saving emacs cask dependencies
7:32:26 PM: Started saving maven dependencies
7:32:26 PM: Finished saving maven dependencies
7:32:26 PM: Started saving boot dependencies
7:32:26 PM: Finished saving boot dependencies
7:32:26 PM: Started saving rust rustup cache
7:32:26 PM: Finished saving rust rustup cache
7:32:26 PM: Started saving rust cargo bin cache
7:32:26 PM: Finished saving rust cargo bin cache
7:32:26 PM: Started saving go dependencies
7:32:26 PM: Finished saving go dependencies
7:32:29 PM: Build script success
7:32:29 PM: Starting to deploy site from β€˜β€™
7:32:29 PM: Creating deploy tree
7:32:29 PM: Creating deploy upload records
7:32:29 PM: 30 new files to upload
7:32:29 PM: 0 new functions to upload
7:32:31 PM: Starting post processing
7:32:31 PM: Post processing - HTML
7:32:31 PM: Post processing - header rules
7:32:31 PM: Post processing - redirect rules
7:32:31 PM: Post processing done
7:32:31 PM: Site is live :sparkles:
7:32:52 PM: Finished processing build request in 1m20.931974835s

The better the post - the faster the answer.

You don’t seem to have a publish directory setup. https://docs.netlify.com/configure-builds/get-started/

I tried with β€˜public’ and it didn’t work either

You don’t have to enter random values. Build locally and check the folder which contains the generated index.html. For NextJS, I guess it’s dist or something. But check for your setup.

1 Like

I found solution:
I ended up here after a google search for β€œnetlify nextjs deploy page not found” (something like that) and in my case, it was actually pretty straightforward to set it up.

For those searching for a solution, I added netlify.toml to my project root with content;

[build]
    command = "npm run build && npm run export"
    publish = "out"

Then add the export script to package.json;

"scripts": {
    "export": "next export"
},

Build settings for the netlify project;
Build command: npm run build && npm run export
Publish directory: out

4 Likes

I had the problem and this worked perfectly! Thank you so much!

1 Like

Thanks for letting us know, @huss-a ! Glad this worked for you :netliconfetti:

1 Like

I followed the same article as OP and had the same site not found issue. Looking through my deployment logs I noticed a warning from the Essential Next.js plugin that target was not set in my next.config.js. Once I added a target and redeployed my site it worked fine.

My next.config.js:

const withPlugins = require('next-compose-plugins')
const withImages = require('next-images')
const withVideos = require('next-videos')

module.exports = withPlugins([withImages, withVideos], {
  target: 'serverless',
})

If you’re not using any other plugins then I guess it would just be this:

module.exports = {
  target: 'serverless'
}

Unless I missed this somewhere, perhaps the article could be updated to make it clearer?

1 Like

Hey there, @Jason_Dark :wave:

Thank you so much for sharing your steps here! This is what makes the Forums a great place :netliconfetti: I will share your feedback with the team.