next.js: notFound() is not allowed to use in root layout shows during navigation

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.6.0: Wed Aug 10 14:25:27 PDT 2022; root:xnu-8020.141.5~2/RELEASE_X86_64
    Binaries:
      Node: 16.17.0
      npm: 9.7.1
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.9
      eslint-config-next: 13.4.9
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5
    Next.js Config:
      output: N/A

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

No response

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

x-ref: https://github.com/vercel/next.js/issues/53371#issuecomment-1663476074

codesandbox doesnt works atm

To Reproduce

update next js to latest build

Describe the Bug

After updating to version 13.4.12, links leading to pages with notFount() began to generate an error

notFound() is not allowed to use in root layout

Expected Behavior

Render correct 404 page w/o errors

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

No response

_NEXT-1485

About this issue

Original URL
State: closed
Created a year ago
Reactions: 7
Comments: 15 (4 by maintainers)

Commits related to this issue

Move metadata error under error boundaries (#53551) ### What & Why Using `notFound()` in `generateMetadata()` or in page will lead to unacught global not found error when you do navigation, this is ... — committed to vercel/next.js by huozhi a year ago

Most upvoted comments

I get the issue too. No need to click via a link, just with changing the url segment variable, like a client id for example. I have got something like that on my page.tsx:

if (err && err.status === 400) {
		return notFound();
}

I am getting: “Error: notFound() is not allowed to use in root layout”

I am not using custom notFound method, page whatever in my layout file …

JunkyDeLuxe on Aug 2, 2023

@mike667 if notFound is throwing from root layout, then it will still throw when root layout is combined with default 404 page, unless it have another safe root layout. This would be a case that users don’t want to see with custom not-found. It has a bug that could trigger it unexpectedly before and we have fixed in on latest nextjs. If you’re still having issue, filing a new issue with your reproduction, I’d love to take a look and help

huozhi on Aug 18, 2023

It happens only when you call notFound() from page.tsx that is not root and when you don’t have custom not-found.tsx file created. So I overcome that error by creating custom not-found.tsx file, but error message is misleading because I called notFound() from the leaf of the router tree structure.

JurajKavka on Aug 3, 2023

@TonsiTT i dont use notFound() in layout.tsx, thats the point

vanyapr on Aug 1, 2023

Hi @vanyapr, this is currently expected, but we should throw an error to make it clear.

codesandbox doesnt works atm

Can you elaborate on that?

balazsorban44 on Jul 31, 2023