Next.js Discord

Discord Forum

NextJS v14 - 2 routes with shared layout and shared pages between them. Parallel or Dynamic routing?

Answered
Basset Artésien Normand posted this in #help-forum
Open in Discord
Avatar
Basset Artésien NormandOP
Hi All.
In NextJS v14 using the App router.
I have sub routes, and 2 of them share a specific layout. What is the best folder structure to achieve this?
for example.
/movies|tv-series / watched | watchlist
parallel routes or dynamic routes, or is there a better solution.?
At the moment i was thinking to structure like this:
/[show]/[watch]
and then accessing the params inside the page.tsx
Or i could use parallel routes and conditionally render the pages for tv-series or movies.
Answered by Basset Artésien Normand
This feels like the best solution:
folder structure:
/[movies_series] / [watched_watchlist]
Then i can access both movies_series and watched_watchlist within the page like this:

export default function Page({
  params,
}: {
  params: { watched_watchlist: string; movies_series: string }
}) {
  return (
    <>
      <div>My Post: {params.watched_watchlist}</div>
      <div>My Post: {params.movies_series}</div>
    </>
  )
}
Image
View full answer

1 Reply

Avatar
Basset Artésien NormandOP
This feels like the best solution:
folder structure:
/[movies_series] / [watched_watchlist]
Then i can access both movies_series and watched_watchlist within the page like this:

export default function Page({
  params,
}: {
  params: { watched_watchlist: string; movies_series: string }
}) {
  return (
    <>
      <div>My Post: {params.watched_watchlist}</div>
      <div>My Post: {params.movies_series}</div>
    </>
  )
}
Image
Answer