Nextjs shows 404 on deployment

Support
, ,
1

Hi there,

I’ve spent hours trying to find a fix for a nextjs app which is showing 404 on deployment. Have provided as much detail as I can below. Let me know if there’s anything else that you need.

Many thanks in advance!

1. Netlify site name

https://main--clever-heliotrope-12b645.netlify.app/

2. Repo

3. Debugging steps taken so far

3a. Added the following fly.toml file in root folder of project

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

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

3.b. Tried the following build settings:

  • Build settings #1

    Build command: next build
Publish directory: fontend/.next

  • Build settings #2

    Build command: next build
Publish directory: frontend/.next/

  • Build settings #3

    Build command: next build && next export
Publish directory: out

  • Build settings #4

    Build command: next run build
Publish directory:  frontend/.next

3C. Tried the following posts too:

4. Build logs

10:36:24 PM: Netlify Build                                                 
10:36:24 PM: ────────────────────────────────────────────────────────────────
10:36:24 PM: ​
10:36:24 PM: ❯ Version
10:36:24 PM:   @netlify/build 29.31.1
10:36:24 PM: ​
10:36:24 PM: ❯ Flags
10:36:24 PM:   baseRelDir: true
10:36:24 PM:   buildId: 657b12d71b9e800008a68e78
10:36:24 PM:   deployId: 657b12d71b9e800008a68e7a
10:36:24 PM: ​
10:36:24 PM: ❯ Current directory
10:36:24 PM:   /opt/build/repo/frontend
10:36:24 PM: ​
10:36:24 PM: ❯ Config file
10:36:24 PM:   /opt/build/repo/frontend/netlify.toml
10:36:24 PM: ​
10:36:24 PM: ❯ Context
10:36:24 PM:   production
10:36:24 PM: ​
10:36:24 PM: build.command from netlify.toml                               
10:36:24 PM: ────────────────────────────────────────────────────────────────
10:36:24 PM: ​
10:36:24 PM: $ next build
10:36:24 PM: ⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
10:36:24 PM:    ▲ Next.js 14.0.1
10:36:24 PM:    Creating an optimized production build ...
10:36:29 PM:  ✓ Compiled successfully
10:36:29 PM:    Linting and checking validity of types ...
10:36:29 PM:  ⨯ ESLint: Failed to load config "next/babel" to extend from. Referenced from: /opt/build/repo/frontend/.eslintrc.json
10:36:29 PM:    Collecting page data ...
10:36:30 PM:    Generating static pages (0/6) ...
10:36:31 PM:    Generating static pages (1/6)
10:36:31 PM:    Generating static pages (2/6)
10:36:31 PM:    Generating static pages (4/6)
10:36:31 PM:  ✓ Generating static pages (6/6)
10:36:31 PM:    Finalizing page optimization ...
10:36:31 PM:    Collecting build traces ...
10:36:36 PM: Route (app)                              Size     First Load JS
10:36:36 PM: ┌ ○ /                                    17.2 kB         115 kB
10:36:36 PM: ├ ○ /_not-found                          875 B          86.2 kB
10:36:36 PM: ├ λ /contact-details/[id]                3.77 kB         102 kB
10:36:36 PM: ├ λ /edit-contact/[id]                   5.71 kB         104 kB
10:36:36 PM: └ ○ /new-contact                         5.21 kB          98 kB
10:36:36 PM: + First Load JS shared by all            85.4 kB
10:36:36 PM:   ├ chunks/472-c6e2ea27ffdab861.js       30 kB
10:36:36 PM:   ├ chunks/fd9d1056-ed9101b126eb98b1.js  53.3 kB
10:36:36 PM:   ├ chunks/main-app-9bee3fe511df066a.js  230 B
10:36:36 PM:   └ chunks/webpack-0d746ca5e5d1bf2b.js   1.84 kB
10:36:36 PM: ○  (Static)   prerendered as static HTML
10:36:36 PM: λ  (Dynamic)  server-rendered on demand using Node.js
10:36:36 PM: ​
10:36:36 PM: (build.command completed in 11.8s)
10:36:36 PM: ​
10:36:36 PM: (Netlify Build completed in 12.4s)
10:36:37 PM: Section completed: building
10:36:40 PM: Finished processing build request in 31.517s

5. Build settings screenshot

image
image992×826 47.1 KB

2

Hi @pytest3, welcome.

