I get the "Page not found" error after using Next.js Runtime - v5.1.2

Support
,
1

I am using “next”: “^14.2.3”, “react”: “^18.3.1”, but netlify did not auto apply the newer runtime and kept on using Next.js Runtime - v4.41.1.
The site was built and hosted perfectly fine, but I wanted to try out Next.js Runtime 15, so I updated netlify/plugin-nextjs to “^5.1.2”.
It was build and deployed without any error, and the build log says it was using Next.js Runtime - v5.1.2, but now it has a 404 error.

スクリーンショット
スクリーンショット1660×482 114 KB

スクリーンショット
スクリーンショット1126×1062 138 KB

Build Log

1:10:52 PM: Netlify Build                                                 
1:10:52 PM: ────────────────────────────────────────────────────────────────
1:10:52 PM: ​
1:10:52 PM: ❯ Version
1:10:52 PM:   @netlify/build 29.41.1
1:10:52 PM: ​
1:10:52 PM: ❯ Flags
1:10:52 PM:   baseRelDir: true
1:10:52 PM:   buildId: 66306f28923ea76bae245997
1:10:52 PM:   deployId: 66306f28923ea76bae245999
1:10:52 PM: ​
1:10:52 PM: ❯ Current directory
1:10:52 PM:   /opt/build/repo
1:10:52 PM: ​
1:10:52 PM: ❯ Config file
1:10:52 PM:   /opt/build/repo/netlify.toml
1:10:52 PM: ​
1:10:52 PM: ❯ Context
1:10:52 PM:   production
1:10:52 PM: ​
1:10:52 PM: ❯ Using Next.js Runtime - v5.1.2
1:10:54 PM: ​
1:10:54 PM: @netlify/plugin-nextjs (onPreBuild event)                     
1:10:54 PM: ────────────────────────────────────────────────────────────────
1:10:54 PM: ​
1:10:54 PM: No Next.js cache to restore
1:10:54 PM: ​
1:10:54 PM: (@netlify/plugin-nextjs onPreBuild completed in 14ms)
1:10:54 PM: ​
1:10:54 PM: build.command from netlify.toml                               
1:10:54 PM: ────────────────────────────────────────────────────────────────
1:10:54 PM: ​
1:10:54 PM: $ npx prisma generate && npm run build
1:10:54 PM: Prisma schema loaded from prisma/schema.prisma
1:10:55 PM: ✔ Generated Prisma Client (v5.5.2) to ./node_modules/@prisma/client in 162ms
1:10:55 PM: Start using Prisma Client in Node.js (See: https://pris.ly/d/client)
1:10:55 PM: ```
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
1:10:55 PM: or start using Prisma Client at the edge (See: https://pris.ly/d/accelerate)
1:10:55 PM: ```
import { PrismaClient } from '@prisma/client/edge'
const prisma = new PrismaClient()
1:10:55 PM: See other ways of importing Prisma Client: http://pris.ly/d/importing-client
1:10:55 PM: > fishingspotmap@0.1.0 build
1:10:55 PM: > next build && next-sitemap --config next-sitemap.config.js
1:10:56 PM:  ⚠ Disabling SWC Minifer will not be an option in the next major version. Please report any issues you may be experiencing to https://github.com/vercel/next.js/issues
1:10:56 PM: ⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
1:10:56 PM:   ▲ Next.js 14.2.3
1:10:56 PM:    Creating an optimized production build ...
1:10:59 PM:  ⚠ For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.
1:10:59 PM: Read more: https://nextjs.org/docs/messages/sharp-missing-in-production
1:11:12 PM:  ⚠ For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.
1:11:12 PM: Read more: https://nextjs.org/docs/messages/sharp-missing-in-production
1:11:23 PM:  ✓ Compiled successfully
1:11:23 PM:    Linting and checking validity of types ...
1:11:25 PM: ./app/components/(header)/header.tsx
1:11:25 PM: 93:6  Warning: React Hook useEffect has missing dependencies: 'onSessionHandler' and 'session'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 99:6  Warning: React Hook useEffect has a missing dependency: 'onSessionHandler'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: ./app/components/(leafletHome)/LeafletMapBase.tsx
1:11:25 PM: 21:5  Warning: React Hook useMemo has an unnecessary dependency: 'allPointDatas'. Either exclude it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: ./app/components/(leafletPointSetMap)/editDataClient.tsx
1:11:25 PM: 229:6  Warning: React Hook useEffect has missing dependencies: 'dataSetting?.allProvinceDatas' and 'paramsRegion'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 245:6  Warning: React Hook useEffect has missing dependencies: 'dataSetting?.allAreaDatas' and 'paramsProvince'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 267:6  Warning: React Hook useEffect has missing dependencies: 'dataSetting?.allLocationDatas' and 'paramsArea'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 276:6  Warning: React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 284:6  Warning: React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 291:6  Warning: React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 305:6  Warning: React Hook useEffect has missing dependencies: 'paramsProvince' and 'reset'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 319:6  Warning: React Hook useEffect has missing dependencies: 'paramsArea' and 'reset'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 330:6  Warning: React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 333:6  Warning: React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 336:6  Warning: React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 339:6  Warning: React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: ./app/components/(leafletPointSetMap)/leafletSetNewPoint.tsx
1:11:25 PM: 127:6  Warning: React Hook useEffect has a missing dependency: 'dataSetting?.allProvinceDatas'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 144:6  Warning: React Hook useEffect has a missing dependency: 'dataSetting?.allAreaDatas'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 162:6  Warning: React Hook useEffect has a missing dependency: 'dataSetting?.allLocationDatas'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 167:6  Warning: React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 175:6  Warning: React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 178:6  Warning: React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 186:6  Warning: React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 197:6  Warning: React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 208:6  Warning: React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 212:6  Warning: React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 215:6  Warning: React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: 218:6  Warning: React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
1:11:25 PM: info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
1:11:27 PM:    Collecting page data ...
1:11:29 PM:    Generating static pages (0/20) ...
1:11:31 PM:    Generating static pages (5/20)
1:11:37 PM: channelName :
1:11:37 PM:    Generating static pages (10/20)
1:11:37 PM:    Generating static pages (15/20)
1:11:47 PM:  ✓ Generating static pages (20/20)
1:11:47 PM:    Finalizing page optimization ...
1:11:47 PM:    Collecting build traces ...
1:11:48 PM: Route (app)                              Size     First Load JS
1:11:48 PM: ┌ ○ /                                    1.99 kB         109 kB
1:11:48 PM: ├ ○ /_not-found                          901 B          89.1 kB
1:11:48 PM: ├ ○ /about                               204 B           100 kB
1:11:48 PM: ├ ƒ /api/auth/[...nextauth]              0 B                0 B
1:11:48 PM: ├ ƒ /api/auth/session                    0 B                0 B
1:11:48 PM: ├ ƒ /api/register                        0 B                0 B
1:11:48 PM: ├ ƒ /api/setPoint                        0 B                0 B
1:11:48 PM: ├ ƒ /api/userInfo                        0 B                0 B
1:11:48 PM: ├ ○ /contact                             204 B           100 kB
1:11:48 PM: ├ ○ /error                               204 B           100 kB
1:11:48 PM: ├ ○ /mypage                              3.66 kB         109 kB
1:11:48 PM: ├ ○ /quit                                204 B           100 kB
1:11:48 PM: ├ ○ /register                            1.88 kB         117 kB
1:11:48 PM: ├ ○ /register/thankYou                   184 B          95.3 kB
1:11:48 PM: ├ ○ /setData/editPoint                   5.12 kB         182 kB
1:11:48 PM: ├ ○ /setData/editPoint/thankYou          502 B          88.7 kB
1:11:48 PM: ├ ○ /setData/setPoint                    4.79 kB         182 kB
1:11:48 PM: ├ ○ /setData/setPoint/thankYou           514 B          95.6 kB
1:11:48 PM: └ ○ /termsofservice                      184 B          95.3 kB
1:11:48 PM: + First Load JS shared by all            88.2 kB
1:11:48 PM:   ├ chunks/23-fc9f81bb61a6d9f7.js        31.7 kB
1:11:48 PM:   ├ chunks/fd9d1056-3254f1b96dd7f6e9.js  54 kB
1:11:48 PM:   └ other shared chunks (total)          2.58 kB
1:11:48 PM: ○  (Static)   prerendered as static content
1:11:48 PM: ƒ  (Dynamic)  server-rendered on demand
1:11:48 PM: ✨ [next-sitemap] Loading next-sitemap config: file:///opt/build/repo/next-sitemap.config.js
1:11:48 PM: ✅ [next-sitemap] Generation completed
1:11:48 PM: ┌───────────────┬────────┐
1:11:48 PM: │    (index)    │ Values │
1:11:48 PM: ├───────────────┼────────┤
1:11:48 PM: │ indexSitemaps │   1    │
1:11:48 PM: │   sitemaps    │   1    │
1:11:48 PM: └───────────────┴────────┘
1:11:48 PM: -----------------------------------------------------
1:11:48 PM:  SITEMAP INDICES
1:11:48 PM: -----------------------------------------------------
1:11:48 PM:    ○ https://fishingspotmap.netlify.app/sitemap.xml
1:11:48 PM: -----------------------------------------------------
1:11:48 PM:  SITEMAPS
1:11:48 PM: -----------------------------------------------------
1:11:48 PM:    ○ https://fishingspotmap.netlify.app/sitemap-0.xml
1:11:48 PM: ​
1:11:48 PM: (build.command completed in 54s)
1:11:48 PM: ​
1:11:48 PM: @netlify/plugin-nextjs (onBuild event)                        
1:11:48 PM: ────────────────────────────────────────────────────────────────
1:11:48 PM: ​
1:11:48 PM: Next.js cache saved
1:11:49 PM: ​
1:11:49 PM: (@netlify/plugin-nextjs onBuild completed in 844ms)
1:11:49 PM: ​
1:11:49 PM: Functions bundling                                            
1:11:49 PM: ────────────────────────────────────────────────────────────────
1:11:49 PM: ​
1:11:49 PM: Packaging Functions from .netlify/functions-internal directory:
1:11:49 PM:  - ___netlify-server-handler/___netlify-server-handler.mjs
1:11:49 PM: ​
1:11:50 PM: ​
1:11:50 PM: (Functions bundling completed in 1.5s)
1:11:50 PM: ​
1:11:50 PM: Edge Functions bundling                                       
1:11:50 PM: ────────────────────────────────────────────────────────────────
1:11:50 PM: ​
1:11:51 PM: ​
1:11:51 PM: (Edge Functions bundling completed in 784ms)
1:11:51 PM: ​
1:11:51 PM: @netlify/plugin-nextjs (onPostBuild event)                    
1:11:51 PM: ────────────────────────────────────────────────────────────────
1:11:51 PM: ​
1:11:51 PM: ​
1:11:51 PM: (@netlify/plugin-nextjs onPostBuild completed in 8ms)
1:11:51 PM: ​
1:11:51 PM: Uploading blobs to deploy store                               
1:11:51 PM: ────────────────────────────────────────────────────────────────
1:11:51 PM: ​
1:11:51 PM: Uploading 16 blobs to deploy store...
1:11:51 PM: Done uploading blobs to deploy store.
1:11:51 PM: ​
1:11:51 PM: (Uploading blobs completed in 288ms)
1:11:51 PM: ​
1:12:01 PM: (Netlify Build completed in 1m 9.1s)
1:12:24 PM: Section completed: building
1:12:28 PM: Finished processing build request in 2m0.693s

Deploy Log

1:11:51 PM: Deploy site                                                   
1:11:51 PM: ────────────────────────────────────────────────────────────────
1:11:51 PM: ​
1:11:51 PM: Starting to deploy site from '.next'
1:11:51 PM: Calculating files to upload
1:11:52 PM: 1 new files to upload
1:11:52 PM: 1 new functions to upload
1:11:59 PM: Section completed: deploying
1:12:01 PM: Finished waiting for live deploy in 2.196s
1:12:01 PM: Site deploy was successfully initiated
1:12:01 PM: ​
1:12:01 PM: (Deploy site completed in 9.8s)
1:12:01 PM: ​
1:12:01 PM: @netlify/plugin-nextjs (onSuccess event)                      
1:12:01 PM: ────────────────────────────────────────────────────────────────
1:12:01 PM: ​
1:12:01 PM: ​
1:12:01 PM: (@netlify/plugin-nextjs onSuccess completed in 149ms)
1:12:01 PM: ​
1:12:01 PM: @netlify/plugin-nextjs (onEnd event)                          
1:12:01 PM: ────────────────────────────────────────────────────────────────
1:12:01 PM: ​
1:12:01 PM: ​
1:12:01 PM: (@netlify/plugin-nextjs onEnd completed in 4ms)
2

Thanks for reaching out! Can you let us know if you made any other changes between the working and non-working deploys apart from updating the runtime & next versions?

It looks like the reason for the 404s is that there is no index.html file making its way to the publish directory, e.g: Netlify App, and I wouldn’t expect the runtime update to have an impact on that. Looking forward to hearing from you!

1 Like
3

Can you try to add the output line in your next.config.mjs file of your project:

const nextConfig = {
  output: 'export',
  images: { unoptimized: true },
}

And after change the publish directory in your build settings of netlify to out

1 Like
4

Sorry for my late reply.
I down graded “@netlify/plugin-nextjs”: “^5.2.0” to “@netlify/plugin-nextjs”: “^4.41.1”
=> It started using Next.js Runtime - v4.41.1 and shows the site.
I re-upgraded “@netlify/plugin-nextjs”: “^4.41.1” to “@netlify/plugin-nextjs”: “^5.2.0”
=> It started using Next.js Runtime - v5.20.0, doesn’t show any build nor deploy errors, but now it does not show the site with a 404 error.
The only difference I made is the version of @netlify/plugin-nextjs, so I guess it is related to the plugin, or the runtime.

スクリーンショット
スクリーンショット1650×514 134 KB

6

Thank you for your reply dietercasier.
I am currently using Next-auth, and when I enable “output: ‘export’,”, it shows the error so I didn’t use it.
Error: Page "/api/auth/[...nextauth]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.
It is strange, because it doesn’t mension about generateStaticParams() on the official document.
I guess NextAuth and output: ‘export’ cannot be used together.

7

I did some research, and I guess “output: ‘export’ makes the app to be completely SSG, so it doesn’t work with NextAuth.
I disabled NextAuth, and set the “output: ‘export’ in order to check wether the site deploys, and it still has the 404 error.
As a conclusion, I believe it is something around @netlify/plugin-nextjs or the runtime v5.

9

Hi @aki,

Thanks for following up.

I’m unable to reproduce an issue with Next.js 14 and the version 5 of the plugin. Here’s a repo of mine where I’m using Next.js 14.2.3 and the Netlify/Next.js runtime v5.2.1 (which is the latest version). However, I’m not getting a page not found when visiting the site.

Have you seen our Support Guide here:

It can help troubleshoot the issue with the Page not found if you could give it a read.

1 Like
10

Thank you for your support Melvin.
I did read the Support Guide, but maybe I should give it an another try.
I will going to be busy for this couple of days so please understand that it might take a while.

P.S. I have been using the netlify Support Forums, and I am surprised that there is always a quick reply, whether it’s from a Support Engineer or a User.
I really appreciate the great community you guys are building, keep up the good work!

1 Like
11

@aki we love to hear that! If you encounter more questions after taking a look at it further, feel free to let us know!