Next.js App Router folder structure for full stack projects

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:

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.

For more precise and practical articles like this, check out my blog.