App structure in Next.js

The app or project structure is relatively straightforward in Next.js. You have the choice between using a src folder or not when installing Next. I recommend that you do use src folder as seems to be industry standard for a lot of frameworks. Plus all my examples are around using the src folder.

Table Of Contents
  1. Setting up the basics
  2. Next.js and routing
  3. Creating pages in the root level
  4. Nesting pages
  5. Page groups

Setting up the basics

When you first set up you will notice that you have only an app folder in the src folder. The app folder is where all you pages and layout depended files go. Inside the src folder create a folder called components where you will put all your shared components and a folder called lib where you will put all your javascript functions. Create a folder called api in the src/app folder were all your api functions with go.

Your setup should look like below:

Initial setup
► .next // files use by next and you shouldn't have to mess around in here
► node_modules // all 3rd party depencancies go here
► public // all your publically available assets go in here, like images etc
▼ src 
   ▼ app // your pages will go here
     ► api // all your api functions will go in here 
     ★ favicon.ico 
     # global.css // your main style sheet
     ☣ layout.tsx // your app layout goes in here, like a template
     ☣ page.tsx // your app's root page
   ► components // your shared components go here
   ► lib // javascript lib and functions go here
...

Next.js and routing

In Next.js the app folder and it structure is what makes up your routes. It works on a folder tree structure layout, meaning every folder is a url route.

Creating pages in the root level

By default you have a root page src/app/page.tsx which will show when call yourdomain.com/ in your browser.

To add new pages you create a folder and inside the folder you have to create a page.tsx file that contains your logic.

To add a new page called mynewpage (yourdomain.com/mynewpage) create a new folder in the app folder called mynewpage and then create a page called page.tsx

JavaScript
...
▼ src 
   ▼ app
     ► api 
     ▼ mynewpage // yourdomain.com/mynewpage/
        page.tsx // your logic file
     ★ favicon.ico 
     # global.css
     ☣ layout.tsx
     ☣ page.tsx
   ► components
   ► lib
...

Nesting pages

Next.js app router allows you to easily create nested routes using folders.

You can go as many levels deep as you want. folder1/folder2/folder3/…

Nested pages
...
▼ src 
   ▼ app
     ► api 
     ► mynewpage
     ▼ folder1 // yourdomain.com/folder1/
       ▼ folder2 // yourdomain.com/folder1/folder2/
         page.tsx // folder2's logic page
       page.tsx // folder1's logic page
     ★ favicon.ico 
     # global.css
     ☣ layout.tsx
     ☣ page.tsx
   ► components
   ► lib
...

Page groups

Page groups are folders that group sets of pages together without the folder being mapped the router. A usage example would be having an app where you have parts of your app but you don’t want to have an additional route prefixed to your page routes. Groups are also great for when you want to have different layouts, error pages not-found pages for different parts of the app.

Page groups
...
▼ src 
   ▼ app
     ► api 
     ► mynewpage
     ▼ (group1)
       ▼ folder1
         page.tsx
       layout.tsx // layout in blue theme
     ▼ (group2)
       ► folder2
         page.tsx
       layout.tsx // layout in red theme with differnt placements
     ★ favicon.ico 
     # global.css
     ☣ layout.tsx
     ☣ page.tsx
   ► components
   ► lib
...
Scroll to Top