NextJS v14.1 app router, 2 routes with the same / very similar sub route / layout
Unanswered
Basset Artésien Normand posted this in #help-forum
Basset Artésien NormandOP
Hi All.
Any recommendations for the above?
I will have both
I originally started with a dynamic route for movies and series using [content] but I don't think this is going to work as
Is there a way to have a dynamic subroute or both of them? or a shared layout?
Any recommendations for the above?
I will have both
/movies and /series and both of them will have /watchlistand /watched as a subroute. I originally started with a dynamic route for movies and series using [content] but I don't think this is going to work as
[content] can only be movies or seriesand the data fetched depends on that.Is there a way to have a dynamic subroute or both of them? or a shared layout?
34 Replies
@Basset Artésien Normand Hi All.
Any recommendations for the above?
I will have both `/movies` and `/series` and both of them will have `/watchlist`and `/watched` as a subroute.
I originally started with a dynamic route for movies and series using [content] but I don't think this is going to work as `[content]` can only be `movies` or `series`and the data fetched depends on that.
Is there a way to have a dynamic subroute or both of them? or a shared layout?
I would do this
app/[content]/watchedapp/[content]/watchlistif (!["movies", "series"].includes(params.content)) notFound()Basset Artésien NormandOP
Hi @Ray thanks for responding. How about sharing the layout between watched and watchlist? As it will just be some tab navigation differentiating between these 2
Basically the only difference between them is one being movies one being series. So should be able to reuse he layout somehow
@Ray create the layout in `app/[content]/layout.tsx`
and render the
watched page and watchlist with the children props of app/[content]/layout.tsxBasset Artésien NormandOP
how can i solve fetching different data for content? i was thinking about this and why i went back to setting movies and series as fixed routes
because then i was doing like if series fetch series, if movies fetch movies etc
Basset Artésien NormandOP
its not with the fetching per se
but deciding what to fetch, felt like it would become somewhat messy as need to decide what to fetch based on the
content valuei don't get it
if you have issue with fetching different data, then you could make two route and reuse the component
@Ray if you have issue with fetching different data, then you could make two route and reuse the component
Basset Artésien NormandOP
this is what i was thinking to do
but then i wanted to share the layout between /series|movies/watched|watchlist
how can i share a layout between 2 different sub routes like that?
i dont want to have /movies and /series and then /watched and /watchlist within both of them. it will be duplicated if you see what i mean.
you have to create a layout component instead
Basset Artésien NormandOP
what is the best way to solve this do you think? i dont want to end up with something like
let data;
if (content = movies) data = fetchMovies
if (content = series) data = fetchSeries.
let data;
if (content = movies) data = fetchMovies
if (content = series) data = fetchSeries.
they should share the same type and you can identify it by a field
so you can fetch it like this
const data = await fetchData(type)Basset Artésien NormandOP
i thought that to begin with but didn't think it would work with tRPC as i have moviesRouter and seriesRouter. as they are 2 separate db tables
@Basset Artésien Normand i thought that to begin with but didn't think it would work with tRPC as i have moviesRouter and seriesRouter. as they are 2 separate db tables
create a layout component and reuse in different route then
Basset Artésien NormandOP
a shared layout?
Basset Artésien NormandOP
i think this leads back to the question i was asking to begin with and how to achieve it
@Basset Artésien Normand i think this leads back to the question i was asking to begin with and how to achieve it
1.
2. create a reusable component
app/[content]/layout.tsx2. create a reusable component
Basset Artésien NormandOP
ill give it a shot thanks
Basset Artésien NormandOP
This what you mean right?
page.tsx passes props to Movies|Series.tsx - they fetch the data. layout at the bottom is shared between them all
page.tsx passes props to Movies|Series.tsx - they fetch the data. layout at the bottom is shared between them all
@ReverseGem7 https://nextjs.org/docs/app/building-your-application/routing/route-groups
Basset Artésien NormandOP
Thanks for this @ReverseGem7 - I've checked this out but was not sure how to apply it in my case.
Basset Artésien NormandOP
with this it ends up like this. not sure if this looks good or not
@Basset Artésien Normand with this it ends up like this. not sure if this looks good or not
Basset Artésien NormandOP
Alternative to this is to fetch the data within that component.
@Ray Any help appreciated.