My netlify nextjs site shows page 404 on deploy

debdevs · December 2, 2022, 1:02am

I’ve been trying for several hours to get my portfolio site to deploy. I keep getting page404 after trying solutions from multiple stackxchange forums and posts. I’ve configured the deploy settings, and the toml file as well. My site is also in a subdirectory.

For some reason, the site deploys, but I get a page404 error when I try to visit it.

Build log:

7:47:45 PM: build-image version: 4c0c1cadee6a31c9bb8d824514030009c4c05c6a (focal)
7:47:45 PM: build-image tag: v4.15.0
7:47:45 PM: buildbot version: 7f69cd6d63595b50ebbaee3c273db486f3eb0529
7:47:45 PM: Fetching cached dependencies
7:47:45 PM: Starting to download cache of 153.6MB
7:47:46 PM: Finished downloading cache in 789.564616ms
7:47:46 PM: Starting to extract cache
7:47:47 PM: Finished extracting cache in 1.145975661s
7:47:47 PM: Finished fetching cache in 1.982036984s
7:47:47 PM: Starting to prepare the repo for build
7:47:47 PM: Preparing Git Reference refs/heads/main
7:47:48 PM: Parsing package.json dependencies
7:47:49 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'debdevs-portfolio/.next' versus '.next' in the Netlify UI
7:47:49 PM: Section completed: initializing
7:47:49 PM: Starting build script
7:47:49 PM: Installing dependencies
7:47:49 PM: Python version set to 2.7
7:47:49 PM: Started restoring cached node version
7:47:50 PM: Finished restoring cached node version
7:47:50 PM: v16.18.1 is already installed.
7:47:50 PM: Now using node v16.18.1 (npm v8.19.2)
7:47:50 PM: Enabling node corepack
7:47:50 PM: Started restoring cached build plugins
7:47:50 PM: Finished restoring cached build plugins
7:47:51 PM: Attempting ruby version 2.7.2, read from environment
7:47:51 PM: Using ruby version 2.7.2
7:47:51 PM: Using PHP version 8.0
7:47:51 PM: No npm workspaces detected
7:47:51 PM: Started restoring cached node modules
7:47:51 PM: Finished restoring cached node modules
7:47:52 PM: Started restoring cached go cache
7:47:52 PM: Finished restoring cached go cache
7:47:53 PM: Installing Go version 1.19.3 (requested 1.19.x)
7:47:59 PM: unset GOOS;
7:47:59 PM: unset GOARCH;
7:47:59 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.19.3.linux.amd64';
7:47:59 PM: export PATH="/opt/buildhome/.gimme/versions/go1.19.3.linux.amd64/bin:${PATH}";
7:47:59 PM: go version >&2;
7:47:59 PM: export GIMME_ENV="/opt/buildhome/.gimme/env/go1.19.3.linux.amd64.env"
7:47:59 PM: go version go1.19.3 linux/amd64
7:47:59 PM: Detected 1 framework(s)
7:47:59 PM: "next" at version "12.3.1"
7:47:59 PM: Installing missing commands
7:47:59 PM: Verify run directory
7:48:00 PM: 
7:48:00 PM: ────────────────────────────────────────────────────────────────
7:48:00 PM:   Netlify Build                                                 
7:48:00 PM: ────────────────────────────────────────────────────────────────
7:48:00 PM: 
7:48:00 PM: ❯ Version
7:48:00 PM:   @netlify/build 28.4.4
7:48:00 PM: 
7:48:00 PM: ❯ Flags
7:48:00 PM:   baseRelDir: true
7:48:00 PM:   buildId: 63894b2f6cf30d0008536798
7:48:00 PM:   deployId: 63894b2f6cf30d000853679a
7:48:00 PM: 
7:48:00 PM: ❯ Current directory
7:48:00 PM:   /opt/build/repo/debdevs-portfolio
7:48:00 PM: 
7:48:00 PM: ❯ Config file
7:48:00 PM:   No config file was defined: using default values.
7:48:00 PM: 
7:48:00 PM: ❯ Context
7:48:00 PM:   production
7:48:00 PM: 
7:48:00 PM: ────────────────────────────────────────────────────────────────
7:48:00 PM:   1. Build command from Netlify app                             
7:48:00 PM: ────────────────────────────────────────────────────────────────
7:48:00 PM: 
7:48:00 PM: $ npm run build
7:48:01 PM: > debdevs-portfolio@0.1.0 build
7:48:01 PM: > next build
7:48:01 PM: warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
7:48:01 PM: info  - Linting and checking validity of types...
7:48:02 PM: error - ESLint: Failed to load config "next/babel" to extend from. Referenced from: /opt/build/repo/debdevs-portfolio/.eslintrc.json
7:48:02 PM: info  - Creating an optimized production build...
7:48:02 PM: info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
7:48:03 PM: info  - Using external babel configuration from /opt/build/repo/debdevs-portfolio/.babelrc
7:48:12 PM: info  - Compiled successfully
7:48:12 PM: info  - Collecting page data...
7:48:13 PM: (node:2072) [DEP0128] DeprecationWarning: Invalid 'main' field in '/opt/build/repo/debdevs-portfolio/node_modules/react-icons/package.json' of 'lib'. Please either fix that or report it to the module author
7:48:13 PM: (Use `node --trace-deprecation ...` to show where the warning was created)
7:48:13 PM: (node:2086) [DEP0128] DeprecationWarning: Invalid 'main' field in '/opt/build/repo/debdevs-portfolio/node_modules/react-icons/package.json' of 'lib'. Please either fix that or report it to the module author
7:48:13 PM: (Use `node --trace-deprecation ...` to show where the warning was created)
7:48:15 PM: info  - Generating static pages (0/10)
7:48:16 PM: (node:2107) [DEP0128] DeprecationWarning: Invalid 'main' field in '/opt/build/repo/debdevs-portfolio/node_modules/react-icons/package.json' of 'lib'. Please either fix that or report it to the module author
7:48:16 PM: (Use `node --trace-deprecation ...` to show where the warning was created)
7:48:16 PM: (node:2121) [DEP0128] DeprecationWarning: Invalid 'main' field in '/opt/build/repo/debdevs-portfolio/node_modules/react-icons/package.json' of 'lib'. Please either fix that or report it to the module author
7:48:16 PM: (Use `node --trace-deprecation ...` to show where the warning was created)
7:48:16 PM: info  - Generating static pages (2/10)
7:48:16 PM: info  - Generating static pages (4/10)
7:48:16 PM: info  - Generating static pages (7/10)
7:48:16 PM: info  - Generating static pages (10/10)
7:48:17 PM: info  - Finalizing page optimization...
7:48:17 PM: Route (pages)                              Size     First Load JS
7:48:17 PM: ┌ ○ / (786 ms)                             3.04 kB         133 kB
7:48:17 PM: ├   └ css/cbe981be547f6993.css             2.62 kB
7:48:17 PM: ├   /_app                                  0 B            77.3 kB
7:48:17 PM: Creating deploy upload records
7:48:17 PM: ├ ● /[id] (2220 ms)                        468 B           120 kB
7:48:17 PM: ├   ├ /1 (773 ms)
7:48:17 PM: ├   ├ /3 (739 ms)
7:48:17 PM: ├   └ /2 (708 ms)
7:48:17 PM: ├ ○ /404                                   2.64 kB          80 kB
7:48:17 PM: ├ ○ /about (696 ms)                        6.11 kB         127 kB
7:48:17 PM: ├   └ css/4e4f5db9d47715dd.css             3.76 kB
7:48:17 PM: ├ λ /api/hello                             0 B            77.3 kB
7:48:17 PM: ├ ● /index_export                          2.92 kB        80.3 kB
7:48:17 PM: ├ ○ /portfolio (637 ms)                    2.44 kB         132 kB
7:48:17 PM: ├   └ css/fc1f56e0d25c00f6.css             2.45 kB
7:48:17 PM: └ ○ /projects (803 ms)                     525 B           120 kB
7:48:17 PM: + First Load JS shared by all              78.3 kB
7:48:17 PM:   ├ chunks/framework-7751730b10fa0f74.js   45.5 kB
7:48:17 PM:   ├ chunks/main-f6f0a96741df63e0.js        29.5 kB
7:48:17 PM:   ├ chunks/pages/_app-d2c21ce9c640115a.js  568 B
7:48:17 PM:   ├ chunks/webpack-b167acb8041ca46d.js     1.72 kB
7:48:17 PM:   └ css/b1cd7057276e1b83.css               914 B
7:48:17 PM: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
7:48:17 PM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
7:48:17 PM: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
7:48:17 PM: 
7:48:17 PM: (build.command completed in 16.6s)
7:48:17 PM: 
7:48:17 PM: ────────────────────────────────────────────────────────────────
7:48:17 PM:   2. Deploy site                                                
7:48:17 PM: ────────────────────────────────────────────────────────────────
7:48:17 PM: 
7:48:17 PM: Starting to deploy site from 'debdevs-portfolio/.next'
7:48:17 PM: Creating deploy tree 
7:48:17 PM: 26 new files to upload
7:48:17 PM: 0 new functions to upload
7:48:18 PM: Section completed: deploying
7:48:18 PM: Site deploy was successfully initiated
7:48:18 PM: 
7:48:18 PM: (Deploy site completed in 1.1s)
7:48:18 PM: 
7:48:18 PM: ────────────────────────────────────────────────────────────────
7:48:18 PM:   Netlify Build Complete                                        
7:48:18 PM: ────────────────────────────────────────────────────────────────
7:48:18 PM: 
7:48:18 PM: (Netlify Build completed in 17.7s)
7:48:18 PM: Caching artifacts
7:48:18 PM: Started saving node modules
7:48:18 PM: Finished saving node modules
7:48:18 PM: Started saving build plugins
7:48:18 PM: Finished saving build plugins
7:48:18 PM: Started saving pip cache
7:48:18 PM: Finished saving pip cache
7:48:18 PM: Started saving emacs cask dependencies
7:48:19 PM: Starting post processing
7:48:18 PM: Finished saving emacs cask dependencies
7:48:18 PM: Started saving maven dependencies
7:48:18 PM: Finished saving maven dependencies
7:48:19 PM: Post processing - HTML
7:48:18 PM: Started saving boot dependencies
7:48:18 PM: Finished saving boot dependencies
7:48:18 PM: Started saving rust rustup cache
7:48:18 PM: Finished saving rust rustup cache
7:48:18 PM: Started saving go dependencies
7:48:18 PM: Finished saving go dependencies
7:48:18 PM: Build script success
7:48:18 PM: Section completed: building
7:48:19 PM: Uploading Cache of size 153.5MB
7:48:20 PM: Post processing - header rules
7:48:20 PM: Post processing - redirect rules
7:48:20 PM: Post processing done
7:48:20 PM: Section completed: cleanup
7:48:20 PM: Finished processing build request in 35.573430897s
7:48:20 PM: Section completed: postprocessing
7:48:23 PM: Site is live ✨

