Next.js Discord

Discord Forum

Can I define routes with variables at different points? /foo/:var/bar/:var2 ?

Unanswered
Brown bear posted this in #help-forum
Open in Discord
Avatar
Brown bearOP
I've been reading over the appDir routing documentation but I can't see anything to help me do this, I'd like to have a route like (variables preceded with :)

/board/:boardId/route/:routeId

What kind of folder structure could I use to achieve this? There'd be no page at /board/:boardId - only a page at the full URL which would need access to both variables

1 Reply

Avatar
Brown bearOP
I answered my own question with Dynamic Routes https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes

This let me define folders with [] wrapped around the name to represent the variables

So I made:

board
| -- [boardId]
| ---- route
| ------ [routeId]
| -------- page.tsx

and that looked like:

type BoardRouteParams = {
    boardId: string,
    routeId: string
}

export default function BoardRoute({ params }: {params: BoardRouteParams} ) {
  return (
    <main>
            Hi thar! Board = {params.boardId}, Route = {params.routeId}
        </Auth>
    </main>
  )
}