-
Notifications
You must be signed in to change notification settings - Fork 0
Directory Structure
The repo follows a fairly standard structure for a Next.js app.
components/
lib/
pages/
api/
public/
fonts/
imgs/
static/
styles/
globals.css
This is where all of the react components live. Components should have their own folders, e.g. components/Navbar/(NavbarItem.tsx, NavbarBadge.tsx., etc.). This was not enforced when the repo was started and should be refactored. Folders per component allows for grouping of subcomponents and allows for aliasing (naming things the same).
This contains any .ts utility files. Important ones are the Data Access Layer (DAL) files which separates data from the app. Any pure .ts file should be placed here, with the exception of API endpoints.
The Next.js page directory. Each file is a page on the website. Dynamic routes are placed in their own folder and denoted with square brackets, e.g. blogs/[id].tsx. This pattern follows the Next.js documentation almost word for word.
Instead of using express or axios or something similar, Next.js allows us to create routes with files. Any files placed in this folder will be considered an endpoint /api/FileName.
Public assets such as images and fonts are placed in their respective folders here.
Any static content files such as markdown documents should be placed here in their own directory
The only file that should be here is globals.css. This is a tailwind repo and thus most styling should be done using tailwind classes and custom classes in tailwind.config.js. Only place a selector here if you must.