Custom error page Next.js

Support
, ,
1

Hi,
I have Next.js app deployed on Netlify which requires a custom error page. I followed this article to make it work but unfortunately even after adding a netlify.toml file and path configuration in next.config.js, it isn’t working. The deploy preview on netlify still shows the netlify error page instead of the application’s custom error page. However, locally everything works fine. I’m using the Essential Next.js plugin on netlify. I’ve attached my netlify.toml file.
What am I missing here?

[[redirects]]
  from = "/*"
  to = "/error"
  status = 404
2

Hey there, @pkater :wave:

Welcome to the Netlify Forums, and thanks for reaching out :netliconfetti:

Your first stop for debugging and redirects issues will be reading through this Support Guide. Have you read this and tried working through the outlined steps?

If those debugging steps still don’t work, can you respond with your netlify site and repo? thank you!

1 Like
3

the repo is private so i can’t share it. I followed the guide you provided and created a _redirects file with the required redirect. I also added the following in my toml file

[build]
command = "npm run build && cp _redirects dist/_redirects"
publish = "dist"

but it’s giving me an error that dist cannot be found. Can you tell me what I’m doing incorrectly here

The following is the logs:


3:31:31 AM: Build ready to start
3:31:33 AM: build-image version: 653805ca4a64301556e56dc4b321ef8fc20cbb7c
3:31:33 AM: build-image tag: v3.8.2
3:31:33 AM: buildbot version: c23e384cd0b8264a99a3e75a376ade1a2342a175
3:31:33 AM: Fetching cached dependencies
3:31:33 AM: Starting to download cache of 329.9MB
3:31:36 AM: Finished downloading cache in 2.965866957s
3:31:36 AM: Starting to extract cache
3:31:47 AM: Finished extracting cache in 11.304333115s
3:31:47 AM: Finished fetching cache in 14.348403077s
3:31:47 AM: Starting to prepare the repo for build
3:31:48 AM: Preparing Git Reference pull/49/head
3:31:50 AM: Parsing package.json dependencies
3:31:50 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'dist' versus 'out' in the Netlify UI
3:31:50 AM: Different build command detected, going to use the one specified in the Netlify configuration file: 'yarn build && cp _redirects dist/_redirects' versus 'yarn build' in the Netlify UI
3:31:50 AM: Starting build script
3:31:50 AM: Installing dependencies
3:31:50 AM: Python version set to 2.7
3:31:51 AM: Started restoring cached node version
3:31:54 AM: Finished restoring cached node version
3:31:54 AM: Attempting node version 'v14.17.0' from .nvmrc
3:31:54 AM: v14.17.0 is already installed.
3:31:55 AM: Now using node v14.17.0 (npm v6.14.13)
3:31:55 AM: Started restoring cached build plugins
3:31:55 AM: Finished restoring cached build plugins
3:31:55 AM: Attempting ruby version 2.7.1, read from environment
3:31:56 AM: Started restoring cached ruby version
3:31:56 AM: Finished restoring cached ruby version
3:31:58 AM: Using ruby version 2.7.1
3:31:58 AM: Using PHP version 5.6
3:31:58 AM: Started restoring cached yarn cache
3:32:02 AM: Finished restoring cached yarn cache
3:32:03 AM: No yarn workspaces detected
3:32:03 AM: Started restoring cached node modules
3:32:03 AM: Finished restoring cached node modules
3:32:04 AM: Installing NPM modules using Yarn version 1.22.10
3:32:04 AM: yarn install v1.22.10
3:32:04 AM: warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
3:32:04 AM: [1/5] Validating package.json...
3:32:04 AM: [2/5] Resolving packages...
3:32:05 AM: success Already up-to-date.
3:32:05 AM: $ husky install
3:32:05 AM: husky - Git hooks installed
3:32:05 AM: Done in 0.63s.
3:32:05 AM: NPM modules installed using Yarn
3:32:05 AM: Started restoring cached go cache
3:32:05 AM: Finished restoring cached go cache
3:32:05 AM: go version go1.14.4 linux/amd64
3:32:05 AM: go version go1.14.4 linux/amd64
3:32:05 AM: Installing missing commands
3:32:05 AM: Verify run directory
3:32:06 AM: ​
3:32:06 AM: ────────────────────────────────────────────────────────────────
3:32:06 AM:   Netlify Build                                                 
3:32:06 AM: ────────────────────────────────────────────────────────────────
3:32:06 AM: ​
3:32:06 AM: ❯ Version
3:32:06 AM:   @netlify/build 17.9.0
3:32:06 AM: ​
3:32:06 AM: ❯ Flags
3:32:06 AM:   deployId: 610b14f07e8ffd00082f7db6
3:32:06 AM: ​
3:32:06 AM: ❯ Current directory
3:32:06 AM:   /opt/build/repo
3:32:06 AM: ​
3:32:06 AM: ❯ Config file
3:32:06 AM:   /opt/build/repo/netlify.toml
3:32:06 AM: ​
3:32:06 AM: ❯ Context
3:32:06 AM:   deploy-preview
3:32:06 AM: ​
3:32:06 AM: ❯ Loading plugins
3:32:06 AM:    - @netlify/plugin-nextjs@3.8.0 from Netlify app
3:32:07 AM: ​
3:32:07 AM: ────────────────────────────────────────────────────────────────
3:32:07 AM:   1. onPreBuild command from @netlify/plugin-nextjs             
3:32:07 AM: ────────────────────────────────────────────────────────────────
3:32:07 AM: ​
3:32:07 AM: Using Next.js 10.2.3
3:32:07 AM: info  - Loaded env from /opt/build/repo/.env.production
3:32:07 AM: info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
3:32:08 AM: Next.js cache restored.
3:32:08 AM: ​
3:32:08 AM: (@netlify/plugin-nextjs onPreBuild completed in 1.1s)
3:32:08 AM: ​
3:32:08 AM: ────────────────────────────────────────────────────────────────
3:32:08 AM:   2. build.command from netlify.toml                            
3:32:08 AM: ────────────────────────────────────────────────────────────────
3:32:08 AM: ​
3:32:08 AM: $ yarn build && cp _redirects dist/_redirects
3:32:08 AM: yarn run v1.22.10
3:32:08 AM: $ next build
3:32:09 AM: info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
3:32:10 AM: info  - Checking validity of types...
3:32:24 AM: info  - Creating an optimized production build...
3:32:29 AM: (node:1633) [DEP_WEBPACK_CHUNK_HAS_ENTRY_MODULE] DeprecationWarning: Chunk.hasEntryModule: Use new ChunkGraph API
3:32:29 AM: (Use `node --trace-deprecation ...` to show where the warning was created)
3:32:30 AM: warn  - Compiled with warnings
3:32:30 AM: ./node_modules/next/dist/next-server/server/load-components.js
3:32:30 AM: Critical dependency: the request of a dependency is an expression
3:32:30 AM: ./node_modules/next/dist/next-server/server/load-components.js
3:32:30 AM: Critical dependency: the request of a dependency is an expression
3:32:30 AM: ./node_modules/next/dist/next-server/server/load-components.js
3:32:30 AM: Critical dependency: the request of a dependency is an expression
3:32:30 AM: ./node_modules/next/dist/next-server/server/require.js
3:32:30 AM: Critical dependency: the request of a dependency is an expression
3:32:30 AM: ./node_modules/next/dist/next-server/server/require.js
3:32:30 AM: Critical dependency: the request of a dependency is an expression
3:32:30 AM: ./node_modules/next/dist/next-server/server/require.js
3:32:30 AM: Critical dependency: the request of a dependency is an expression
3:32:30 AM: info  - Collecting page data...
3:32:32 AM: Warning: You have opted-out of Automatic Static Optimization due to `getInitialProps` in `pages/_app`. This does not opt-out pages with `getStaticProps`
3:32:32 AM: Read more: https://nextjs.org/docs/messages/opt-out-auto-static-optimization
3:32:32 AM: info  - Generating static pages (0/6)
3:32:34 AM: info  - Generating static pages (1/6)
3:32:34 AM: info  - Generating static pages (2/6)
3:32:35 AM: info  - Generating static pages (4/6)
3:32:35 AM: info  - Generating static pages (6/6)
3:32:35 AM: info  - Finalizing page optimization...
3:32:35 AM: Page                              Size     First Load JS
3:32:35 AM: ┌ ● /                             915 B           329 kB
3:32:35 AM: ├   /_app                         0 B             114 kB
3:32:35 AM: ├ λ /404                          855 B           329 kB
3:32:35 AM: ├ λ /api/hello                    0 B             114 kB
3:32:35 AM: ├ λ /home                         855 B           329 kB
3:32:35 AM: ├ λ /spaces                       870 B           329 kB
3:32:35 AM: ├ λ /spaces/[spaceId]             245 B           328 kB
3:32:35 AM: └ ● /type/[type]                  925 B           329 kB
3:32:35 AM:     ├ /type/retail
3:32:35 AM:     ├ /type/workspace
3:32:35 AM:     ├ /type/next
3:32:35 AM:     └ /type/long-term-spaces
3:32:35 AM: + First Load JS shared by all     114 kB
3:32:35 AM:   ├ chunks/framework.2191d1.js    42.4 kB
3:32:35 AM:   ├ chunks/main.0780dc.js         19.5 kB
3:32:35 AM:   ├ chunks/pages/_app.0c1749.js   51.4 kB
3:32:35 AM:   ├ chunks/webpack.277c75.js      1.04 kB
3:32:35 AM:   └ css/e5977709b55438a7d1f4.css  26.1 kB
3:32:35 AM: λ  (Lambda)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
3:32:35 AM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
3:32:35 AM: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
3:32:35 AM:    (ISR)     incremental static regeneration (uses revalidate in getStaticProps)
3:32:35 AM: Done in 26.72s.
3:32:35 AM: cp: cannot create regular file 'dist/_redirects': No such file or directory
3:32:35 AM: ​
3:32:35 AM: ────────────────────────────────────────────────────────────────
3:32:35 AM:   "build.command" failed                                        
3:32:35 AM: ────────────────────────────────────────────────────────────────
3:32:35 AM: ​
3:32:35 AM:   Error message
3:32:35 AM:   Command failed with exit code 1: yarn build && cp _redirects dist/_redirects
3:32:35 AM: ​
3:32:35 AM:   Error location
3:32:35 AM:   In build.command from netlify.toml:
3:32:35 AM:   yarn build && cp _redirects dist/_redirects
3:32:35 AM: ​
3:32:35 AM:   Resolved config
3:32:35 AM:   build:
3:32:35 AM:     command: yarn build && cp _redirects dist/_redirects
3:32:35 AM:     commandOrigin: config
3:32:35 AM:     environment:
3:32:35 AM:       - REVIEW_ID
3:32:35 AM:       - YARN_VERSION
3:32:35 AM:     publish: /opt/build/repo/dist
3:32:35 AM:     publishOrigin: config
3:32:35 AM:   plugins:
3:32:35 AM:     - inputs: {}
3:32:35 AM:       origin: ui
3:32:35 AM:       package: '@netlify/plugin-nextjs'
3:32:35 AM:   redirects:
3:32:36 AM:     - from: /*      path: /*      status: 404      to: /error    - from: /404      path: /404      status: 404      to: /error  redirectsOrigin: configCaching artifacts
3:32:36 AM: Started saving node modules
3:32:36 AM: Finished saving node modules
3:32:36 AM: Started saving build plugins
3:32:36 AM: Finished saving build plugins
3:32:36 AM: Started saving yarn cache
3:32:40 AM: Finished saving yarn cache
3:32:40 AM: Started saving pip cache
3:32:40 AM: Finished saving pip cache
3:32:40 AM: Started saving emacs cask dependencies
3:32:40 AM: Finished saving emacs cask dependencies
3:32:40 AM: Started saving maven dependencies
3:32:40 AM: Finished saving maven dependencies
3:32:40 AM: Started saving boot dependencies
3:32:40 AM: Finished saving boot dependencies
3:32:40 AM: Started saving rust rustup cache
3:32:40 AM: Finished saving rust rustup cache
3:32:40 AM: Started saving go dependencies
3:32:40 AM: Finished saving go dependencies
3:32:40 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
3:32:40 AM: Creating deploy upload records
3:32:40 AM: Failing build: Failed to build site
3:32:40 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2
3:32:40 AM: Finished processing build request in 1m7.49500108s
4

Hi @pkater

  1. Your netlify.toml has npm run build as the build command, however your log shows yarn build. Something is amiss there.

  2. When using Next.js (and this evident in the repo linked to the article you are following) your command should look like "build": "next build && next export" (this generates static files.)

  3. The default build directory for Next.js is out, not dist, so unless you have changed this in your next.config.js, then that is why dist isn’t found.

  4. Instead of using _redirects (again, as the repo linked to the article does) you can add the redirect rule to your netlify.toml negating the need for the cp _redirects dist/_redirects command.

Hope this helps.

1 Like