A Next.js project consists of multiple files and folders, each with its specific purpose.
The following is a basic analysis of the Next.js project code, helping you understand the project structure and the function of each part.
**Starting from Next.js 13, Next.js introduced a file-system based App Router (app directory), replacing the traditional pages directory. The new app directory provides more powerful features such as nested routing, layouts, server components, etc.**
* * *
## Project Structure
A Next.js project using the app directory typically contains the following files and folders:
my-next-app/βββ node_modules/ # Third-party libraries that the project depends onβββ public/ # Static resource folderβ βββ favicon.ico # Website faviconβ βββ ... # Other static resources (such as images, fonts, etc.)βββ app/ # Application routing directory (core)β βββ layout.js # Root layout componentβ βββ page.js # Home page componentβ βββ about/ # About pageβ β βββ page.js # About page componentβ βββ blog/ # Blog pageβ β βββ page.js # Blog list pageβ β βββ / # Dynamic routingβ β βββ page.js # Blog detail pageβ βββ ... # Other pages and routesβββ components/ # Reusable React componentsβββ styles/ # Style filesβββ utils/ # Utility functionsβββ package.json # Project configuration and dependency managementβββ package-lock.json # Exact version lock file for dependenciesβββ next.config.js # Next.js configuration fileβββ README.md # Project documentation
* * *
## Core File Analysis
### app/layout.js
**app/layout.js** is the root layout file, used to define the layout structure of the entire application.
**app/layout.js** wraps all pages and can contain global styles, metadata, etc.
## Example
export default function RootLayout({ children }){
return(
{children}
);
}
### app/page.js
**app/page.js** is the home page file, corresponding to the route /.
## Example
export default function Home(){
return(
Welcome to Next.js 13!
);
}
### app/about/page.js
**app/about/page.js** is the about page file, corresponding to the route /about.
## Example
export default function About(){
return(
About Us
This is the about page.
);
}
### app/blog//page.js
**app/blog//page.js** is the dynamic routing file, used to handle routes similar to /blog/:slug.
## Example
export default function BlogPost({ params }){
return(
Blog Post:{params.slug}
);
}
### app/loading.js
**app/loading.js** is the loading state file, used to display loading state while the page is loading.
## Example
export default function Loading(){
return
Loading...
;
}
### app/error.js
**app/error.js** is the error page file, used to capture and display errors.
## Example
'use client';// Mark as client component
export default function Error({ error, reset }){
return(
Something went wrong!
);
}
### app/not-found.js
**app/not-found.js** is the 404 page file, used to display pages that are not found.
## Example
export default function NotFound(){
return(
Page Not Found
);
}
* * *
## New Features Analysis
### 1γServer Components
Next.js 13 uses server components by default, reducing the amount of client-side JavaScript to load.
Server components can directly access backend data without additional API calls.
## Example
async function getData(){
const res = await fetch('https://api.example.com/data');
return res.json();
}
export default async function Page(){
const data = await getData();
return
{data.message}
;
}
### 2γClient Components
If you need to use React state or browser APIs, you can mark the component as a client component.
Use the 'use client' directive.
## Example
'use client';
import{ useState } from 'react';
export default function Counter(){
const[count, setCount]= useState(0);
return(
Count:{count}
);
}
### 3γNested Layouts
You can create nested layouts in the app directory, and each subdirectory can have its own layout file.
For example:
**app/dashboard/layout.js**: Layout for the dashboard page.
**app/dashboard/page.js**: Content for the dashboard page.
### 4γStreaming
Next.js 13 supports streaming, which allows content to be rendered progressively while the page is loading.
## Example
import{ Suspense } from 'react';
export default function Page(){
return(
<Suspense fallback={
Loading...
}>
);
}
* * *
## Running the Project
1. **Start the development server**:
* Run `npm run dev` or `yarn dev` to start the development server.
* Open your browser and visit `http://localhost:3000` to view the application.
2. **Build for production**:
* Run `npm run build` or `yarn build` to generate optimized production-ready code.
3. **Start the production server**:
* Run `npm run start` or `yarn start` to start the production server.
YouTip