Skip to content

How I set up a Next.js project structure

New Course Coming Soon:

Get Really Good at Git

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.

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!

Here is how can I help you: