NextJS Guru

Next.js 15 Folder Structure and Routing – The no-nonsense tutorial

Written by

The Guru

in

For new users the folder structure and naming conventions can be a little bit confusing because the official docs doesn’t explain this in simple terms.

In this quick tutorial I’m going to explain to you in the simplest possible way how the folders are structured in Next.js 15 App Router so that you can start building apps quickly!

Pages are linked to folder names

Every page in Next.js is a folder with the file page.tsx in it.

For example while in the src folder you see this on a fresh project:

.
└── app
    ├── favicon.ico
    ├── fonts
    │   ├── GeistMonoVF.woff
    │   └── GeistVF.woff
    ├── globals.css
    ├── layout.tsx
    └── page.tsx <-- that's your homepage page

So the page.tsx here is resolved to your home page i.e. `/` url.

Now, if you want to add more urls and pages simply create a new folder inside the app folder with the url path you want to use. For example if you want to addd blog path, create a new blog folder and place the file page.tsx in it. The page.tsx file will serve content for this very url path:

mkdir blog
cp page.tsx blog/

.
└── app
    ├── blog
    │   └── page.tsx
    ├── favicon.ico
    ├── fonts
    │   ├── GeistMonoVF.woff
    │   └── GeistVF.woff
    ├── globals.css
    ├── layout.tsx
    └── page.tsx

Congratulations you’ve just created your first custom route in Next.js!

When you go to https://mysite.com/blog the content from folder blog and page component from file page.tsx will be served under this url.

Parameters in urls

A slightly more advanced use of this routing type is when you want to use dynamic parameters in your urls. For example you want to add a dynamic category id param to your blog entries similar to this:

/blog/cats

To do this create a new folder in the blog folder with square brackets and parameter name in it. This parameter name will be available in the page’s parameters props and you can access it in the page.tsx page component:

mkdir [category]
mv page.tsx \[category\]/

.
└── app
    ├── blog
    │   └── [category]
    │       └── page.tsx
    ├── favicon.ico
    ├── fonts
    │   ├── GeistMonoVF.woff
    │   └── GeistVF.woff
    ├── globals.css
    ├── layout.tsx
    └── page.tsx

Amazing, you’ve just added a dynamic paramet url to your Next.js routing!

Now when you edit the page component in page.tsx you can access this parameter as props:

export default async function Page({ params }) {

Just make sure to match the folder name with your prop name since the name of the folder becomes the prop name.

IMPORTANT!
Starting from Next.js 15 you must await the parameter to access its value:

async function Page({ params }) {

const { category } = await params

That’s it, you’ve just created a basic routing in your Next.js project that will allow you cover most of your routing needs.

Happy coding!

More posts