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.
@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:
It creates a .next/
folder that contains only:
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.
melech
May 17, 2024, 10:24am
3
ok, thank you for that. I will try and investigate what’s going on.
@melech Whatever is occurring for you appears to also be the case for this user too:
Hello. I tried to deploy my site on next.js - but I get 404 error.
Site URL: aniw.net
On my another site I pointed publish directory to .next
BUT here I can’t do that - it sets slash sign before the directory (Publish directory
/.next)
I can’t remove / before .next on the form, so I can’t point just .next folder
Also maybe it is connected with my domain records:
I created to records via guide:
CNAME www 3600 aniwnet.netlify.app.
A @ 3600 75.2.60.5
They have the same files visible.
melech
May 17, 2024, 12:24pm
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"
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.
melech
May 17, 2024, 12:43pm
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!
@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