Took a look at your site and looks good. However I noticed you are using Next version 14.0.1
Note that Next.js 14 doesn’t work well at the moment. Try downgrading to Next version 13 to see if it works well after redeploying.

Thanks.

3

Hi @clarnx,

Thanks for the quick reply.

Have downgraded to various versions of next (13.4 and above since i’m using the app router) but still seeing a 404 on deployment.

Below is a build log from using Next 13.4.9

Build logs

10:22:49 AM: Netlify Build                                                 
10:22:49 AM: ────────────────────────────────────────────────────────────────
10:22:49 AM: ​
10:22:49 AM: ❯ Version
10:22:49 AM:   @netlify/build 29.31.1
10:22:49 AM: ​
10:22:49 AM: ❯ Flags
10:22:49 AM:   baseRelDir: true
10:22:49 AM:   buildId: 657bb8650480fa0008dbc04f
10:22:49 AM:   deployId: 657bb8650480fa0008dbc051
10:22:49 AM: ​
10:22:49 AM: ❯ Current directory
10:22:49 AM:   /opt/build/repo/frontend
10:22:49 AM: ​
10:22:49 AM: ❯ Config file
10:22:49 AM:   /opt/build/repo/frontend/netlify.toml
10:22:49 AM: ​
10:22:49 AM: ❯ Context
10:22:49 AM:   production
10:22:49 AM: ​
10:22:49 AM: build.command from netlify.toml                               
10:22:49 AM: ────────────────────────────────────────────────────────────────
10:22:49 AM: ​
10:22:49 AM: $ next build
10:22:50 AM: - warn No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
10:22:50 AM: - info Creating an optimized production build...
10:22:59 AM: - info Compiled successfully
10:22:59 AM: - info Linting and checking validity of types...
10:22:59 AM: - error ESLint: Failed to load config "next/babel" to extend from. Referenced from: /opt/build/repo/frontend/.eslintrc.json
10:22:59 AM: - info Collecting page data...
10:23:08 AM: - info Generating static pages (0/5)
10:23:08 AM: - info Generating static pages (1/5)
10:23:08 AM: - info Generating static pages (2/5)
10:23:08 AM: - info Generating static pages (3/5)
10:23:08 AM: - info Generating static pages (5/5)
10:23:09 AM: - info Finalizing page optimization...
10:23:09 AM: Route (app)                                Size     First Load JS
10:23:09 AM: ┌ ○ /                                      16.4 kB         105 kB
10:23:09 AM: ├ λ /contact-details/[id]                  3.72 kB        92.9 kB
10:23:09 AM: ├ λ /edit-contact/[id]                     5.62 kB        94.8 kB
10:23:09 AM: ├ ○ /favicon.ico                           0 B                0 B
10:23:09 AM: └ ○ /new-contact                           5.12 kB        89.2 kB
10:23:09 AM: + First Load JS shared by all              77.7 kB
10:23:09 AM:   ├ chunks/698-329d77d67fc67cf6.js         25.2 kB
10:23:09 AM:   ├ chunks/bce60fc1-23c46e098eff9f8a.js    50.6 kB
10:23:09 AM:   ├ chunks/main-app-15e590a145d2d380.js    211 B
10:23:09 AM:   └ chunks/webpack-0d746ca5e5d1bf2b.js     1.8 kB
10:23:09 AM: Route (pages)                              Size     First Load JS
10:23:09 AM: ─ ○ /404                                   181 B          75.6 kB
10:23:09 AM: + First Load JS shared by all              75.4 kB
10:23:09 AM:   ├ chunks/framework-8883d1e9be70c3da.js   45 kB
10:23:09 AM:   ├ chunks/main-d3e3e83b65635f7e.js        28.4 kB
10:23:09 AM:   ├ chunks/pages/_app-b75b9482ff6ea491.js  194 B
10:23:09 AM:   └ chunks/webpack-0d746ca5e5d1bf2b.js     1.8 kB
10:23:09 AM: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
10:23:09 AM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
10:23:09 AM: ​
10:23:09 AM: (build.command completed in 20.1s)
10:23:09 AM: ​
10:23:10 AM: (Netlify Build completed in 20.7s)
10:23:11 AM: Section completed: building
10:23:13 AM: Finished processing build request in 42.776s
4

Hi @pytest3, thanks for the reply.
I suggest you create a new minimal version of your application and then deploy to see if it works when you deploy.
Doing the above helps in the debugging process as it will enable you to know if there is a bug in your code preventing it from working.
Thanks.