App crashes when using notFound() with dynamic routes

[surjithctly]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:30 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8103
    Binaries:
      Node: 18.12.0
      npm: 8.19.2
      Yarn: 1.22.18
      pnpm: 8.6.5
    Relevant Packages:
      next: 13.4.9-canary.2
      eslint-config-next: 13.0.6
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue or a replay of the bug

https://stackblitz.com/edit/stackblitz-starters-fxybus?file=app%2F(website)%2Fpage.js

To Reproduce

1. Create a dynamic route eg: [id] and add the following code:

import { notFound } from "next/navigation";

export default function Page({ params }) {
  const user = await someFunction();

  if (!user) {
    notFound();
  }

  return <div>Page</div>;
}

2. Now visit the slug with a 404 path.
3. Next latest canary throws application error.

Describe the Bug

When using notFound(); with dynamic routes, next.js throws application error.

Application error: a server-side exception has occurred (see the server logs for more information).
Digest: NEXT_NOT_FOUND

Visit /aboutxyz in the above stackblitz repo to simulate the error.

Expected Behavior

It should not throw error. Instead it should show default next.js 404 error page.

Which browser are you using? (if relevant)

Chrome latest

How are you deploying your application? (if relevant)

vercel

_NEXT-1532

[adrien1018]

The cause of this bug seems not to be dynamic routes, but instead layout under route groups. The error is not triggered if layout.tsx is moved from /app/(website) to /app.

Also, I can confirm this on Next.js versions from 13.3.1-canary.5 to 13.4.10. I highly suspect this is an unintended side-effect of #48286.
(In 13.4.10 the error becomes Error: Unsupported Server Component type: Null.)

[zougari47]

Having layout.tsx inside app/ fix this error for me.

[arekrgw]

Same thing applies when I try to implement internationalization.

Using https://github.com/vercel/next.js/tree/canary/examples/app-dir-i18n-routing and adding simple notFound() on homepage throws nasty Error: Unsupported Server Component type: Null

Next version: 13.4.10

Hope it gets fixed soon

[sntiagomoreno]

I was facing the same error using a [locale] directory for internationalization. Fixed it by creating a custom not-found.tsx inside the [locale] directory. In case it helps.

[alvarlagerlof]

I was facing the same error using a [locale] directory for internationalization. Fixed it by creating a custom not-found.tsx inside the [locale] directory. In case it helps.

I tried this as well but it did not work. Might be because of the route groups.

[smitbarmase]

+1 not-found not working for me in route groups

[zougari47]

+1 not-found not working for me in route groups

make sure you have layout.tsx in root of the app directory

[huozhi]

This should be fixed in v13.4.19 now

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.