/

Setting Up a Next.js Project Structure: A Guide

Setting Up a Next.js Project Structure: A Guide

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.

  1. 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.
    tags: [“Next.js project structure”, “React components”, “components folder”]

  2. 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 the easy-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 the jsconfig.json file as follows:

1
2
3
4
5
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

tags: [“Next.js project structure”, “lib folder”, “code utilities”]

  1. 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.
    tags: [“Next.js project structure”, “Prisma folder”, “schema”, “migrations”]

  2. 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.
    tags: [“Next.js project structure”, “content folder”]

  3. Middleware: Although rare, in scenarios where middleware is needed, I create a /middleware folder specifically for storing such code.
    tags: [“Next.js project structure”, “middleware folder”]

By adopting this project structure approach, you should be able to handle all the necessary components of a typical Next.js project successfully.
tags: [“Next.js project structure”, “code organization”]