With the introduction of React Server Components, it's easier than ever to create full-stack applications using Next.js. The new model utilizes Server Components with Server Actions instead of traditional REST APIs. This technical shift requires a folder structure that helps work with, audit, and maintain the code.
Following is a graphical representation of such a folder structure:
my-next-project/
├── app/
│ ├── page.tsx
│ ├── globals.css
│ └── layout.tsx
├── components/
│ ├── home/
│ └── layout/
├── contexts/
│ ├── Auth.tsx
├── lib/
│ ├── utils.ts
├── public/
│ ├── favicon/
│ └── og-image.png
├── server/
│ ├── actions/
│ │ ├── product.ts
│ ├── config/
│ ├── data/
│ │ ├── product.ts
│ └── lib/
├── .gitignore
├── next.config.js
└── package.json
The ‘app’ directory
The app directory contains the pages and global files such as layout.tsx and global.css.
The ‘components’ directory
The components directory contains a list of directories typically named after the pages. Each directory contains the components for the corresponding page. For example, the home directory contains the components of the homepage, and the layout directory contains the components used throughout the app.
The ‘contexts’ directory
The contexts directory contains contexts, e.g., Auth.tsx, created using the React Context API.
The ‘lib’ directory
The lib directory contains modules such as utils.ts, which exports utility functions.
The ‘public’ directory
The public directory contains static assets such as images.
The ‘server’ directory
The server directory contains several directories with modules that run on the server. For example:
The actions directory contains modules that export functions as server actions, and the config directory contains server configuration modules, such as database configurations.
The data directory contains modules that export functions to fetch data. Typically, each module in the data directory is named after the modules in the actions directory. For example, the product.ts module in the actions directory contains functions that create, edit, and delete a product. On the other hand, the product.ts module in the data directory contains functions that fetch product information.
The lib directory, similar to the client lib directory, contains modules such as utils.ts, which exports utility functions used on the server.
That's it! This is a bare-bones folder structure that you can use to create a full-stack application using the Next.js App Router. This folder structure ensures a clear separation of client and server code, which improves developer experience, maintainability, and auditability.