Deployment of NextJs website - page not found

Support
,
1

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 - benstaf/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: no-cache | Next.js
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.

2

You don’t seem to have a publish directory setup. Build configuration overview | Netlify Docs

3

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

4

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
5

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

5 Likes
6

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

1 Like
7

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

1 Like
8

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
9

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.

13

It worked seamlessly. :heart:

1 Like
14

But this is doing fully static export, so you will loose NextJs features such as Incremental Static Regeneration and image optimization.
Better option is to add the Netlify NextJs plugin to netlify.toml:

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

And this will handle proper redirects.

Btw I didn’t have to add it to package.json, only editing the netlify.toml was enough.

15

Hello everyone i have issue about NextJs , i deployed my site and it published but when i go my site it says β€œPAGE NOT FOUND” , how can i fix this issue ? I used NextJs CLI

my domain : https://www.jalalbmnf.com/

16

Hey @Jason_Dark,

Your site appears to work fine. Have you fixed it?