Folder Structure

[astral hearth]

Hi @copper geyser. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To support URLs like /scenario/2 in the App Router, you need a dynamic route segment.

1. Create a scenario folder inside app.
2. Inside scenario, create a dynamic segment folder [id] (or [slug], name is up to you).
3. Inside that folder, add a page.tsx.

Your structure would become:

src/
  app/
    actions/
      scenario.ts
    api/
      inngest/
        route.ts
    scenario/
      [id]/
        page.tsx
    globals.css
    layout.tsx
    page.tsx

Then in src/app/scenario/[id]/page.tsx:

export default async function ScenarioPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  // use `id` to load the scenario, e.g. scenario 2
  return <div>Scenario {id}</div>
}

The [id] folder is a dynamic route segment, so /scenario/2 will map to this page and params.id will be "2". [Dynamic routes; Dynamic segment example]

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: