Next.js App Router: error.tsx and not-found.tsx don’t receive params in nested routes

4 weeks ago 17
ARTICLE AD BOX

I’m using Next.js App Router with nested dynamic routes (e.g. app/[locale]/itineraries/).

In normal pages and layouts, params are available as expected.
However, inside error.tsx and not-found.tsx, params are either undefined or not passed at all.

Example structure:

app/ └── [locale]/ └── itineraries/ ├── page.tsx ├── error.tsx └── not-found.tsx

In not-found.tsx:

export default async function NotFound({ params, }: { params: { locale: string }; }) { const { locale } = params; // ❌ params is undefined }

This throws:

Cannot destructure property 'locale' of 'params' as it is undefined

Same issue happens in error.tsx, where only error and reset are available, but no route params.

What I’m trying to achieve

I need access to the dynamic route value (locale) inside error.tsx and not-found.tsx to:

load localized dictionaries

render localized UI

keep behavior consistent with page.tsx

Question

Is this expected behavior in Next.js App Router?

Why don’t error.tsx and not-found.tsx receive params in nested routes?

What’s the recommended pattern to access route params (like locale) in these files?

I’m looking for the canonical, framework-approved solution—not hacks.

Read Entire Article