I am having an issue with NextJs app dir dynamic routes

Question

I am attempting to generate a static path using NextJs v14. The dynamic route generates a 404 error but a similar non-dynamic route is displaying a page.

Dynamic route called with localhost:3000/product/categoryProduct/a

code path: app/(common)/product/categoryProduct[id]

export default function Page({ params }: { params: { slug: string } }) {
return <h1>My Page</h1>;

}

non Dynamic called with localhost:3000/product/categoryProduct

Path: app/(common)/product/categoryProduct

export default function Page({ params }: { params: { id: number } }) {
return <div>My Post: {params.id}</div>;

}

I am not sure where the issue is with this very basic case.

Answer 1

The issue is the directory structure the variable part identifier needs to be a nested directory, not part of the main directory name.

Correct directory structure: app/(common)/product/categoryProduct/[id]/page.tsx

Incorrect directory structure: app/(common)/product/categoryProduct[id]/page.tsx