fix(dev-server): render 404 when dynamic ssg path doesn't exist (#12085)

Co-authored-by: JJ Kasper <[email protected]>
Co-authored-by: Joe Haddad <[email protected]>

packages/next/server/next-dev-server.ts

@@ -513,7 +513,11 @@ export default class DevServer extends Server {
     pathname: string,
     query: { [key: string]: string }
   ) {
-    await this.hotReloader!.ensurePage('/_error')
+    if (res.statusCode === 404 && (await this.hasPage('/404'))) {
+      await this.hotReloader!.ensurePage('/404')
+    } else {
+      await this.hotReloader!.ensurePage('/_error')
+    }
 
     const compilationErr = await this.getCompilationError(pathname)
     if (compilationErr) {

test/integration/ssg-dynamic-routes-404-page/pages/404.js

@@ -0,0 +1,2 @@
+const page = () => 'custom 404 page'
+export default page

test/integration/ssg-dynamic-routes-404-page/pages/post/[id].js

@@ -0,0 +1,6 @@
+export const getStaticPaths = async () => ({
+  paths: ['/post/1'],
+  fallback: false,
+})
+export const getStaticProps = async () => ({ props: {} })
+export default () => 'blog post'

test/integration/ssg-dynamic-routes-404-page/test/index.test.js

@@ -0,0 +1,86 @@
+/* eslint-env jest */
+/* global jasmine */
+import fs from 'fs-extra'
+import { join } from 'path'
+import {
+  killApp,
+  findPort,
+  launchApp,
+  nextStart,
+  nextBuild,
+  fetchViaHTTP,
+} from 'next-test-utils'
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 2
+
+const appDir = join(__dirname, '../')
+const nextConfig = join(appDir, 'next.config.js')
+
+let appPort
+let app
+
+const runTests = () => {
+  it('should respond to a not existing page with 404', async () => {
+    const res = await fetchViaHTTP(appPort, '/post/2')
+    expect(res.status).toBe(404)
+    expect(await res.text()).toContain('custom 404 page')
+  })
+}
+
+describe('Custom 404 Page for static site generation with dynamic routes', () => {
+  describe('server mode', () => {
+    afterAll(() => killApp(app))
+
+    it('should build successfully', async () => {
+      const { code } = await nextBuild(appDir, [], {
+        stderr: true,
+        stdout: true,
+      })
+
+      expect(code).toBe(0)
+
+      appPort = await findPort()
+
+      app = await nextStart(appDir, appPort)
+    })
+
+    runTests('server')
+  })
+
+  describe('serverless mode', () => {
+    afterAll(async () => {
+      await fs.remove(nextConfig)
+      await killApp(app)
+    })
+
+    it('should build successfully', async () => {
+      await fs.writeFile(
+        nextConfig,
+        `
+        module.exports = { target: 'experimental-serverless-trace' }
+      `
+      )
+      const { code } = await nextBuild(appDir, [], {
+        stderr: true,
+        stdout: true,
+      })
+
+      expect(code).toBe(0)
+
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
+    })
+
+    runTests('serverless')
+  })
+
+  describe('dev mode', () => {
+    beforeAll(async () => {
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(() => killApp(app))
+
+    runTests('dev')
+  })
+})