settings:

I’ve been trying a multitude of different solutions for hours. If anyone has any ideas on what the issue is or could point me in the right direction, I’ll take it.

clarnx · December 2, 2022, 11:54am

Hi @debdevs, thanks for the post and welcome.
Looks like your netlify.toml file is in the public folder.
Kindly move it to the root of the project and then set your build settings in the netlify.toml file to the code below.

[build]
  command = "next build"
  publish = ".next"

[[plugins]]
  package = "netlify-plugin-cypress"

Also note the build settings depending on the type of rendering you want to use.

For apps that use server-side rendering and Next.js Runtime:
- Build command: next build
- Publish directory: .next
For apps that use static HTML export:
- Build command: next build && next export
- Publish directory: out

Let me know the outcome after you try the suggested changes.

Thanks.

debdevs · December 3, 2022, 3:40am

Thanks! I got it to deploy but now i have this error where it looks like the css doesn’t load.

A snippet of the buildlog (the full log is too many characters to post):

10:26:32 PM: ├ ● /[id] (1368 ms)                        488 B           118 kB
10:26:32 PM: ├   ├ /3 (506 ms)
10:26:32 PM: ├   ├ /2 (460 ms)
10:26:32 PM: ├   └ /1 (402 ms)
10:26:32 PM: ├ ○ /404                                   194 B          77.8 kB
10:26:32 PM: ├ ○ /about (407 ms)                        6.06 kB         125 kB
10:26:32 PM: ├   └ css/654e4e680fa5bef7.css             3.6 kB
10:26:32 PM: ├ ● /index_export                          2.88 kB        80.5 kB
10:26:32 PM: ├ ○ /portfolio (471 ms)                    2.37 kB         130 kB
10:26:32 PM: ├   └ css/88ae65a30025f11d.css             2.3 kB
10:26:32 PM: └ ○ /projects (469 ms)                     534 B           118 kB
10:26:32 PM: + First Load JS shared by all              78.6 kB
10:26:32 PM:   ├ chunks/framework-4556c45dd113b893.js   45.2 kB
10:26:32 PM:   ├ chunks/main-5aae0466a51ee992.js        31 kB
10:26:32 PM:   ├ chunks/pages/_app-4159d3b1486e8564.js  522 B
10:26:32 PM:   ├ chunks/webpack-9b312e20a4e32339.js     836 B
10:26:32 PM:   └ css/d6d64742d1e634b0.css               1.04 kB
10:26:32 PM: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
10:26:32 PM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
10:26:32 PM: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
10:26:32 PM: 
10:26:32 PM: (build.command completed in 5.3s)
10:26:32 PM: 
10:26:32 PM: ────────────────────────────────────────────────────────────────
10:26:32 PM:   4. @netlify/plugin-nextjs (onBuild event)                     
10:26:32 PM: ────────────────────────────────────────────────────────────────
10:26:32 PM: 
10:26:32 PM: { functionsDir: '/opt/build/repo/.netlify/functions-internal' }
10:26:32 PM: Patching /opt/build/repo/node_modules/next/dist/server/base-server.js
10:26:32 PM: Done
10:26:32 PM: Patching /opt/build/repo/node_modules/next/dist/server/next-server.js
10:26:32 PM: Done
10:26:32 PM: Moving static page files to serve from CDN...
10:26:32 PM: Moved 12 files
10:26:32 PM: Using Netlify Edge Functions for image format detection. Set env var "NEXT_DISABLE_EDGE_IMAGES=true" to disable.
10:26:32 PM: Netlify configuration property "redirects" value changed to [
10:26:32 PM:   { from: '/_next/static/*', to: '/static/:splat', status: 200 },
10:26:32 PM:   {
10:26:32 PM:     from: '/_next/image*',
10:26:32 PM:     query: { url: ':url', w: ':width', q: ':quality' },
10:26:32 PM:     to: '/_ipx/w_:width,q_:quality/:url',
10:26:32 PM:     status: 301
10:26:32 PM:   },
10:26:32 PM:   { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 },
10:26:32 PM:   { from: '/cache/*', to: '/404.html', status: 404, force: true },
10:26:32 PM:   { from: '/server/*', to: '/404.html', status: 404, force: true },
10:26:32 PM:   { from: '/serverless/*', to: '/404.html', status: 404, force: true },
10:26:32 PM:   { from: '/trace', to: '/404.html', status: 404, force: true },
10:26:32 PM:   { from: '/traces', to: '/404.html', status: 404, force: true },
10:26:32 PM:   {
10:26:32 PM:     from: '/routes-manifest.json',
10:26:32 PM:     to: '/404.html',
10:26:32 PM:     status: 404,
10:26:32 PM:     force: true
10:26:32 PM:   },
10:26:32 PM:   {
10:26:32 PM:     from: '/build-manifest.json',
10:26:32 PM:     to: '/404.html',
10:26:32 PM:     status: 404,
10:26:32 PM:     force: true
10:26:32 PM:   },

clarnx · December 3, 2022, 8:05am

Hi @debdevs, thanks for the feedback.

If you are not using any serverless features, kindly try the build settings above in your netlify.toml file to see if it works.

Thanks.

debdevs · December 3, 2022, 9:44am

Thanks. I tried adding those lines, and got this error:

4:42:41 AM: info  - Copying "static build" directory
4:42:41 AM: info  - No "exportPathMap" found in "undefined". Generating map from "./pages"
4:42:41 AM: Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
4:42:41 AM:     - Use `next start` to run a server, which includes the Image Optimization API.
4:42:41 AM:     - Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.
4:42:42 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
4:42:41 AM:   Read more: https://nextjs.org/docs/messages/export-image-api
4:42:41 AM:     at /opt/build/repo/node_modules/next/dist/export/index.js:149:23
4:42:41 AM:     at async Span.traceAsyncFn (/opt/build/repo/node_modules/next/dist/trace/trace.js:79:20)
4:42:41 AM: 
4:42:41 AM: ────────────────────────────────────────────────────────────────
4:42:41 AM:   "build.command" failed                                        
4:42:41 AM: ────────────────────────────────────────────────────────────────
4:42:41 AM: 
4:42:41 AM:   Error message
4:42:41 AM:   Command failed with exit code 1: npm run build && npm run export (https://ntl.fyi/exit-code-1)
4:42:41 AM: 
4:42:41 AM:   Error location
4:42:41 AM:   In build.command from netlify.toml:
4:42:41 AM:   npm run build && npm run export
4:42:41 AM: 
4:42:41 AM:   Resolved config
4:42:41 AM:   build:
4:42:41 AM:     command: npm run build && npm run export
4:42:41 AM:     commandOrigin: config
4:42:41 AM:     environment:
4:42:41 AM:       - NEXT_PRIVATE_TARGET
4:42:41 AM:     publish: /opt/build/repo/out
4:42:41 AM:     publishOrigin: config
4:42:41 AM:   plugins:
4:42:41 AM:     - inputs: {}
4:42:41 AM:       origin: ui
4:42:41 AM:       package: '@netlify/plugin-nextjs'
4:42:41 AM:     - inputs: {}
4:42:41 AM:       origin: config
4:42:41 AM:       package: netlify-plugin-cypress
4:42:42 AM: Caching artifacts
4:42:42 AM: Started saving node modules
4:42:42 AM: Finished saving node modules
4:42:42 AM: Started saving build plugins
4:42:42 AM: Finished saving build plugins
4:42:42 AM: Started saving pip cache
4:42:42 AM: Finished saving pip cache
4:42:42 AM: Started saving emacs cask dependencies
4:42:42 AM: Finished saving emacs cask dependencies
4:42:42 AM: Started saving maven dependencies
4:42:42 AM: Finished saving maven dependencies
4:42:42 AM: Started saving boot dependencies
4:42:42 AM: Finished saving boot dependencies
4:42:42 AM: Started saving rust rustup cache
4:42:42 AM: Finished saving rust rustup cache
4:42:42 AM: Started saving go dependencies
4:42:42 AM: Finished saving go dependencies
4:42:42 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
4:42:42 AM: Failing build: Failed to build site
4:42:42 AM: Finished processing build request in 40.913568459s

clarnx · December 3, 2022, 11:02am

Hi @debdevs if possible can you share a repository of your site for me to help with debugging the issue.
Thanks.

debdevs · December 3, 2022, 11:12am

Hi, and thanks for digging into this. The link here is to the respository:

I had reverted it back to the settings that at least deployed but I think I’m breaking it. Currently I’m just trying to deploy my portfolio site and can’t figure out what’s going on.

I want to deploy more nextjs projects to netlify in the future but I can’t get my first nextjs site working.

clarnx · December 3, 2022, 11:51am

Hi @debdevs, thanks for sharing the repository.

Looks like the Cypress Netlify Plugin Is preventing your site from building as it performs some tests in the basic.cy.js file.
Once a test fails the deployment is also failed.

You can either remove the cypress plugin from your netlify.toml file or fix the test in the basic.cy.js file

Secondly since you are wrapping your homepage content in framer-motion in index.js file in the pages folder, looks like the variants option is setting the opacity to 0, hence the homepage looks blank on page load.
You can attest to the fact above when you open your Chrome Dev Tools and then highlight the homepage elements. The opacity of the main element is set to 0 (zero).

Kindly go through your code and make sure you are using the right setup or configuration for framer-motion

Let me know the outcome.

Thanks.

debdevs · December 3, 2022, 1:20pm

Thanks, I removed cypress and the framer motion code, but still can’t get css to apply. I managed to get the page to show, but no styling is applied, and I still get 404 errors in the console.

hrishikesh · December 4, 2022, 12:31pm

Have you tried installing the Next.js Runtime:

debdevs · December 4, 2022, 5:10pm

Thanks to some help from support, I have a solution. The toml file shouldn’t be in the public folder, and it looks like the redirects file was also a part of the problem. I removed the redirects file, and I placed the toml in root, and this is how my toml file looks:

[build]
  command = "next build"
  publish = ".next/"

[[redirects]]
  from = "/_next/static/*"
  to = "/static/:splat"
  status = 301
  force = true

hrishikesh · December 4, 2022, 5:16pm

By the way, that redirect rule is not required, the Next.js Runtime will configure the required rule automatically and by doing this yourself, you can potentially break some future changes.