Next.js-Projektbeschreibung

Ein Next.js-Projekt besteht aus mehreren Dateien und Ordnern, die jeweils einen bestimmten Zweck erfüllen.

Das Folgende ist eine grundlegende Erklärung des Next.js-Projektcodes, damit Sie die Projektstruktur und die Funktion jedes Teils verstehen.

Ab Next.js 13 führte Next.js den dateisystembasierten App Router (app-Verzeichnis) ein, der das traditionelle pages-Verzeichnis ersetzt. Das neue app-Verzeichnis bietet leistungsfähigere Funktionen wie verschachteltes Routing, Layouts, Serverkomponenten und mehr.

Projektstruktur

Ein Next.js-Projekt, das das app-Verzeichnis verwendet, enthält normalerweise die folgenden Dateien und Ordner:

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

Erklärung der Kerndateien

app/layout.js

app/layout.jsEs ist die Root-Layout-Datei, mit der die Layoutstruktur der gesamten Anwendung definiert wird.

app/layout.jsEs umschließt alle Seiten und kann globale Stile, Metadaten usw. enthalten.

Beispiel

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

app/page.js

app/page.jsEs ist die Startseitendatei, die der Route / entspricht./。

Beispiel

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

app/about/page.js

app/about/page.jsEs ist die Datei der Über-uns-Seite, die der Route /about entspricht.

Beispiel

export default function About() {
  return (
    <div>
      <h1>Über uns</h1>
      <p>Dies ist die Über-uns-Seite.</p>
    </div>
  );
}

app/blog/[slug]/page.js

app/blog/[slug]/page.jsEs ist die Datei für dynamische Routen, die verwendet wird, um Routen wie/blog/:slugRouten zu verarbeiten.

Beispiel

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

app/loading.js

app/loading.jsEs ist die Datei für den Ladezustand, die verwendet wird, um den Ladezustand anzuzeigen, während eine Seite geladen wird.

Beispiel

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

app/error.js

app/error.jsEs ist die Datei für die Fehlerseite, die verwendet wird, um Fehler abzufangen und anzuzeigen.

Beispiel

'use client'; // Als Client-Komponente markieren

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Etwas ist schiefgelaufen!</h2>
      <button onClick={() => reset()}>Erneut versuchen</button>
    </div>
  );
}

app/not-found.js

app/not-found.jsEs ist die Datei für die 404-Seite, die verwendet wird, um die Nicht-gefunden-Seite anzuzeigen.

Beispiel

export default function NotFound() {
  return (
    <div>
      <h2>Seite nicht gefunden</h2>
    </div>
  );
}

Erklärung neuer Funktionen

1. Server-Komponenten

Next.js 13 verwendet standardmäßig Server-Komponenten, wodurch weniger clientseitiges JavaScript geladen wird.

Server-Komponenten können direkt auf Backend-Daten zugreifen, ohne dass zusätzliche API-Aufrufe erforderlich sind.

Beispiel

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-Komponenten

Wenn du React-State oder Browser-APIs verwenden musst, kannst du die Komponente als Client-Komponente markieren.

Verwende'use client'-Direktive.

Beispiel

'use client';

import { useState } from 'react';

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

3. Verschachtelte Layouts

Du kannst verschachtelte Layouts im app-Verzeichnis erstellen, und jedes Unterverzeichnis kann seine eigene Layout-Datei haben.

Zum Beispiel:

app/dashboard/layout.jsEs ist das Layout für die Dashboard-Seite.

app/dashboard/page.jsEs ist der Inhalt der Dashboard-Seite.

4. Streaming

Next.js 13 unterstützt Streaming-Rendering, wodurch Inhalte schrittweise gerendert werden können, während die Seite lädt.

Beispiel

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <Suspense-Fallback={<p>Wird geladen...</p>}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}

Projekt ausführen

  1. Den Entwicklungsserver starten：

    • Führen Sienpm run devoderyarn devum den Entwicklungsserver zu starten.

    • Öffnen Sie einen Browser und besuchen Siehttp://localhost:3000um die Anwendung anzuzeigen.

  2. Produktionscode erstellen：

    • Führen Sienpm run buildoderyarn buildum optimierten Produktionscode zu generieren.

  3. Starte den Produktionsserver：

    • Führen Sienpm run startoderyarn startum den Produktionsserver zu starten.

Andere Erweiterungen