In this article, I will dive into the scalable folder structure in NextJS 15, and this approach is suitable for both pages and app routers.
The project structure is kind of similar in both pages and app routers. Let’s dive into why scalable folder structure.
Why is Scalable Structure Important?
Scalable folder structures are important because once your website is grown, you will need optimisation in your website. If you try to change the folder structure later, you might lose your database if you change the model or schema.
In the future, if your website scales, then you will need multiple dynamic routes. The multiple dynamic routes help layout design according to the requirements.
Dynamic Router Folder Struture in NextJS 15
Let's create dynamic routes for blog and password reset, and you could also visit Official Documentation.
Dynamic routes for blog and product
Here is how you can create dynamic routes. Create a product folder, then create page.js, and inside the product folder, now create the [slug] folder, then page.js inside the [slug] folder.
app
|
blog
|———index.js
|———[slug].js
Here is what the folder structure would be like.
Dynamic Routes for Password Reset
I prefer most of the auth pages inside the components folder and the (shop) folder, and here are the folder structures. Create a password reset folder inside the (shop) folder, then create [uid], then [slug], and create page.js inside the [slug] folder.
app
|
(shop)
|
passwordreset
|_______[uid]
|
[token]
|————page.js
It also depends on the URL structure, and in my case, this is how the URL looks like,
http://localhost:3000/resetpassword/'+uid+'/'+tokenDashboard Folder Structure in NextJs 15
Create a Dashboard folder inside the app directory or dashboard folder in the components folder. Now create buyer, seller, layout.js, page.js and dashboardlayout.js inside the dashboard folder.
app
|
dashboard
|
layout.js
|
dashboardlayout.js
|
page.js
|
buyer
|————-page.js
seller
|————-page.js
Here is what the structure would look like.
The dashboardlayout.js will work for both buyer and seller, and you need to hide the seller and buyer-specific menu.
Root Directory Folder Structure
1. Public Folder in the NextJS App router
There is no pre-existing public folder in the app router. Also, If you create the public folder inside the app directory, Images won’t work unless you create a public folder outside of the app directory, so the public folder must be on the root directory of the project,
I had added an image inside the app directory, but it didn’t work.
2. Middleware Folder in NextJS 15
Create a middleware.js folder in the root directory of the app router because it executes before rendering. Be sure not to create a middleware folder then middleware.js because it won’t work. And that’s how we used to do with the pages router.
import { NextResponse } from 'next/server'
// This function can be marked `async` if using `await` inside
export function middleware(request) {
return NextResponse.redirect(new URL('/home', request.url))
}
// See "Matching Paths" below to learn more
export const config = {
matcher: '/about/:path*',
}
Be sure to add this code after creating the middleware.js file. Other than you will get an error. Here is the Official Documentation link.
3. Components Folder in NextJS 15
Create a components folder outside of the app directory. Since we will be creating so many components, it is better to add styles and a header inside the components folder, and this is what the folder structure would look like.
Instead of creating separate folders for each file, you must create a component because this will improve your website performance.
4.Context Provider Page in NextJS 15
Create a context folder outside of the app directory. Create context.js and whatever you like to name it.
Now, you can export your multiple context providers within a single folder.
5. Model and Schema Foldet in NextJS 15
The folder structure is similar to the pages router creates a model folder outside of the app directory, which is the root directory of the project and then creates model.js inside the model folder, and that’s how you can make a schema for database enquiries,
Now, you can export your models.
