Page Not Found error: 404

Support
1

Hello,

I am new to Next.js and have built my first app.

I am having trouble with a Page Not Found 404 error on my app. Which seems to have deployed successfully on Netlify.

Here is my site.

I have read the Page Not Found Support article, but i’m still not sure what to do.

when i run ‘npm run build’ i see the below in my terminal:

Route (app)                               Size     First Load JS
┌ ○ /                                     174 B          92.4 kB
├ ○ /_not-found                           871 B            88 kB
└ ○ /contact                              23.7 kB         179 kB
+ First Load JS shared by all             87.1 kB
  ├ chunks/23-eac51eda30e00367.js         31.5 kB
  ├ chunks/fd9d1056-beab91476679ab98.js   53.6 kB
  └ other shared chunks (total)           2 kB

Route (pages)                             Size     First Load JS
┌ ƒ /api/contact                          0 B            79.2 kB
├ ○ /locations (320 ms)                   256 B          79.5 kB
└ ○ /vacancies (314 ms)                   256 B          79.5 kB
+ First Load JS shared by all             79.2 kB
  ├ chunks/framework-40c94fe626e07d43.js  45.2 kB
  ├ chunks/main-c3688ea1ec338a95.js       32.1 kB
  └ other shared chunks (total)           1.97 kB

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

I can see that it can’t find the home page '/_not-found ’ and wondering if this is the issue. I am using Next.js 14.2.3

I have tried making a netlify.toml file with the below code but that is also not working

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

Here is a link to the github repo

Any help would be much appreciated.

2

@melech I don’t work with Next.js so cannot advise why it’s happening, or how to fix it from a Next.js perspective, but I can give you an understanding of what I see happening locally, which matches the deployed files on Netlify.

When I pull your repository and execute npm run build I see only:

image

It creates a .next/ folder that contains only:

image

Those files do exist on Netlify:

https://tubular-dragon-024938.netlify.app/package.json
https://tubular-dragon-024938.netlify.app/prerender-manifest.json
https://tubular-dragon-024938.netlify.app/routes-manifest.json

So you’re seeing Netlify’s default 404 page because there is both no index.html file deployed and seemingly nothing dynamic that would catch and handle that route request.

3

ok, thank you for that. I will try and investigate what’s going on.

4

@melech Whatever is occurring for you appears to also be the case for this user too:

They have the same files visible.

5

could the issue be my current build settings in Netlify?

build command: next build
publish directory: .next

in my package.json file my scripts are:

 "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "check-node-version": "node -v"
6

Unlikely.

I checked your build locally, using npm run build and it produces only those three files for me.

Try pulling your repository down into a new folder on your system, install the dependencies and run npm run build for yourself and check what you see.

7

Ok I solved the issue!

i have to run

npm install @netlify/plugin-nextjs

Then i entered the below in my .toml

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

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

I added the below to my next.config.js file

// next.config.js
module.exports = {
  reactStrictMode: true,
  // Any other Next.js configuration options
};

I made sure my package.json had the below:

"scripts": {
  "build": "next build"
}

then i pushed and deployed and it worked!

8

@melech Great work!

It’s all too “Next.js specific” for my tastes, especially as even with your changes the build doesn’t work for me locally :person_shrugging: