Skip to content

How I set up a Next.js project structure

Next.js is great to give our React apps a big set of built-in features that are essential in Web applications.

It gives us just a little bit of structure for our project files.

All visible pages stay under the /pages folder. API routes stay under the /pages/api folder. Publicly visible files under /public.

That’s basically all. The rest is all on us.

What I commonly do is this.

All the React components required by pages are in a /components folder.

I usually have a /components/Common folder, and then I re-create the pages structure:

… and so on.

Then I have a lib folder that contains all the utilities used by the React components or the API routes. It might be data fetching, a library initialization, the Prisma setup, database access, a fetcher for SWR, the easy-peasy store.. basically anything that could be reused anywhere but it’s not a component.

I also make sure that I can include them like this:

import comp from components/Common/comp
import x from lib/x

using this little setup in jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

I mentioned Prisma, which I use frequently. That’d need its own /prisma folder for the schema and the migrations, and maybe an SQLite database if needed.

If the site has content, in form of markdown for example, I’ll add a /content folder.

For middleware (sometimes it’s useful), /middleware but it’s quite rare.

This will work fine for almost all the things you’ll need.


→ Get my Next.js (pages router) Handbook

→ I wrote 17 books to help you become a better developer:

  • C Handbook
  • Command Line Handbook
  • CSS Handbook
  • Express Handbook
  • Git Cheat Sheet
  • Go Handbook
  • HTML Handbook
  • JS Handbook
  • Laravel Handbook
  • Next.js Handbook
  • Node.js Handbook
  • PHP Handbook
  • Python Handbook
  • React Handbook
  • SQL Handbook
  • Svelte Handbook
  • Swift Handbook
...download them all now!

Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list