Next.js Project Description

A Next.js project consists of multiple files and folders, each with its specific purpose.

The following is a basic explanation of Next.js project code to help you understand the project structure and the function of each part.

Starting from Next.js 13, Next.js introduced the file-system-based App Router (app directory), replacing the traditional pages directory. The new app directory offers more powerful features such as nested routing, layouts, server components, and more.

Project Structure

A Next.js project using the app directory typically contains the following files and folders:

my-next-app/
├── node_modules/       # 项目依赖的第三方库
├── public/             # 静态资源文件夹
│   ├── favicon.ico     # 网站图标
│   └── ...             # 其他静态资源（如图片、字体等）
├── app/                # 应用路由目录（核心）
│   ├── layout.js       # 根布局组件
│   ├── page.js         # 首页组件
│   ├── about/          # 关于页面
│   │   └── page.js     # 关于页面组件
│   ├── blog/           # 博客页面
│   │   ├── page.js     # 博客列表页
│   │   └── [slug]/     # 动态路由
│   │       └── page.js # 博客详情页
│   └── ...             # 其他页面和路由
├── components/         # 可复用的 React 组件
├── styles/             # 样式文件
├── utils/              # 工具函数
├── package.json        # 项目配置和依赖管理
├── package-lock.json   # 依赖的精确版本锁定文件
├── next.config.js      # Next.js 配置文件
└── README.md           # 项目说明文档

Core Files Explanation

app/layout.js

app/layout.jsIt is the root layout file, used to define the layout structure of the entire application.

app/layout.jsIt wraps all pages and can include global styles, metadata, etc.

Example

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

app/page.js

app/page.jsIt is the home page file, corresponding to the route /./。

Example

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js 13!</h1>
    </div>
  );
}

app/about/page.js

app/about/page.jsIt is the about page file, corresponding to the route /about.

Example

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

app/blog/[slug]/page.js

app/blog/[slug]/page.jsIt is the dynamic route file, used to handle routes such as/blog/:slugroutes.

Example

export default function BlogPost({ params }) {
  return (
    <div>
      <h1>Blog Post: {params.slug}</h1>
    </div>
  );
}

app/loading.js

app/loading.jsIt is the loading state file, used to display loading state while a page is loading.

Example

export default function Loading() {
  return <p>Loading...</p>;
}

app/error.js

app/error.jsIt is the error page file, used to catch and display errors.

Example

'use client'; // Mark as client component

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

app/not-found.js

app/not-found.jsIt is the 404 page file, used to display the not-found page.

Example

export default function NotFound() {
  return (
    <div>
      <h2>Page Not Found</h2>
    </div>
  );
}

New Features Explanation

1. Server Components

Next.js 13 uses server components by default, reducing the amount of client-side JavaScript loaded.

Server components can directly access backend data without the need for 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 <div>{data.message}</div>;
}

2. Client Components

If you need to use React state or browser APIs, you can mark the component as a client component.

Use'use client'directive.

Example

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

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.jsIt is the layout for the dashboard page.

app/dashboard/page.jsIt is the content of the dashboard page.

4. Streaming

Next.js 13 supports streaming rendering, which can progressively render content while the page is loading.

Example

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <Suspense fallback={<p>Loading...</p>}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}

Running the Project

  1. Start the development server：

    • Runnpm run devoryarn devto start the development server.

    • Open a browser and visithttp://localhost:3000to view the application.

  2. Build production code：

    • Runnpm run buildoryarn buildto generate optimized production code.

  3. Start the production server：

    • Runnpm run startoryarn startto start the production server.

Other Extensions