#File Structure and Routing

15 messages · Page 1 of 1 (latest)

limber hearth
#

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?

prime coveBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

limber hearth
#

File Structure and Routing

flat leaf
#

@limber hearth how do you want the url's to look, elaborate on whats broken

limber hearth
#

<Link key={movie.id} href={/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

flat leaf
#

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

#

and inside it make a page.tsx

#

and call the component from your components folder

#

@limber hearth

limber hearth
#

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

flat leaf
#

Yup

limber hearth
#

Thanks a lot!

flat leaf