Next.js Discord

Discord Forum

Pages and Routes

Unanswered
Persian posted this in #help-forum
Open in Discord
PersianOP
I'm having a bit of trouble understanding the documentation for Pages with Next.js. Mostly because I think I've read something earlier but can't find that information again.

What I think I know right now:
I create pages under the Pages folder. In the pages directiry I create a folder, name the folder to a relevant name, and create a file in the folder named pages.jsx. Now is a route created.

These are the links I've been reading:
- https://nextjs.org/docs/app/building-your-application/routing/defining-routes

- https://nextjs.org/docs/app/building-your-application/routing

Also, I interpret the following section from the documentation to mean that all files in the different folders under Pages must contain a file named page.jsx. It can not be dashboard.jsx.

Good to know:
* A page is always the leaf of the route subtree.
* .js, .jsx, or .tsx file extensions can be used for Pages.
* A page.js file is required to make a route segment publicly accessible.
* Pages are Server Components by default but can be set to a Client Component.
* Pages can fetch data. View the Data Fetching section for more information.

This is what I want to accomplish:

I am building an application where people can set up their own diet and training programs. The website will have different UI and UX for users and trainers.

Trainers will be able to sign up and help set up diet and training programs for other users. This will result in the parties having different UI and UX.

My idea right now is to split the pages into Pages.

📁 Pages
Default pages for the homepage
- Landing page
- About page
- Blog
And so on
📁 UserPages
Dashboard.jsx
Mealplans.jsx
Mealplan.jsx
And so on..
📁 TrainerPages
Dashboard.jsx
Clients.jsx
and so on…

With my idea, I should be able to use layouts in the dashboard file in UserPages and TrainerPages.

I wish some help and clarification on my thoughts.

- is the structure I have written possible to do? Or do I need to name every file page.jsx.

- I would appreciate if someone can help me visualize the folder and file structure correctly so I may understand it better.

Thanks in advanced for all the help 🙏🏼

0 Replies