I add a dynamic route as following images illustrates

The page.tsx in [endpoint] folder is

type Props = {
  params: Promise<{ endpoint: string}>
}

const page = async ({params}: Props) => {
  const {endpoint} = await params;
  return (
    <div>{endpoint}</div>
  )
}

export default page;

The page.tsx in [entry] folder is

export default async function Page({
  params
}: {
  params: Promise<{ endpoint: string; entry: string }>
}) {
  const {endpoint, entry} = await params;
  return <h1>{endpoint}{entry}</h1>
}

Then I test the following route

http://localhost:3000/aaa, the page renders as expected.

However, the page always shows 404 when I test http://localhost:3000/aaa/bbb

Does anyone can give me a hand to address this issue?

I add a dynamic route as following images illustrates

The page.tsx in [endpoint] folder is

type Props = {
  params: Promise<{ endpoint: string}>
}

const page = async ({params}: Props) => {
  const {endpoint} = await params;
  return (
    <div>{endpoint}</div>
  )
}

export default page;

The page.tsx in [entry] folder is

export default async function Page({
  params
}: {
  params: Promise<{ endpoint: string; entry: string }>
}) {
  const {endpoint, entry} = await params;
  return <h1>{endpoint}{entry}</h1>
}

Then I test the following route

http://localhost:3000/aaa, the page renders as expected.

However, the page always shows 404 when I test http://localhost:3000/aaa/bbb

Does anyone can give me a hand to address this issue?

• next.js
• routes
• dynamic

2 Answers 2

You have one extra space before the dot in filename [endpoint]/[entry]/page .tsx

I finally addressed this issue by downgrading Next.js from 15 to 14. It seems Next.js 15 is not very robust.