This document outlines the file andfolder structure for the Urapolku Next.js 13 project. It includes directories for routing, layout, pages, loading UI, error UI, API endpoints, and more.
Everything placed inside the app within files/folders will be included in the URL structure. To ensure compliance with Next.js it is necessary to follow the naming conventions outlined in the documentation.
Regular Routes
We have regular routes, which are named like this: name, and they represent actual routes within NextJS.
Routing Groups
Routing groups are named using parentheses, like (name). These groups do not have a specific URL associated with them, but serve to organize related pages.
Dynamic Routes
Dynamic routes, are named using square brackets, like [name]. These routes accept parameters, which will be included as part of the URL structure. For instance, [company] could represent the name of a company within the URL.
Parallel Routes
Parallel routes are named like @name and will help in conditionally or simultaniously showing a page.
Files
Each Page.tsx file within a route is responsible for a specific page within that route.
Each Layout.tsx file is responsible for a specific layout within that route.
Each Error.tsx file is responsible for handling errors within that route.
Each Loading.tsx file is responsible for handling the loading UI within that route.
Components
Within each route, you can have components that are specific to that route. Only when a component is not commonly used and is not shared between pages, should a component be created within a route.
Say for example you have a Searchbar component that is part of the Core Components. But this searchbar is uniquely styled and works unique to the open-jobs page. Then that means that the open-jobs page can have a component inside of it called: _searchbar.
urapolku/
│
├── src/
| ├── app/
| | ├── Layout.tsx # Default layout for the site (where the footer/header/content goes etc.) These can also be nested inside of each route...
| | ├── (jobs)
| | | ├── open-jobs # https://urapolku.fi/open-jobs
| | | | ├── Loading.tsx
| | | | ├── Page.tsx
| | | | ├──_searchbar # The unique searchbar component for the open-jobs page with a underscore in front of it to keep it private and non-routable.
| | | | | |— searchbar.tsx
| | | | | |— searchbar.module.css
Here is how we’ve currently created routes according to the structure outlined above within our application:
We want to make sure that each unique component that is unique to a route has a underscore in front of the directory name to make it private, to make sure it can not be individually routed to
