next-runtime icon indicating copy to clipboard operation
next-runtime copied to clipboard

Published 20 hours ago • verified publisher icon netlify

[Bug]: slugs not in `getStaticPaths` does not generate 404

Open Bjorn-Eric-Abr opened this issue 1 year ago • 3 comments

Summary

Hi!

We use Storyblok as our headless CMS and build statically to Netlify. All pages are rendered by a catch all page named [[...slug]].js.

When running locally with yarn dev or using the Netlify CLI (netlify dev) the paths not returned by getStaticsPaths results in a custom 404. As expected but...

When deploying to Netlify all pages gets rendered with [[...slug]].js resulting in pages without content since their slugs does not exist in Storyblok and we query by slug.

Can't share the original code since it's on a private GitLab but made minimal reproducible example using Create Next App and deployed to Netlify.

These URLs should work:

  • https://admirable-babka-75214e.netlify.app/
  • https://admirable-babka-75214e.netlify.app/main
  • https://admirable-babka-75214e.netlify.app/se/main

Any other Url should return the 404 page, e.g. https://admirable-babka-75214e.netlify.app/nonexisting

When looking at the deploy logs there is a few wildcard redirects that might the cause of this?

{
	from: '/*',
	to: '/.netlify/functions/___netlify-handler',
	status: 200,
	conditions: { Cookie: [Array] },
	force: true
},
// ...
{
	from: '/*',
	to: '/.netlify/builders/___netlify-odb-handler',
	status: 200,
	force: false
},
{
	from: '/*',
	to: '/.netlify/functions/___netlify-handler',
	status: 200
}

This makes me suspect that is has something to do with ISR (that we don't use since we haven't specified the revalidate param on getStaticPaths) - but I don't know how the handlers work or if they are even responsible.

Please let me know if I missed something or if I can do anything to make the issue more clear.

Steps to reproduce

  1. Clone repo
  2. Run yarn dev
  3. Visit http://localhost:3000/se/main to se working page
  4. Visit http://localhost:3000/nonexisting to se custom 404

Deploy to Netlify and visit corresponding slugs - not getting custom 404

A link to a reproduction repository

https://github.com/Bjorn-Eric-Abr/nextjs-custom-404

Plugin version

@netlify/[email protected] from Netlify app

More information about your build

  • [ ] I am building using the CLI
  • [ ] I am building using file-based configuration (netlify.toml)

What OS are you using?

Mac OS

Your netlify.toml file

No response

Your public/_redirects file

No response

Your next.config.js file

`next.config.js` 
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = nextConfig

Builds logs (or link to your logs)

