Skip to content

Commit 9dad900

Browse files
xiaoyu2erxiaoyu2er
committed
docs: update documentation translations
1 parent cdd2ad3 commit 9dad900

File tree

368 files changed

+54371
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

368 files changed

+54371
-0
lines changed

‎apps/docs/content/de/docs/01-app/01-getting-started/01-installation.mdx‎

Lines changed: 341 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,341 @@
1+
---
2+
source-updated-at: 2025-06-01T01:32:20.000Z
3+
translation-updated-at: 2025-06-02T20:04:36.711Z
4+
title: Einrichtung eines neuen Next.js-Projekts
5+
nav_title: Installation
6+
description: Erstellen Sie eine neue Next.js-Anwendung mit der `create-next-app` CLI und richten Sie TypeScript, ESLint und Modulpfad-Aliase ein.
7+
---
8+
9+
{/* Der Inhalt dieses Dokuments wird sowohl für den App- als auch für den Pages-Router verwendet. Sie können die `<PagesOnly>Content</PagesOnly>`-Komponente verwenden, um Inhalte hinzuzufügen, die spezifisch für den Pages-Router sind. Gemeinsame Inhalte sollten nicht in eine Komponente eingeschlossen werden. */}
10+
11+
## Systemanforderungen
12+
13+
Bevor Sie beginnen, stellen Sie sicher, dass Ihr System die folgenden Anforderungen erfüllt:
14+
15+
- [Node.js 18.18](https://nodejs.org/) oder höher.
16+
- macOS, Windows (einschließlich WSL) oder Linux.
17+
18+
## Automatische Installation
19+
20+
Der schnellste Weg, eine neue Next.js-App zu erstellen, ist die Verwendung von [`create-next-app`](/docs/app/api-reference/cli/create-next-app), das alles automatisch für Sie einrichtet. Führen Sie folgenden Befehl aus, um ein Projekt zu erstellen:
21+
22+
```bash filename="Terminal"
23+
npx create-next-app@latest
24+
```
25+
26+
Während der Installation werden Sie folgende Eingabeaufforderungen sehen:
27+
28+
```txt filename="Terminal"
29+
Wie soll Ihr Projekt heißen? my-app
30+
Möchten Sie TypeScript verwenden? Nein / Ja
31+
Möchten Sie ESLint verwenden? Nein / Ja
32+
Möchten Sie Tailwind CSS verwenden? Nein / Ja
33+
Möchten Sie Ihren Code in einem `src/`-Verzeichnis haben? Nein / Ja
34+
Möchten Sie den App-Router verwenden? (empfohlen) Nein / Ja
35+
Möchten Sie Turbopack für `next dev` verwenden? Nein / Ja
36+
Möchten Sie den Import-Alias anpassen? (Standard: `@/*`) Nein / Ja
37+
Welchen Import-Alias möchten Sie konfigurieren? @/*
38+
```
39+
40+
Nach den Eingabeaufforderungen erstellt [`create-next-app`](/docs/app/api-reference/cli/create-next-app) einen Ordner mit Ihrem Projektnamen und installiert die erforderlichen Abhängigkeiten.
41+
42+
## Manuelle Installation
43+
44+
Um manuell eine neue Next.js-App zu erstellen, installieren Sie die erforderlichen Pakete:
45+
46+
```bash filename="Terminal"
47+
npm install next@latest react@latest react-dom@latest
48+
```
49+
50+
Fügen Sie dann die folgenden Skripte zu Ihrer `package.json`-Datei hinzu:
51+
52+
```json filename="package.json"
53+
{
54+
"scripts": {
55+
"dev": "next dev",
56+
"build": "next build",
57+
"start": "next start",
58+
"lint": "next lint"
59+
}
60+
}
61+
```
62+
63+
Diese Skripte beziehen sich auf die verschiedenen Phasen der Anwendungsentwicklung:
64+
65+
- `next dev`: Startet den Entwicklungsserver.
66+
- `next build`: Erstellt die Anwendung für die Produktion.
67+
- `next start`: Startet den Produktionsserver.
68+
- `next lint`: Führt ESLint aus.
69+
70+
<AppOnly>
71+
72+
### Erstellen des `app`-Verzeichnisses
73+
74+
Next.js verwendet Dateisystem-Routing, was bedeutet, dass die Routen in Ihrer Anwendung durch die Struktur Ihrer Dateien bestimmt werden.
75+
76+
Erstellen Sie einen `app`-Ordner. Erstellen Sie dann innerhalb von `app` eine `layout.tsx`-Datei. Diese Datei ist das [Root-Layout](/docs/app/api-reference/file-conventions/layout#root-layout). Es ist erforderlich und muss die `<html>`- und `<body>`-Tags enthalten.
77+
78+
```tsx filename="app/layout.tsx" switcher
79+
export default function RootLayout({
80+
children,
81+
}: {
82+
children: React.ReactNode
83+
}) {
84+
return (
85+
<html lang="en">
86+
<body>{children}</body>
87+
</html>
88+
)
89+
}
90+
```
91+
92+
```jsx filename="app/layout.js" switcher
93+
export default function RootLayout({ children }) {
94+
return (
95+
<html lang="en">
96+
<body>{children}</body>
97+
</html>
98+
)
99+
}
100+
```
101+
102+
Erstellen Sie eine Startseite `app/page.tsx` mit einigen initialen Inhalten:
103+
104+
```tsx filename="app/page.tsx" switcher
105+
export default function Page() {
106+
return <h1>Hello, Next.js!</h1>
107+
}
108+
```
109+
110+
```jsx filename="app/page.js" switcher
111+
export default function Page() {
112+
return <h1>Hello, Next.js!</h1>
113+
}
114+
```
115+
116+
Sowohl `layout.tsx` als auch `page.tsx` werden gerendert, wenn der Benutzer die Wurzel Ihrer Anwendung (`/`) besucht.
117+
118+
<Image
119+
alt="App-Ordnerstruktur"
120+
srcLight="/docs/light/app-getting-started.png"
121+
srcDark="/docs/dark/app-getting-started.png"
122+
width="1600"
123+
height="363"
124+
/>
125+
126+
> **Gut zu wissen**:
127+
>
128+
> - Wenn Sie das Root-Layout vergessen zu erstellen, wird Next.js diese Datei automatisch erstellen, wenn Sie den Entwicklungsserver mit `next dev` starten.
129+
> - Sie können optional ein [`src`-Verzeichnis](/docs/app/api-reference/file-conventions/src-folder) im Stammverzeichnis Ihres Projekts verwenden, um Ihren Anwendungscode von Konfigurationsdateien zu trennen.
130+
131+
</AppOnly>
132+
133+
<PagesOnly>
134+
135+
### Erstellen des `pages`-Verzeichnisses
136+
137+
Next.js verwendet Dateisystem-Routing, was bedeutet, dass die Routen in Ihrer Anwendung durch die Struktur Ihrer Dateien bestimmt werden.
138+
139+
Erstellen Sie ein `pages`-Verzeichnis im Stammverzeichnis Ihres Projekts. Fügen Sie dann eine `index.tsx`-Datei in Ihren `pages`-Ordner hinzu. Dies wird Ihre Startseite (`/`) sein:
140+
141+
```tsx filename="pages/index.tsx" switcher
142+
export default function Page() {
143+
return <h1>Hello, Next.js!</h1>
144+
}
145+
```
146+
147+
```jsx filename="pages/index.js" switcher
148+
export default function Page() {
149+
return <h1>Hello, Next.js!</h1>
150+
}
151+
```
152+
153+
Fügen Sie als Nächstes eine `_app.tsx`-Datei in `pages/` hinzu, um das globale Layout zu definieren. Erfahren Sie mehr über die [benutzerdefinierte App-Datei](/docs/pages/building-your-application/routing/custom-app).
154+
155+
```tsx filename="pages/_app.tsx" switcher
156+
import type { AppProps } from 'next/app'
157+
158+
export default function App({ Component, pageProps }: AppProps) {
159+
return <Component {...pageProps} />
160+
}
161+
```
162+
163+
```jsx filename="pages/_app.js" switcher
164+
export default function App({ Component, pageProps }) {
165+
return <Component {...pageProps} />
166+
}
167+
```
168+
169+
Fügen Sie schließlich eine `_document.tsx`-Datei in `pages/` hinzu, um die initiale Antwort vom Server zu steuern. Erfahren Sie mehr über die [benutzerdefinierte Document-Datei](/docs/pages/building-your-application/routing/custom-document).
170+
171+
```tsx filename="pages/_document.tsx" switcher
172+
import { Html, Head, Main, NextScript } from 'next/document'
173+
174+
export default function Document() {
175+
return (
176+
<Html>
177+
<Head />
178+
<body>
179+
<Main />
180+
<NextScript />
181+
</body>
182+
</Html>
183+
)
184+
}
185+
```
186+
187+
```jsx filename="pages/_document.js" switcher
188+
import { Html, Head, Main, NextScript } from 'next/document'
189+
190+
export default function Document() {
191+
return (
192+
<Html>
193+
<Head />
194+
<body>
195+
<Main />
196+
<NextScript />
197+
</body>
198+
</Html>
199+
)
200+
}
201+
```
202+
203+
</PagesOnly>
204+
205+
### Erstellen des `public`-Ordners (optional)
206+
207+
Erstellen Sie einen [`public`-Ordner](/docs/app/api-reference/file-conventions/public-folder) im Stammverzeichnis Ihres Projekts, um statische Assets wie Bilder, Schriftarten usw. zu speichern. Dateien innerhalb von `public` können dann von Ihrem Code ausgehend von der Basis-URL (`/`) referenziert werden.
208+
209+
Sie können dann auf diese Assets über den Root-Pfad (`/`) zugreifen. Zum Beispiel kann `public/profile.png` als `/profile.png` referenziert werden:
210+
211+
```tsx filename="app/page.tsx" highlight={4} switcher
212+
import Image from 'next/image'
213+
214+
export default function Page() {
215+
return <Image src="/profile.png" alt="Profile" width={100} height={100} />
216+
}
217+
```
218+
219+
```jsx filename="app/page.js" highlight={4} switcher
220+
import Image from 'next/image'
221+
222+
export default function Page() {
223+
return <Image src="/profile.png" alt="Profile" width={100} height={100} />
224+
}
225+
```
226+
227+
## Starten des Entwicklungsservers
228+
229+
1. Führen Sie `npm run dev` aus, um den Entwicklungsserver zu starten.
230+
2. Besuchen Sie `http://localhost:3000`, um Ihre Anwendung zu sehen.
231+
3. Bearbeiten Sie die <AppOnly>`app/page.tsx`</AppOnly><PagesOnly>`pages/index.tsx`</PagesOnly>-Datei und speichern Sie sie, um das aktualisierte Ergebnis in Ihrem Browser zu sehen.
232+
233+
## Einrichten von TypeScript
234+
235+
> Mindestversion von TypeScript: `v4.5.2`
236+
237+
Next.js bietet integrierte Unterstützung für TypeScript. Um TypeScript zu Ihrem Projekt hinzuzufügen, benennen Sie eine Datei in `.ts` / `.tsx` um und führen Sie `next dev` aus. Next.js installiert automatisch die erforderlichen Abhängigkeiten und fügt eine `tsconfig.json`-Datei mit den empfohlenen Konfigurationsoptionen hinzu.
238+
239+
<AppOnly>
240+
241+
### IDE-Plugin
242+
243+
Next.js enthält ein benutzerdefiniertes TypeScript-Plugin und einen Type-Checker, die von VSCode und anderen Code-Editoren für erweiterte Type-Checks und Auto-Vervollständigung verwendet werden können.
244+
245+
Sie können das Plugin in VS Code aktivieren, indem Sie:
246+
247+
1. Die Befehlspalette öffnen (`Strg/⌘` + `Umschalt` + `P`)
248+
2. Nach "TypeScript: Select TypeScript Version" suchen
249+
3. "Use Workspace Version" auswählen
250+
251+
<Image
252+
alt="TypeScript-Befehlspalette"
253+
srcLight="/docs/light/typescript-command-palette.png"
254+
srcDark="/docs/dark/typescript-command-palette.png"
255+
width="1600"
256+
height="637"
257+
/>
258+
259+
</AppOnly>
260+
261+
Weitere Informationen finden Sie auf der [TypeScript-Referenzseite](/docs/app/api-reference/config/next-config-js/typescript).
262+
263+
## Einrichten von ESLint
264+
265+
Next.js bietet integrierte Unterstützung für ESLint. Es installiert automatisch die erforderlichen Pakete und konfiguriert die richtigen Einstellungen, wenn Sie ein neues Projekt mit `create-next-app` erstellen.
266+
267+
Um ESLint manuell zu einem bestehenden Projekt hinzuzufügen, fügen Sie `next lint` als Skript zu `package.json` hinzu:
268+
269+
```json filename="package.json"
270+
{
271+
"scripts": {
272+
"lint": "next lint"
273+
}
274+
}
275+
```
276+
277+
Führen Sie dann `npm run lint` aus, und Sie werden durch den Installations- und Konfigurationsprozess geführt.
278+
279+
```bash filename="Terminal"
280+
npm run lint
281+
```
282+
283+
Sie sehen eine Eingabeaufforderung wie diese:
284+
285+
> ? Wie möchten Sie ESLint konfigurieren?
286+
>
287+
> ❯ Streng (empfohlen)
288+
> Basis
289+
> Abbrechen
290+
291+
- **Streng**: Enthält die Basis-ESLint-Konfiguration von Next.js zusammen mit einem strengeren Core Web Vitals-Regelsatz. Dies ist die empfohlene Konfiguration für Entwickler, die ESLint zum ersten Mal einrichten.
292+
- **Basis**: Enthält die Basis-ESLint-Konfiguration von Next.js.
293+
- **Abbrechen**: Konfiguration überspringen. Wählen Sie diese Option, wenn Sie planen, Ihre eigene benutzerdefinierte ESLint-Konfiguration einzurichten.
294+
295+
Wenn `Streng` oder `Basis` ausgewählt werden, installiert Next.js automatisch `eslint` und `eslint-config-next` als Abhängigkeiten in Ihrer Anwendung und erstellt eine `.eslintrc.json`-Datei im Stammverzeichnis Ihres Projekts, die Ihre ausgewählte Konfiguration enthält.
296+
297+
Sie können jetzt `next lint` jedes Mal ausführen, wenn Sie ESLint ausführen möchten, um Fehler zu finden. Sobald ESLint eingerichtet ist, wird es auch automatisch während jedes Builds (`next build`) ausgeführt. Fehler führen zum Abbruch des Builds, während Warnungen dies nicht tun.
298+
299+
Weitere Informationen finden Sie auf der [ESLint-Plugin-Seite](/docs/app/api-reference/config/next-config-js/eslint).
300+
301+
## Einrichten von absoluten Imports und Modulpfad-Aliassen
302+
303+
Next.js bietet integrierte Unterstützung für die `"paths"`- und `"baseUrl"`-Optionen von `tsconfig.json`- und `jsconfig.json`-Dateien.
304+
305+
Diese Optionen ermöglichen es Ihnen, Projektverzeichnisse auf absolute Pfade zu aliasen, was das Importieren von Modulen einfacher und sauberer macht. Zum Beispiel:
306+
307+
```jsx
308+
// Vorher
309+
import { Button } from '../../../components/button'
310+
311+
// Nachher
312+
import { Button } from '@/components/button'
313+
```
314+
315+
Um absolute Imports zu konfigurieren, fügen Sie die `baseUrl`-Konfigurationsoption zu Ihrer `tsconfig.json`- oder `jsconfig.json`-Datei hinzu. Zum Beispiel:
316+
317+
```json filename="tsconfig.json oder jsconfig.json"
318+
{
319+
"compilerOptions": {
320+
"baseUrl": "src/"
321+
}
322+
}
323+
```
324+
325+
Zusätzlich zur Konfiguration des `baseUrl`-Pfads können Sie die `"paths"`-Option verwenden, um Modulpfade zu `"aliasen"`.
326+
327+
Beispielsweise bildet die folgende Konfiguration `@/components/*` auf `components/*` ab:
328+
329+
```json filename="tsconfig.json oder jsconfig.json"
330+
{
331+
"compilerOptions": {
332+
"baseUrl": "src/",
333+
"paths": {
334+
"@/styles/*": ["styles/*"],
335+
"@/components/*": ["components/*"]
336+
}
337+
}
338+
}
339+
```
340+
341+
Jeder der `"paths"` ist relativ zum `baseUrl`-Speicherort.

0 commit comments

Comments
 (0)