Описание проекта Next.js

Проект Next.js состоит из множества файлов и папок, каждая из которых имеет свое конкретное назначение.

Ниже приведено базовое объяснение кода проекта Next.js, которое поможет вам понять структуру проекта и назначение каждой части.

Начиная с Next.js 13, Next.js представил App Router на основе файловой системы (каталог app), заменив традиционный каталог pages. Новый каталог app предлагает более мощные возможности, такие как вложенная маршрутизация, макеты, серверные компоненты и многое другое.

Структура проекта

Проект Next.js, использующий каталог app, обычно содержит следующие файлы и папки:

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           # 项目说明文档

Описание основных файлов

app/layout.js

app/layout.jsЭто корневой файл макета, используемый для определения структуры макета всего приложения.

app/layout.jsОн оборачивает все страницы и может включать глобальные стили, метаданные и т. д.

Пример

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

app/page.js

app/page.jsЭто файл главной страницы, соответствующий маршруту /./。

Пример

export default function Home() {
  return (
    <div>
      <h1>Добро пожаловать в Next.js 13!</h1>
    </div>
  );
}

app/about/page.js

app/about/page.jsЭто файл страницы «О нас», соответствующий маршруту /about.

Пример

export default function About() {
  return (
    <div>
      <h1>О нас</h1>
      <p>Это страница «О нас».</p>
    </div>
  );
}

app/blog/[slug]/page.js

app/blog/[slug]/page.jsЭто файл динамического маршрута, используемый для обработки таких маршрутов, как/blog/:slugмаршруты.

Пример

export default function BlogPost({ params }) {
  return (
    <div>
      <h1>Запись блога: {params.slug}</h1>
    </div>
  );
}

app/loading.js

app/loading.jsЭто файл состояния загрузки, используется для отображения состояния загрузки во время загрузки страницы.

Пример

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

app/error.js

app/error.jsЭто файл страницы ошибки, используется для перехвата и отображения ошибок.

Пример

'use client'; // Пометить как клиентский компонент

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Что-то пошло не так!</h2>
      <button onClick={() => reset()}>Попробовать снова</button>
    </div>
  );
}

app/not-found.js

app/not-found.jsЭто файл страницы 404, используется для отображения страницы not-found.

Пример

export default function NotFound() {
  return (
    <div>
      <h2>Страница не найдена</h2>
    </div>
  );
}

Объяснение новых возможностей

1. Серверные компоненты

Next.js 13 по умолчанию использует серверные компоненты, уменьшая объём загружаемого клиентского JavaScript.

Серверные компоненты могут напрямую обращаться к данным бэкенда без необходимости дополнительных вызовов API.

Пример

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. Клиентские компоненты

Если вам нужно использовать состояние React или браузерные API, вы можете пометить компонент как клиентский компонент.

Используйте'use client'в качестве директивы.

Пример

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Количество: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

3. Вложенные макеты

Вы можете создавать вложенные макеты в каталоге app, и каждый подкаталог может иметь собственный файл макета.

Например:

app/dashboard/layout.jsЭто макет для страницы dashboard.

app/dashboard/page.jsЭто содержимое страницы dashboard.

4. Потоковая передача

Next.js 13 поддерживает потоковый рендеринг, который позволяет постепенно отрисовывать содержимое во время загрузки страницы.

Пример

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <Suspense fallback={<p>Загрузка...</p>}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}

Запуск проекта

  1. Запустите сервер разработки：

    • Запуститеnpm run devилиyarn devчтобы запустить сервер разработки.

    • Откройте браузер и перейдите по адресуhttp://localhost:3000чтобы просмотреть приложение.

  2. Сборка production-кода：

    • Запуститеnpm run buildилиyarn buildчтобы сгенерировать оптимизированный production-код.

  3. Запустите production-сервер：

    • Запуститеnpm run startилиyarn startчтобы запустить production-сервер.

Другие расширения