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
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
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.
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:
Then i can access both
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](https://cdn.discordapp.com/attachments/1196779334720028772/1196795996722712616/image.png?ex=65b8ee21&is=65a67921&hm=f495835374a12d2b89c40790cf4a307c7bd93c66698e39c3f8207e5e6eed3669&)
1 Reply
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Basset Artésien NormandOP
This feels like the best solution:
folder structure:
Then i can access both
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](https://cdn.discordapp.com/attachments/1196779334720028772/1196795996722712616/image.png?ex=65b8ee21&is=65a67921&hm=f495835374a12d2b89c40790cf4a307c7bd93c66698e39c3f8207e5e6eed3669&)
Answer