File Structure and Routing
Answered
Savannah posted this in #help-forum
SavannahOP
Hi, I'm working on a small project to learn Next.js. I'm fetching data from a movie API and listing the movies. Users can click on a movie name to be directed to its detail page. My file structure is as follows:
app/
|-- discover/
| |-- newreleases/
| | |-- page.jsx
| |
| |-- trending/
| |-- page.jsx
|
|-- components/
| |-- [movieId].jsx
So the movies listed on both newreleases and trending pages will have the same ui and links should redirect to Movie Detail Page. But it doesnt seem to be working with the current file structure. Although organizing the files like above makes it work, it doesnt make sense since the movieid.jsx is a reusable component.
app/
| |-- discover/
| |-- newreleases/
| |-- [movieId]
| |-- page.jsx
| |-- trending/
| |-- [movieId]
| |-- page.jsx
Can you help me understand how to structure my files to achieve this functionality without sacrificing the reusability of the movieId.jsx component?
app/
|-- discover/
| |-- newreleases/
| | |-- page.jsx
| |
| |-- trending/
| |-- page.jsx
|
|-- components/
| |-- [movieId].jsx
So the movies listed on both newreleases and trending pages will have the same ui and links should redirect to Movie Detail Page. But it doesnt seem to be working with the current file structure. Although organizing the files like above makes it work, it doesnt make sense since the movieid.jsx is a reusable component.
app/
| |-- discover/
| |-- newreleases/
| |-- [movieId]
| |-- page.jsx
| |-- trending/
| |-- [movieId]
| |-- page.jsx
Can you help me understand how to structure my files to achieve this functionality without sacrificing the reusability of the movieId.jsx component?
Answered by Arinji
what you can do to help with reusability, is just make the [moveID] folder for newreleases and trending both
12 Replies
@Savannah how do you want the url's to look, elaborate on whats broken
SavannahOP
<Link key={movie.id} href={
{movie.original_title}
</Link>
<Link key={movie.id} href={
{movie.original_title}
</Link>
Above is the Link created for each movie on the New Releases and Trending. The routing works, so when I click the link it directs me to /discover/trending/89975 but the movieid.jsx that is in the component folder is not being rendered. instead not found element is being rendered
/discover/newreleases/${movie.id}}>{movie.original_title}
</Link>
<Link key={movie.id} href={
/discover/trending/${movie.id}}>{movie.original_title}
</Link>
Above is the Link created for each movie on the New Releases and Trending. The routing works, so when I click the link it directs me to /discover/trending/89975 but the movieid.jsx that is in the component folder is not being rendered. instead not found element is being rendered
oh
so you cant just render it as a page, without making the folder
what you can do to help with reusability, is just make the [moveID] folder for newreleases and trending both
Answer
SavannahOP
Ah so the file structure should be like above and inside the [movieId]/page.jsx files, i should render the MovieDetail.jsx
app/
| |-- discover/
| |-- newreleases/
| |-- [movieId]
| |-- page.jsx
| |-- trending/
| |-- [movieId]
| |-- page.jsx
|-- components/
| |-- MovieDetail.jsx
app/
| |-- discover/
| |-- newreleases/
| |-- [movieId]
| |-- page.jsx
| |-- trending/
| |-- [movieId]
| |-- page.jsx
|-- components/
| |-- MovieDetail.jsx
Yup
SavannahOP
Thanks a lot!
@Savannah Thanks a lot!
Np, mark a solution:)