YouTip

In Next.js, the directory structure is organized based on a file-system routing mechanism, which means your file and folder structure directly determines your application's routing and page layout. !(#) * The `app/` directory is used to store pages and layout files, and is the core directory in Next.js. * `public/` is used to store public static resource files. * `styles/` is used to store style files. * `node_modules/` stores all project dependencies. * `package.json` is the project configuration file, containing project dependencies and script commands. * `next.config.js` is used to customize Next.js configuration. ### Root Directory The root directory typically contains some basic configuration files and dependencies. Common files and folders are as follows: my-next-app/├── app/ # Store application pages and layout files├── public/ # Store static resource files (such as images, fonts)├── styles/ # Store style files (CSS, Sass, etc.)├── node_modules/ # Store project dependencies├── package.json # Project configuration file├── next.config.js # Next.js configuration file (optional)└── .gitignore # Git ignore file * **`app/`**: This directory is the new way in Next.js to organize pages and layout files. All routes and pages are created based on this directory. * **`public/`**: This directory stores public static files, such as images, fonts, favicon, etc. You can access these files directly via URL. * **`styles/`**: Store your CSS, Sass, or other style files. ### app/ Directory The app/ directory is the core of Next.js, storing pages, layouts, and other related files. Here are some common structures of the app/ directory: app/├── layout.tsx # Root layout file├── page.tsx # Root page└── / # Dynamic route directory ├── page.tsx # Dynamic page └── layout.tsx # Specific page layout * **`layout.tsx`**: This file defines the root layout or page layout, typically used to set global structure (such as `` and `` tags). All child pages will be nested within this layout. * **`page.tsx`**: Each page component should have a `page.tsx` file. This file represents the page content corresponding to that route. For example, `app/page.tsx` corresponds to the root path (`/`) page. * **Dynamic Routes**: Next.js supports dynamic routes, where dynamic route directory names are enclosed in square brackets, such as ``. This means you can load different pages based on different parts of the URL. For example, `/page.tsx` will dynamically render the page based on the `slug` parameter. ### public/ Directory This directory is used to store static resources, allowing you to expose images, fonts, icons, and other resources in your application, and load them by directly accessing the file path. public/├── images/ # Store image files├── fonts/ # Store font files└── favicon.ico # Website icon * Files can be accessed directly via paths like `/images/`. For example, `public/images/logo.png` can be accessed via `http://localhost:3000/images/logo.png`. ### styles/ Directory In the styles/ directory, you can organize and manage your style files. Next.js supports CSS modules, global styles, and other CSS solutions. styles/├── Home.module.css # CSS module styles└── globals.css # Global styles * **`Home.module.css`**: This is a CSS module file. By default, Next.js automatically uses CSS modules for each component, ensuring style scope is limited to that component only. * **`globals.css`**: Stores global styles, typically used to set global fonts, colors, etc. ### node_modules/ Directory This directory stores all project dependencies. It is automatically generated by npm or yarn based on the dependency information in the package.json file and does not require manual operation. ### package.json File package.json is the core configuration file of the project, recording project dependencies, scripts, and other metadata. You can define start, build, and development commands here. ## Example { "scripts":{ "dev":"next dev", "build":"next build", "start":"next start", "lint":"next lint" } } ### next.config.js File (Optional) This is an optional configuration file used to configure Next.js behavior. For example, you can set static file optimization, routing rules, Webpack configuration, etc. in this file. ## Example module.exports={ reactStrictMode:true, } * * * ## Project Structure Example Below is a typical Next.js project structure example: ## Example: Next.js Project Structure my-next-app/ ├── app/ │ ├── layout.js // Root layout │ ├── page.js // Home page │ ├── about/ │ │ ├── layout.js ///about layout │ │ └── page.js ///about page │ ├── blog/ │ │ ├── layout.js ///blog layout │ │ ├── page.js ///blog list page │ │ └── / │ │ └── page.js ///blog/:slug detail page │ └── dashboard/ │ ├── layout.js ///dashboard layout │ └── page.js ///dashboard page ├── public/ │ ├── logo.png // Static resource │ └── favicon.ico // Website icon ├── node_modules/// Project dependencies ├── package.json // Project configuration file ├── next.config.js // Next.js configuration file └── .next/// Build output directory ### Comparison between app Directory and Traditional pages Directory Next.js 13 introduced the new app directory, which coexists with the traditional pages directory and provides a more flexible way to organize routing and layouts. | Feature | `pages` Directory | `app` Directory | | --- | --- | --- | | **Route Definition** | File system routing | Folder routing | | **Layout Management** | Manual implementation | Nested layouts | | **Data Fetching** | `getStaticProps`, etc. | Server Components + `async/await` | | **File Naming** | Free naming | Must be named `page.js` | | **Special Files** | `_app.js`, `_document.js`, etc. | `layout.js`, `loading.js`, etc. | | **Performance Optimization** | Manual optimization | Default optimization | | **Compatibility** | Fully compatible | Beta stage, requires manual enablement |