NextJS 14 Project Folder Structure - Best Practice
If you want to build a new project with NextJS but are not sure what should be the directory structure or the folder structure of the NextJS project, then this tutorial will help you. In this tutorial, I will share with you a couple of standard practices when it comes to NextJS project folder structure. A good project folder structure is very important for easy maintenance, readability, and scalability of the project over time.
In this tutorial, we will share with you the NextJS 14 project folder structure best practices, so we will use the App Router and not the Page Router in the NextJS project. NextJS recommends using the App router for new projects because the page router will be deprecated in future releases.
So, in the project structure that we will share in this tutorial, all the routing will be inside the /app directory.
Create Next Project
You can create a simple NextJS project using the following command:
npx create-next-app@latest
When you run the above command, you will get the following prompts to choose what you want:
-
What is your project named? my-next-app
-
Would you like to use TypeScript? No / Yes
-
Would you like to use ESLint? No / Yes
-
Would you like to use Tailwind CSS? No / Yes
-
Would you like to use `src/` directory? No / Yes
-
Would you like to use App Router? (recommended) No / Yes
-
Would you like to customize the default import alias (@/*)? No / Yes
-
What import alias would you like configured? @/*
If you want all your code files to be grouped inside a /src directory, then for the 5th prompt(listed above) choose Yes.
And for the 6th prompt also choose Yes, because we want to use the App router, which, as you can see above, is recommended also.
Once you have selected all the prompts, wait for a couple of minutes as your project gets created and all the dependencies are added to your project.
Files in the NextJS Project
In the new NextJS project, that you have just created, you will have the following folder structure (boilerplate code):
If you selected to use the src/ directory, then the main app/ directory of your project will be inside the src/ directory. If not, the app/ directory will be inside the root.
In the above screenshot, we have the app/ folder inside the src/ directory.
In a default project, you will have the following config files:
1. jsconfig.json
In this file, you can specify in which directory the .js or .jsx files will be stored. You can also specify the baseURL in this file that will be used in import statements. Along with baseURL, you can also specify path option to alias module paths.
You can read more on this on NextJS documentation for module imports and alias.
2. package.json
All the dependencies, development dependencies, and scripts to run your project are in this file. Whenever you run the npm install command, a new entry for the package that you install gets added to this file.
3. next.config.mjs
All the configurations related to NextJS come in this file. If you want to see what config options you have, open this file, click inside the nextConfig object, and press CTRL + SPACE to see all available options in VS Code.
-
You can manage the domains from where you use images in your project.
-
You can manage redirects and rewrites.
-
You can manage headers for HTTP requests.
-
You can specify a prefix for your asset loading from a CDN, using the assetPrefix property.
-
You can change the build directory.
-
You can specify logging config, and a lot more.
4. tailwind.config.js
In this file, you can specify all the configurations related to Tailwind. Tailwind theme-related config like primary colors, etc. And any plugin you want to use goes here.
Directory Structure for Code
There are a lot of different ways in which you can structure your NextJS project, let us share a NextJS project structure that we like, and a lot of developers around the world follow it.
Inside the app/ directory, you can have the following at the root level:
1. layout.js
This file is used to define the template of the webpage. This is generally server-side rendered while inside it you can use client components. The page.js component is loaded inside the layout.js file.
2. page.js
The page.js is like the index.html page for your NextJS project. With App Router, the directory structure that you create in your NextJS project is treated as the URL for the NextJS project, just like an old-school HTML web project.
In every directory, you can have a layout.js and page.js file. The layout.js defines the template for the page and the page.js defines the main UI of the webpage.
Having layout.js in all the directories is not mandatory. But you should have one layout.js in the main app/ directory.
3. _components
The directories with names starting with an underscore (_) are private directories. In the _component directory, you can keep all your common component files that you would want to use in your app, for example, Header.jsx, Footer.jsx, etc.
4. Static Pages for App - Route Group
If your app has some static pages like about-us/, or privacy/, or terms/, or contact-us/, etc. you can create separate directories for them and keep them inside one directory Route group. You can name the directory as (info) and inside that keep all the other directories.
A route group is not considered as part of the URL. For example,
The URL won't be /info/about, instead it will just be /about, and that's it.
You can group related routes like this. In each directory, you can have the layout.jsx and the page.jsx files.
5. _lib
Every project requires 3rd party dependencies like Toastify, or Redux, or next-auth, or Redis, etc. All that can go inside this directory. You can create separate directories inside the _lib directory for each 3rd party package that you use.
6. _utils
Inside the _utils directory, you can have common project-related stuff like the setup for logging, error handling, etc.
7. Other folders
You can structure your project into different directories as per your URL requirements. For example, if you want to have login/ and signup/ pages, then you can create two separate directories for login and signup, and inside those you can either have just page.js files or you can have both layout.js and page.js files.
Similarly, you can create directories and subdirectories for your project. Just make sure, for the paths that you want to be publicly accessible, you create a page.js or page.jsx file.
If you want to learn more about how to set routes, and different ways to define routes in your app, check out the Next JS document for project structure.
End Note
At the end of the day, it depends on how you want to structure your project. You must think of a scalable approach because as your project grows you should be able to manage the files properly.
You should also decide which parts of the project should be kept private, where to use route groups, where you want to use params in the URL, etc.w
