Next.js-Verzeichnisstruktur

In Next.js wird die Verzeichnisstruktur auf Basis eines Dateisystem-Routing-Mechanismus organisiert, was bedeutet, dass Ihre Datei- und Ordnerstruktur direkt das Routing und das Seitenlayout Ihrer Anwendung bestimmt.

• app/Das Verzeichnis wird zum Speichern von Seiten- und Layoutdateien verwendet und ist das Kernverzeichnis in Next.js.
• public/Es wird zum Speichern öffentlicher statischer Ressourcendateien verwendet.
• styles/Es wird zum Speichern von Style-Dateien verwendet.
• node_modules/Speichert alle Abhängigkeitspakete des Projekts.
• package.jsonEs ist die Projektkonfigurationsdatei, die Projektabhängigkeiten und Skriptbefehle enthält.
• next.config.jsEs wird verwendet, um die Next.js-Konfiguration anzupassen.

Root-Verzeichnis

Das Root-Verzeichnis enthält typischerweise einige grundlegende Konfigurationsdateien und Abhängigkeiten. Häufige Dateien und Ordner sind wie folgt:

my-next-app/
├── app/                 # 存放应用页面和布局文件
├── public/              # 存放静态资源文件（如图片、字体）
├── styles/              # 存放样式文件（CSS、Sass等）
├── node_modules/        # 存放项目依赖
├── package.json         # 项目配置文件
├── next.config.js       # Next.js 配置文件（可选）
└── .gitignore           # Git 忽略文件

• app/: Dieses Verzeichnis ist die neue Methode in Next.js, um Seiten- und Layout-Dateien zu organisieren. Das gesamte Routing und alle Seiten werden auf Grundlage dieses Verzeichnisses erstellt.
• public/: In diesem Verzeichnis werden öffentliche statische Dateien wie Bilder, Schriftarten, Favicon usw. gespeichert. Sie können direkt per URL auf diese Dateien zugreifen.
• styles/: Speichern Sie Ihre CSS-, Sass- oder anderen Stildateien.

app/-Verzeichnis

Das app/-Verzeichnis ist der Kern von Next.js und speichert Seiten, Layouts und andere zugehörige Dateien.

Das Folgende ist eine übliche Struktur des app/-Verzeichnisses:

app/
├── layout.tsx           # 根布局文件
├── page.tsx             # 根页面
└── [slug]/              # 动态路由目录
    ├── page.tsx         # 动态页面
    └── layout.tsx       # 特定页面的布局

• layout.tsx: In dieser Datei wird das Root-Layout oder Seitenlayout definiert, das normalerweise verwendet wird, um die globale Struktur festzulegen (wie z. B.<html>und<body>Tag). Alle Unterseiten werden in diesem Layout verschachtelt.
• page.tsx: Jede Seitenkomponente sollte einepage.tsxDatei haben. Diese Datei stellt den Seiteninhalt dar, der dieser Route entspricht. Zum Beispiel,app/page.tsxentspricht dem Root-Pfad (/) Seite.
• Dynamische Routen: Next.js unterstützt dynamische Routen. Die Namen dynamischer Routenverzeichnisse werden in eckige Klammern gesetzt, wie z. B.[slug]. Das bedeutet, dass du verschiedene Seiten basierend auf verschiedenen Teilen der URL laden kannst. Zum Beispiel,[slug]/page.tsxwird basierend aufslugParameter, um die Seite dynamisch zu rendern.

public/-Verzeichnis

Dieses Verzeichnis wird zum Speichern von statischen Assets verwendet. Es ermöglicht dir, Ressourcen wie Bilder, Schriftarten, Icons usw. in der Anwendung bereitzustellen, und sie können durch direkten Zugriff auf den Dateipfad geladen werden.

public/
├── images/              # 存放图片文件
├── fonts/               # 存放字体文件
└── favicon.ico          # 网站图标

• Auf Dateien kann über/images/und andere Pfade direkt zugegriffen werden. Zum Beispiel,public/images/logo.pngist erreichbar überhttp://localhost:3000/images/logo.png.

styles/-Verzeichnis

Im Verzeichnis styles/ können Sie Ihre Stildateien organisieren und verwalten. Next.js unterstützt CSS Modules, globale Stile und andere CSS-Lösungen.

styles/
├── Home.module.css      # CSS 模块化样式
└── globals.css          # 全局样式

• Home.module.css: Dies ist eine CSS-Moduldatei. Standardmäßig verwendet Next.js automatisch CSS Modules für jede Komponente, wodurch der Stilbereich auf diese Komponente beschränkt wird.
• globals.css: Speichert globale Stile, die normalerweise verwendet werden, um globale Schriftarten, Farben usw. festzulegen.

node_modules/-Verzeichnis

Dieses Verzeichnis speichert alle Abhängigkeitspakete des Projekts. Es wird automatisch von npm oder yarn basierend auf den Abhängigkeitsinformationen in der Datei package.json generiert und erfordert keinen manuellen Eingriff.

package.json-Datei

package.json ist die zentrale Konfigurationsdatei des Projekts und speichert die Abhängigkeiten, Skripte und andere Metadaten des Projekts. Hier können Sie Befehle wie start, build und develop definieren.

next.config.js-Datei (optional)

Dies ist eine optionale Konfigurationsdatei, mit der das Verhalten von Next.js konfiguriert wird. Zum Beispiel können Sie in dieser Datei die Optimierung statischer Dateien, Routing-Regeln, die Webpack-Konfiguration usw. festlegen.

Projektstruktur-Beispiel

Das Folgende ist ein typisches Beispiel für eine Next.js-Projektstruktur:

Vergleich von app-Verzeichnis und traditionellem pages-Verzeichnis

Next.js 13 führte das neue app-Verzeichnis ein. Es existiert neben dem traditionellen pages-Verzeichnis und bietet eine flexiblere Möglichkeit, Routing und Layouts zu organisieren.