Next.js Discord

Discord Forum

Should each piece of a nested route have it's own directory?

Unanswered
Dogo Argentino posted this in #help-forum
Open in Discord
Dogo ArgentinoOP
Hey there. Let's say I have an /account route. I want /account/signup and /account/login. Should they each have their own directory/folder with page.tsx?

3 Replies

Greater Shearwater
Yeah, Next.js defines the routes using the file system. So folders are how you define a route segment and the page.tsx or the route.ts file inside that folder is what make the route actually get created. So if you want to have a route you need to have a folder.

https://nextjs.org/docs/app/getting-started/project-structure#nested-routes

Also it's pretty common to have the folder structure you have mentioned. /account/signup will be rendering the signup form and /account/login will be rendering a login form.

If you don't want the /account page to render anything you can omit the page.tsx file for it. So it won't be created as a route.
@Dogo Argentino Thanks for confirming that. Removing the page.tsx of the account route shows a 404 page with my root layout. Is this by design and do you think I should redirect if someone tries to navigate to /account?
Greater Shearwater
Yeah, for any non existing route Next.js will show a default not found page. You can create your own by adding either a global-not-found.tsx or a not-found.tsx for any route.
https://nextjs.org/docs/app/api-reference/file-conventions/not-found

Or you can redirect the user if you like.