To structure the application correctly and to keep the readibility high we need to have some structure rules in place in order to understand and quickly navigate through the code of the application.
1. Pages in the application.
Pages in the application are corresponding to url on the website, meaning that if your https://example.com/dashboard is corresponding to a page in the application.
All pages within this project are under src/app folder and are named: page.tsx ![[Pasted image 20240705095421.png]]
Positive:
- easy to create a new page in the application Negative:
- difficult to find the page based on the filename.
Scenario:
You want to create a page called: https://example.com/pages/new-view
- You go to the src/app folder
- Create a new folder called pages
- Within pages you create a new folder: new-view
- within the my-page folder you create page.tsx
This page will now be visible in you application under https://example.com/pages/new-view
To improve the readability of and finding of these pages we name the components of the pages.
- PagesNewViewPage
2. Layouts
Every Page in nextJS has options to add additional elements to the page.
The folder
- pages
- layout.tsx
- new-new
- page.tsx
- layout.tsx
The layout is there to help developers build a layout around the page. To share common functionalities among the different pages in the folder. This makes it easy to create and structure the layouts in the application for certain topics.
To make the layout distinguish we name all the layout with a Layout behind it to make it work.
- PagesLayout
- NewViewLayout
Whenever you see a commonly shared layout in the application try find the is a layout.tsx which provides the common view of the application.
Exception: In some cases where we have different layouts in the some root folder. We can use a distinquisher for layouts and 'structure them' under they layout folder. Without creating an additional /something to the url
In the example below you can find a way to create different layouts without adding a additional path to the url:
(app), (auth), (landing) are three different layouts. when using the ( ) you can create a new layout in the folder without adding additional path to the url.
[image]
3. Forms
Within the application there are multiple forms. We decide to move all the forms into folder structure called: components/forms
Here can find all the form in the application. Structure based on the common category that they used at. We do this to improve the readability and understand of the creation of forms within the structure of the application.
Recommend way of creating forms:
Find the category where you want to add in a new form.
- create new name of the form which describes the form, end the filename with form + the component name for Form to indicate that its a form.
- import the form in the page where you want to form to be displayed.
4. Dialogs (Modals)
We have several dialogs, also known as modals, in the application which are shared among different pages. To make it more readable and understandable we moved all the dialogs into a dialog folder within the components.
5. Component Specific.
Component we distinguish in two different categories:
- common ui components that are shared used in different components and pages directly without.
- category specific components that are being used for a sole purpose, for instance project item. These components can be shared among stages but not having a highly overlapping category such a button, accordion or dropdown.