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.

With the App Router, the default for new projects since Next.js 13.4, routes live under app/. A page is app/page.js, or a nested folder like app/dashboard/page.js. API endpoints are Route Handlers, app/api/.../route.js files that sit next to the pages. Publicly visible files go under /public.

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

When I wrote this post the Pages Router was the only option: visible pages under /pages, API routes under /pages/api, static files under /public. That still works in Next.js 16 for older apps, and I wrote about Next.js API routes back then, but a new project should start with app/.

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:

• /components/Common
• /components/Home
• /components/Profile

… 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 (see also absolute imports in Next.js):

{
  "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.

Want me to talk about your product? You can sponsor this site.