Build logs 
5:08:28 PM: Build ready to start
5:08:29 PM: build-image version: d7b3dbfb0846505993c9a131894d1858074c90b4 (focal)
5:08:29 PM: build-image tag: v4.10.1
5:08:29 PM: buildbot version: fe6512288e75c8fa5aadaebb51ed1f96e9314fd4
5:08:30 PM: Fetching cached dependencies
5:08:30 PM: Starting to download cache of 839.9MB
5:08:37 PM: Finished downloading cache in 7.264366978s
5:08:37 PM: Starting to extract cache
5:08:41 PM: Finished extracting cache in 4.598553752s
5:08:42 PM: Finished fetching cache in 11.979983948s
5:08:42 PM: Starting to prepare the repo for build
5:08:43 PM: Preparing Git Reference refs/heads/development
5:08:45 PM: Parsing package.json dependencies
5:08:46 PM: Starting build script
5:08:46 PM: Installing dependencies
5:08:46 PM: Python version set to 2.7
5:08:46 PM: Started restoring cached node version
5:08:47 PM: Finished restoring cached node version
5:08:47 PM: v16.16.0 is already installed.
5:08:48 PM: Now using node v16.16.0 (npm v8.11.0)
5:08:48 PM: Started restoring cached build plugins
5:08:48 PM: Finished restoring cached build plugins
5:08:48 PM: Attempting ruby version 2.7.2, read from environment
5:08:48 PM: Using ruby version 2.7.2
5:08:49 PM: Using PHP version 8.0
5:08:49 PM: Started restoring cached yarn cache
5:08:51 PM: Finished restoring cached yarn cache
5:08:51 PM: No yarn workspaces detected
5:08:51 PM: Started restoring cached node modules
5:08:51 PM: Finished restoring cached node modules
5:08:51 PM: Installing NPM modules using Yarn version 1.22.10
5:08:52 PM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
5:08:52 PM: npm WARN config location in the cache, and they are managed by
5:08:52 PM: npm WARN config     [`cacache`](http://npm.im/cacache).
5:08:52 PM: yarn install v1.22.10
5:08:52 PM: [1/4] Resolving packages...
5:08:52 PM: success Already up-to-date.
5:08:52 PM: Done in 0.46s.
5:08:52 PM: NPM modules installed using Yarn
5:08:52 PM: Started restoring cached go cache
5:08:52 PM: Finished restoring cached go cache
5:08:52 PM: Installing Go version 1.17 (requested 1.17)
5:08:56 PM: unset GOOS;
5:08:56 PM: unset GOARCH;
5:08:56 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.17.linux.amd64';
5:08:56 PM: export PATH="/opt/buildhome/.gimme/versions/go1.17.linux.amd64/bin:${PATH}";
5:08:56 PM: go version >&2;
5:08:56 PM: export GIMME_ENV="/opt/buildhome/.gimme/env/go1.17.linux.amd64.env"
5:08:56 PM: go version go1.17 linux/amd64
5:08:56 PM: Installing missing commands
5:08:56 PM: Verify run directory
5:08:57 PM: ​
5:08:57 PM: ────────────────────────────────────────────────────────────────
5:08:57 PM:   Netlify Build                                                 
5:08:57 PM: ────────────────────────────────────────────────────────────────
5:08:57 PM: ​
5:08:57 PM: ❯ Version
5:08:57 PM:   @netlify/build 27.9.1
5:08:57 PM: ​
5:08:57 PM: ❯ Flags
5:08:57 PM:   baseRelDir: true
5:08:57 PM:   buildId: 62ebe0ec4315f52da16610be
5:08:57 PM:   deployId: 62ebe0ec4315f52da16610c0
5:08:57 PM:   systemLogFile: 0
5:08:57 PM: ​
5:08:57 PM: ❯ Current directory
5:08:57 PM:   /opt/build/repo
5:08:57 PM: ​
5:08:57 PM: ❯ Config file
5:08:57 PM:   No config file was defined: using default values.
5:08:57 PM: ​
5:08:57 PM: ❯ Context
5:08:57 PM:   production
5:08:58 PM: ​
5:08:58 PM: ❯ Loading plugins
5:08:58 PM:    - @netlify/[email protected] from Netlify app
5:08:59 PM: ​
5:08:59 PM: ────────────────────────────────────────────────────────────────
5:08:59 PM:   1. @netlify/plugin-nextjs (onPreBuild event)                  
5:08:59 PM: ────────────────────────────────────────────────────────────────
5:08:59 PM: ​
5:08:59 PM: Next.js cache restored.
5:08:59 PM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
5:08:59 PM: ​
5:08:59 PM: (@netlify/plugin-nextjs onPreBuild completed in 69ms)
5:08:59 PM: ​
5:08:59 PM: ────────────────────────────────────────────────────────────────
5:08:59 PM:   2. Build command from Netlify app                             
5:08:59 PM: ────────────────────────────────────────────────────────────────
5:08:59 PM: ​
5:08:59 PM: $ yarn build
5:08:59 PM: yarn run v1.22.10
5:08:59 PM: $ next build
5:08:59 PM: info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
5:08:59 PM: info  - Linting and checking validity of types...
5:09:01 PM: info  - Creating an optimized production build...
5:09:03 PM: info  - Compiled successfully
5:09:03 PM: info  - Collecting page data...
5:09:03 PM: info  - Generating static pages (0/5)
5:09:03 PM: params:: { slug: [ 'main' ] }
5:09:03 PM: params:: { slug: [ 'se', 'main' ] }
5:09:03 PM: info  - Generating static pages (1/5)
5:09:03 PM: info  - Generating static pages (2/5)
5:09:03 PM: params:: {}
5:09:03 PM: info  - Generating static pages (3/5)
5:09:03 PM: info  - Generating static pages (5/5)
5:09:04 PM: info  - Finalizing page optimization...
5:09:04 PM: Page                                       Size     First Load JS
5:09:04 PM: ┌   /_app                                  0 B            77.8 kB
5:09:04 PM: ├ ● /[[...slug]]                           658 B          78.5 kB
5:09:04 PM: ├   ├ /
5:09:04 PM: ├   ├ /main
5:09:04 PM: ├   └ /se/main
5:09:04 PM: ├ ○ /404                                   5.41 kB        83.2 kB
5:09:04 PM: └ λ /api/hello                             0 B            77.8 kB
5:09:04 PM: + First Load JS shared by all              77.8 kB
5:09:04 PM:   ├ chunks/framework-f99e4e38d5204d9a.js   45.7 kB
5:09:04 PM:   ├ chunks/main-e0ddca6ca271803b.js        30.9 kB
5:09:04 PM:   ├ chunks/pages/_app-0e6b46beaaa55ac1.js  498 B
5:09:04 PM:   ├ chunks/webpack-7ee66019f7f6d30f.js     755 B
5:09:04 PM:   └ css/ab44ce7add5c3d11.css               247 B
5:09:04 PM: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
5:09:04 PM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
5:09:04 PM: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
5:09:04 PM: Done in 5.02s.
5:09:04 PM: ​
5:09:04 PM: (build.command completed in 5.1s)
5:09:04 PM: ​
5:09:04 PM: ────────────────────────────────────────────────────────────────
5:09:04 PM:   3. @netlify/plugin-nextjs (onBuild event)                     
5:09:04 PM: ────────────────────────────────────────────────────────────────
5:09:04 PM: ​
5:09:04 PM: Patching /opt/build/repo/node_modules/next/dist/server/base-server.js
5:09:04 PM: Done
5:09:04 PM: Patching /opt/build/repo/node_modules/next/dist/server/next-server.js
5:09:04 PM: File was not changed
5:09:04 PM: Moving static page files to serve from CDN...
5:09:04 PM: Moved 6 files
5:09:04 PM: Using Netlify Edge Functions for image format detection. Set env var "NEXT_DISABLE_EDGE_IMAGES=true" to disable.
5:09:04 PM: Netlify configuration property "redirects" value changed to [
5:09:04 PM:   { from: '/_next/static/*', to: '/static/:splat', status: 200 },
5:09:04 PM:   {
5:09:04 PM:     from: '/_next/image*',
5:09:04 PM:     query: { url: ':url', w: ':width', q: ':quality' },
5:09:04 PM:     to: '/_ipx/w_:width,q_:quality/:url',
5:09:04 PM:     status: 301
5:09:04 PM:   },
5:09:04 PM:   { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 },
5:09:04 PM:   { from: '/cache/*', to: '/404.html', status: 404, force: true },
5:09:04 PM:   { from: '/server/*', to: '/404.html', status: 404, force: true },
5:09:04 PM:   { from: '/serverless/*', to: '/404.html', status: 404, force: true },
5:09:04 PM:   { from: '/trace', to: '/404.html', status: 404, force: true },
5:09:04 PM:   { from: '/traces', to: '/404.html', status: 404, force: true },
5:09:04 PM:   {
5:09:04 PM:     from: '/routes-manifest.json',
5:09:04 PM:     to: '/404.html',
5:09:04 PM:     status: 404,
5:09:04 PM:     force: true
5:09:04 PM:   },
5:09:04 PM:   {
5:09:04 PM:     from: '/build-manifest.json',
5:09:04 PM:     to: '/404.html',
5:09:04 PM:     status: 404,
5:09:04 PM:     force: true
5:09:04 PM:   },
5:09:04 PM:   {
5:09:04 PM:     from: '/prerender-manifest.json',
5:09:04 PM:     to: '/404.html',
5:09:04 PM:     status: 404,
5:09:04 PM:     force: true
5:09:04 PM:   },
5:09:04 PM:   {
5:09:04 PM:     from: '/react-loadable-manifest.json',
5:09:04 PM:     to: '/404.html',
5:09:04 PM:     status: 404,
5:09:04 PM:     force: true
5:09:04 PM:   },
5:09:04 PM:   { from: '/BUILD_ID', to: '/404.html', status: 404, force: true },
5:09:04 PM:   {
5:09:04 PM:     from: '/api',
5:09:04 PM:     to: '/.netlify/functions/___netlify-handler',
5:09:04 PM:     status: 200
5:09:04 PM:   },
5:09:04 PM:   {
5:09:04 PM:     from: '/api/*',
5:09:04 PM:     to: '/.netlify/functions/___netlify-handler',
5:09:04 PM:     status: 200
5:09:04 PM:   },
5:09:04 PM:   {
5:09:04 PM:     from: '/favicon.ico',
5:09:04 PM:     to: '/favicon.ico',
5:09:04 PM:     conditions: { Cookie: [Array] },
5:09:04 PM:     status: 200
5:09:04 PM:   },
5:09:04 PM:   {
5:09:04 PM:     from: '/vercel.svg',
5:09:04 PM:     to: '/vercel.svg',
5:09:04 PM:     conditions: { Cookie: [Array] },
5:09:04 PM:     status: 200
5:09:04 PM:   },
5:09:04 PM:   {
5:09:04 PM:     from: '/*',
5:09:04 PM:     to: '/.netlify/functions/___netlify-handler',
5:09:04 PM:     status: 200,
5:09:04 PM:     conditions: { Cookie: [Array] },
5:09:04 PM:     force: true
5:09:04 PM:   },
5:09:04 PM:   {
5:09:04 PM:     from: '/_next/data/MuvP0GQqY8F8IqL8V7tCp/404.json',
5:09:04 PM:     to: '/.netlify/functions/___netlify-handler',
5:09:04 PM:     status: 200,
5:09:04 PM:     force: false
5:09:04 PM:   },
5:09:04 PM:   {
5:09:04 PM:     from: '/404',
5:09:04 PM:     to: '/.netlify/functions/___netlify-handler',
5:09:04 PM:     status: 200,
5:09:04 PM:     force: false
5:09:04 PM:   },
5:09:04 PM:   {
5:09:04 PM:     from: '/_next/data/MuvP0GQqY8F8IqL8V7tCp/index.json',
5:09:04 PM:     to: '/.netlify/builders/___netlify-odb-handler',
5:09:04 PM:     status: 200,
5:09:04 PM:     force: false
5:09:04 PM:   },
5:09:04 PM:   {
5:09:04 PM:     from: '/_next/data/MuvP0GQqY8F8IqL8V7tCp/*',
5:09:04 PM:     to: '/.netlify/builders/___netlify-odb-handler',
5:09:04 PM:     status: 200,
5:09:04 PM:     force: false
5:09:04 PM:   },
5:09:04 PM:   {
5:09:04 PM:     from: '/',
5:09:04 PM:     to: '/.netlify/builders/___netlify-odb-handler',
5:09:04 PM:     status: 200,
5:09:04 PM:     force: false
5:09:04 PM:   },
5:09:04 PM:   {
5:09:04 PM:     from: '/*',
5:09:04 PM:     to: '/.netlify/builders/___netlify-odb-handler',
5:09:04 PM:     status: 200,
5:09:04 PM:     force: false
5:09:04 PM:   },
5:09:04 PM:   {
5:09:04 PM:     from: '/*',
5:09:04 PM:     to: '/.netlify/functions/___netlify-handler',
5:09:04 PM:     status: 200
5:09:04 PM:   }
5:09:04 PM: ].
5:09:04 PM: ​
5:09:04 PM: (@netlify/plugin-nextjs onBuild completed in 54ms)
5:09:04 PM: ​
5:09:04 PM: ────────────────────────────────────────────────────────────────
5:09:04 PM:   4. Functions bundling                                         
5:09:04 PM: ────────────────────────────────────────────────────────────────
5:09:04 PM: ​
5:09:04 PM: Packaging Functions from .netlify/functions-internal directory:
5:09:04 PM:  - ___netlify-handler/___netlify-handler.js
5:09:04 PM:  - ___netlify-odb-handler/___netlify-odb-handler.js
5:09:04 PM:  - _ipx/_ipx.js
5:09:04 PM: ​
5:09:11 PM: ​
5:09:11 PM: (Functions bundling completed in 7.2s)
5:09:11 PM: ​
5:09:11 PM: ────────────────────────────────────────────────────────────────
5:09:11 PM:   5. Edge Functions bundling                                    
5:09:11 PM: ────────────────────────────────────────────────────────────────
5:09:11 PM: ​
5:09:11 PM: Packaging Edge Functions from .netlify/edge-functions directory:
5:09:11 PM:  - ipx
5:09:13 PM: ​
5:09:13 PM: (Edge Functions bundling completed in 1.7s)
5:09:13 PM: ​
5:09:13 PM: ────────────────────────────────────────────────────────────────
5:09:13 PM:   6. @netlify/plugin-nextjs (onPostBuild event)                 
5:09:13 PM: ────────────────────────────────────────────────────────────────
5:09:13 PM: ​
5:09:13 PM: Next.js cache saved.
5:09:13 PM: Creating deploy upload records
5:09:13 PM: ​
5:09:13 PM: (@netlify/plugin-nextjs onPostBuild completed in 52ms)
5:09:13 PM: ​
5:09:13 PM: ────────────────────────────────────────────────────────────────
5:09:13 PM:   7. Deploy site                                                
5:09:13 PM: ────────────────────────────────────────────────────────────────
5:09:13 PM: ​
5:09:13 PM: Starting to deploy site from '.next'
5:09:13 PM: Creating deploy tree 
5:09:13 PM: 19 new files to upload
5:09:13 PM: 2 new functions to upload
5:09:22 PM: Site deploy was successfully initiated
5:09:22 PM: ​
5:09:22 PM: (Deploy site completed in 8.8s)
5:09:22 PM: ​
5:09:22 PM: ────────────────────────────────────────────────────────────────
5:09:22 PM:   Netlify Build Complete                                        
5:09:22 PM: Starting post processing
5:09:22 PM: ────────────────────────────────────────────────────────────────
5:09:22 PM: ​
5:09:22 PM: (Netlify Build completed in 24.4s)
5:09:22 PM: Caching artifacts
5:09:22 PM: Started saving node modules
5:09:22 PM: Post processing - HTML
5:09:22 PM: Finished saving node modules
5:09:22 PM: Started saving build plugins
5:09:22 PM: Finished saving build plugins
5:09:22 PM: Started saving yarn cache
5:09:23 PM: Post processing - header rules
5:09:23 PM: Post processing - redirect rules
5:09:23 PM: Post processing done
5:09:25 PM: Finished saving yarn cache
5:09:25 PM: Started saving pip cache
5:09:25 PM: Finished saving pip cache
5:09:25 PM: Started saving emacs cask dependencies
5:09:25 PM: Finished saving emacs cask dependencies
5:09:25 PM: Started saving maven dependencies
5:09:25 PM: Finished saving maven dependencies
5:09:25 PM: Started saving boot dependencies
5:09:25 PM: Finished saving boot dependencies
5:09:25 PM: Started saving rust rustup cache
5:09:25 PM: Finished saving rust rustup cache
5:09:25 PM: Started saving go dependencies
5:09:25 PM: Finished saving go dependencies
5:09:25 PM: Build script success
5:09:26 PM: Site is live ✨
5:09:27 PM: Uploading Cache of size 839.9MB
5:09:33 PM: Finished processing build request in 1m3.41385556s

Function logs

Function logs 
# Paste logs here

.next JSON files

generated .next JSON files 
# Paste file contents here. Please check there isn't any private info in them
# You can either build locally, or download the deploy from Netlify by clicking the arrow next to the deploy time.

Bjorn-Eric-Abr avatar Aug 04 '22 15:08 Bjorn-Eric-Abr

Ahoy there, I have just migrated a create-react-app to Next.js and am using a catch-all [[...app]].js route for now to render the SPA and I"m getting the same issue described here.

jonsherrard avatar Aug 04 '22 17:08 jonsherrard

Could be related to #1179 A work around until this is fixed is to manually check the client slug against your CMS slugs in get static probs and return a notFound: true for any that don't match.

JohnGemstone avatar Aug 05 '22 07:08 JohnGemstone

Could be related to #1179 A work around until this is fixed is to manually check the client slug against your CMS slugs in get static probs and return a notFound: true for any that don't match.

I was thinking something along those lines but doing a manual redirect - this is better! Thanks 😃

Bjorn-Eric-Abr avatar Aug 05 '22 08:08 Bjorn-Eric-Abr

Thanks for filing this issue and providing a reproduction! I have tested this morning and the repro now works as expected following the fix in #1179.

orinokai avatar Sep 29 '22 10:09 orinokai