Next.js provides a robust set of built-in features that are crucial for developing web applications using React. With Next.js, we get a predefined structure for our project files, making it easier to organize our codebase efficiently.
First and foremost, all visible pages are stored under the /pages
folder. Any API routes we create belong in the /pages/api
folder. Additionally, any publicly visible files should be placed in the /public
folder.
However, beyond this basic structure, the rest is up to us. To set up a clean Next.js project structure, I follow a few common practices.
-
Components Folder: I create a
/components
folder to store all the React components required by our pages. Usually, I include a/components/Common
folder and recreate the page structure within the components folder. For example, if I have pages like Home and Profile, I’d create/components/Home
and/components/Profile
. -
Lib Folder: Next, I create a
lib
folder to house all the utilities used by both the React components and API routes. This could include data fetching logic, library initialization, Prisma setup, database access, SWR fetchers, and even theeasy-peasy
store. In short, any code that can be reused throughout the project but doesn’t belong in a specific component. It is important to ensure that these utilities are easily importable. I achieve this by configuring thejsconfig.json
file as follows:
{
"compilerOptions": {
"baseUrl": "."
}
}
-
Prisma Folder: If I frequently use Prisma, I create a separate
/prisma
folder within the project structure. This folder is primarily used for storing the Prisma schema and migrations and, if needed, an SQLite database. -
Content Folder: In case the site requires content, whether it be in the form of markdown files or any other format, setting up a
/content
folder can be useful for easy access and organization. -
Middleware: Although rare, in scenarios where middleware is needed, I create a
/middleware
folder specifically for storing such code.
By adopting this project structure approach, you should be able to handle all the necessary components of a typical Next.js project successfully.