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

Question

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 | watchlistparallel 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.tsxOr i could use parallel routes and conditionally render the pages for tv-series or movies.

Basset ArtÃ©sien Normand · Accepted Answer

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>
    </>
  )
}

My Post: {params.watched_watchlist}

My Post: {params.movies_series}

) }

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

1 Reply