In this lesson, you’ll learn about
- The default folder and file structure of a Next.js 15 project.
- the difference between using the src folder and not using it in your Next.js project stucture
- What each default file and folder in the project structure does, and point out common mistakes to avoid.
When creating a new Next.js project , you would be asked several setup prompts. One of those prompts is:
Would you like to use the src/ directory? (yes/no) If you answer "yes" to that prompt, your project will be structured as fig A in the image below. on the other hand, if you answer "no", your project would be structured like fig B.
default folder structure of a Next.js 15 project using the App Router- with and without the src directoryWhat’s the difference? Which structure should you use?
Don’t worry— we’ll cover that shortly.
But first, let’s understand what each folder and file in the Next.js folder structure is used for.
The folder structure discussed in this lesson uses the App Router (this is recommended). Don’t worry if you don't know what the App router is, we'll talk about it in another lesson
For now, let's understand what each key folder and file is used for.
Next.js Project Files and Folders
Top level Folders
Top-level folders are located in the root directory of your Next.js project.
They organize your application’s code and static assets like images, fonts, and CSS.
Top level folders of a Next.js 15 project (with and without the src directory )By default, the top-level folders are:
- .next folder
- node_modules folder
- app folder
- public folder
- src (optional)
Did you notice that the .next and node_modules folder are not shown in the image of the top level folders above? we'll talk about those folders shortly,
App folder
The app folder is the core of your Next.js project. This folder holds your pages, layouts, and is used to determine which page is shown when users visit your Next.js app.
In the older versions of Next.js, a separate pages folder was used to hold pages of your application. It’s still been used today, but it is recommended to use the App folder in the current version of Next.js (version 15).
public folder
The public folder stores static assets such as images, icons, and fonts. Files placed here are served directly from the root path. You can organize the public folder as your project needs, but avoid deeply nested folders. One level deep is best.
.next folder
This is the build output folder generated when you run next dev or next build.
This build is what is served to users who visit your Next.js app.
This folder is not created when you first create your new Next.js project. it is automatically created when your run the project for the first time (either in development or production mode ). If deleted, Next.js will recreate it when you re-run the app.
src folder (optional)
When you choose to use it in your Next.js project, your app folder and other source files inside it are placed inside the src folder for cleaner organization. Basically, projects work the same with or without the src folder. Using it is simply a convention to keep your root directory tidy, especially for larger apps.
The node_modules folder is also, part of the folder structure. This folder is created automatically when you run npm install. It contains all the third-party libraries your project depends on.
Top level files
These are the files in the root directory of your Next.js project. These files help configure your app, manage dependencies, and define settings like imports, scripts, and environment variables.
The default top level files of a Next.js 15 project (excluding the .gitignore file)eslint.config.mjs
This file is use to configure ESLint, a tool that checks your code for errors and makes sure you follow coding standards.
next-env.d.ts
This is a special file that tells Typescript the types that Next.js provides. You don't need to edit this file, Next.js manages it for you.
This file is not tracked by git. Also, it is only created if you choose to use Typescript in your Next.js project.
package-lock.json
This file is used to keep track of the exact version of the third party libraries your project depends on (dependencies) and their sub-dependencies. That way, if you or someone else installs this project later, you both get the same dependencies that were used in creating the project in the first place.
package.json
Keeps track of your dependencies and project scripts.
postcss.config.mjs
This file is used to provide a plugin for processing your Tailwind css utility classes.
The create-next-app tool adds this file automatically if you choose to use Tailwind css in your Next.js project during the project setup.
next.config.ts
This file customizes your Next.js app. It can define redirects, enable experimental features, or adjust how images are handled. It is a general rule of thumb to avoid copy-pasting configs from the internet without actually Knowing what it does to your project.
If you choose not to use JavaScript in your Next.js project, the create-next-app tool would give you the JavaScript equivalent of this file (next.config.js)
Readme.md
This file is used to describe your project. By default, Next.js adds instructions on how to :
- run the development server (
npm run dev) - build the project (
npm run build) - start the production server (
npm start) - links to the Next.js docs
Though the file is created by default, feel free to edit it. The reason for the file is to help you describe your project in a way that would help you or anyone else understand what the project is about.
tsconfig.json / jsconfig.json
Controls how imports and paths work in your project. Both files are the same. The first (tsconfig.json) is the Typescript version. If you’re not using Typescript, Next.js generates jsconfig.json for JavaScript projects.
When a new Next.js project is created, it is automatically initialized with git. With that, Next.js also includes a .gitignore file
Files in the app folder
The default files in the app directory of a Next.js 15 projectfavicon.ico file
The little icon of the website you see at the title bar for the page
globals.css file
The general css file for your Next.js project. You can have others, but this is the default base css file.
layout.tsx file
The main layout for your Next.js app. This layout is used accross the entire application and should not be deleted.
layout.tsx is the Typescript version of the layout file. if you're not using Typescript, Next.js creates a layout.jsx file instead
page.tsx file
This file contains the content that is rendered in the browser when a user visits the root ("/") url of your Next.js app
page.tsx is the Typescript version of the page file. if you're not using Typescript, Next.js creates a page.jsx file instead
... And that's it
Hopefully, You now understand the basics of the Next.js project structure—with and without the src folder, the role of key files and folders, and some common mistakes you should avoid
This lesson only considers the default files and folders that are created when you create a Next.js project. There are other files that are not available by default but might come in handy depending on the project requirement.
Next, let's create our first page.