Skip to content

Commit a426b6a

Browse files
xiaoyu2erxiaoyu2er
committed
docs: update documentation translations
1 parent 3a12067 commit a426b6a

File tree

368 files changed

+54411
-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

+54411
-0
lines changed

‎apps/docs/content/fr/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:03:23.405Z
4+
title: Comment configurer un nouveau projet Next.js
5+
nav_title: Installation
6+
description: Créez une nouvelle application Next.js avec l'interface CLI `create-next-app`, et configurez TypeScript, ESLint et les alias de module.
7+
---
8+
9+
{/* Le contenu de ce document est partagé entre le routeur App et Pages. Vous pouvez utiliser le composant `<PagesOnly>Contenu</PagesOnly>` pour ajouter du contenu spécifique au routeur Pages. Tout contenu partagé ne doit pas être encapsulé dans un composant. */}
10+
11+
## Configuration système requise
12+
13+
Avant de commencer, assurez-vous que votre système répond aux exigences suivantes :
14+
15+
- [Node.js 18.18](https://nodejs.org/) ou version ultérieure.
16+
- macOS, Windows (y compris WSL), ou Linux.
17+
18+
## Installation automatique
19+
20+
Le moyen le plus rapide de créer une nouvelle application Next.js est d'utiliser [`create-next-app`](/docs/app/api-reference/cli/create-next-app), qui configure tout automatiquement pour vous. Pour créer un projet, exécutez :
21+
22+
```bash filename="Terminal"
23+
npx create-next-app@latest
24+
```
25+
26+
Lors de l'installation, vous verrez les invites suivantes :
27+
28+
```txt filename="Terminal"
29+
Quel est le nom de votre projet ? my-app
30+
Souhaitez-vous utiliser TypeScript ? Non / Oui
31+
Souhaitez-vous utiliser ESLint ? Non / Oui
32+
Souhaitez-vous utiliser Tailwind CSS ? Non / Oui
33+
Souhaitez-vous placer votre code dans un répertoire `src/` ? Non / Oui
34+
Souhaitez-vous utiliser le routeur App ? (recommandé) Non / Oui
35+
Souhaitez-vous utiliser Turbopack pour `next dev` ? Non / Oui
36+
Souhaitez-vous personnaliser l'alias d'importation (`@/*` par défaut) ? Non / Oui
37+
Quel alias d'importation souhaitez-vous configurer ? @/*
38+
```
39+
40+
Après les invites, [`create-next-app`](/docs/app/api-reference/cli/create-next-app) créera un dossier avec le nom de votre projet et installera les dépendances nécessaires.
41+
42+
## Installation manuelle
43+
44+
Pour créer manuellement une nouvelle application Next.js, installez les paquets requis :
45+
46+
```bash filename="Terminal"
47+
npm install next@latest react@latest react-dom@latest
48+
```
49+
50+
Ensuite, ajoutez les scripts suivants à votre fichier `package.json` :
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+
Ces scripts correspondent aux différentes étapes du développement d'une application :
64+
65+
- `next dev` : Démarre le serveur de développement.
66+
- `next build` : Construit l'application pour la production.
67+
- `next start` : Démarre le serveur de production.
68+
- `next lint` : Exécute ESLint.
69+
70+
<AppOnly>
71+
72+
### Créer le répertoire `app`
73+
74+
Next.js utilise le routage par système de fichiers, ce qui signifie que les routes de votre application sont déterminées par la structure de vos fichiers.
75+
76+
Créez un dossier `app`. Ensuite, à l'intérieur de `app`, créez un fichier `layout.tsx`. Ce fichier est le [layout racine](/docs/app/api-reference/file-conventions/layout#root-layout). Il est obligatoire et doit contenir les balises `<html>` et `<body>`.
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+
Créez une page d'accueil `app/page.tsx` avec un contenu initial :
103+
104+
```tsx filename="app/page.tsx" switcher
105+
export default function Page() {
106+
return <h1>Bonjour, Next.js !</h1>
107+
}
108+
```
109+
110+
```jsx filename="app/page.js" switcher
111+
export default function Page() {
112+
return <h1>Bonjour, Next.js !</h1>
113+
}
114+
```
115+
116+
Les fichiers `layout.tsx` et `page.tsx` seront rendus lorsque l'utilisateur visitera la racine de votre application (`/`).
117+
118+
<Image
119+
alt="Structure du dossier App"
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+
> **Bon à savoir** :
127+
>
128+
> - Si vous oubliez de créer le layout racine, Next.js créera automatiquement ce fichier lors de l'exécution du serveur de développement avec `next dev`.
129+
> - Vous pouvez optionnellement utiliser un [dossier `src`](/docs/app/api-reference/file-conventions/src-folder) à la racine de votre projet pour séparer le code de votre application des fichiers de configuration.
130+
131+
</AppOnly>
132+
133+
<PagesOnly>
134+
135+
### Créer le répertoire `pages`
136+
137+
Next.js utilise le routage par système de fichiers, ce qui signifie que les routes de votre application sont déterminées par la structure de vos fichiers.
138+
139+
Créez un répertoire `pages` à la racine de votre projet. Ensuite, ajoutez un fichier `index.tsx` dans votre dossier `pages`. Ce sera votre page d'accueil (`/`) :
140+
141+
```tsx filename="pages/index.tsx" switcher
142+
export default function Page() {
143+
return <h1>Bonjour, Next.js !</h1>
144+
}
145+
```
146+
147+
```jsx filename="pages/index.js" switcher
148+
export default function Page() {
149+
return <h1>Bonjour, Next.js !</h1>
150+
}
151+
```
152+
153+
Ensuite, ajoutez un fichier `_app.tsx` dans `pages/` pour définir le layout global. En savoir plus sur le [fichier App personnalisé](/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+
Enfin, ajoutez un fichier `_document.tsx` dans `pages/` pour contrôler la réponse initiale du serveur. En savoir plus sur le [fichier Document personnalisé](/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+
### Créer le dossier `public` (optionnel)
206+
207+
Créez un [dossier `public`](/docs/app/api-reference/file-conventions/public-folder) à la racine de votre projet pour stocker les ressources statiques telles que les images, polices, etc. Les fichiers à l'intérieur de `public` peuvent ensuite être référencés par votre code à partir de l'URL de base (`/`).
208+
209+
Vous pouvez ensuite référencer ces ressources en utilisant le chemin racine (`/`). Par exemple, `public/profile.png` peut être référencé comme `/profile.png` :
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="Profil" 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="Profil" width={100} height={100} />
224+
}
225+
```
226+
227+
## Exécuter le serveur de développement
228+
229+
1. Exécutez `npm run dev` pour démarrer le serveur de développement.
230+
2. Visitez `http://localhost:3000` pour voir votre application.
231+
3. Modifiez le fichier <AppOnly>`app/page.tsx`</AppOnly><PagesOnly>`pages/index.tsx`</PagesOnly> et enregistrez-le pour voir le résultat mis à jour dans votre navigateur.
232+
233+
## Configurer TypeScript
234+
235+
> Version minimale de TypeScript : `v4.5.2`
236+
237+
Next.js inclut un support intégré de TypeScript. Pour ajouter TypeScript à votre projet, renommez un fichier en `.ts` / `.tsx` et exécutez `next dev`. Next.js installera automatiquement les dépendances nécessaires et ajoutera un fichier `tsconfig.json` avec les options de configuration recommandées.
238+
239+
<AppOnly>
240+
241+
### Plugin IDE
242+
243+
Next.js inclut un plugin TypeScript personnalisé et un vérificateur de types, que VSCode et d'autres éditeurs de code peuvent utiliser pour une vérification de types avancée et une auto-complétion.
244+
245+
Vous pouvez activer le plugin dans VS Code en :
246+
247+
1. Ouvrant la palette de commandes (`Ctrl/⌘` + `Shift` + `P`)
248+
2. Recherchant "TypeScript : Sélectionner la version de TypeScript"
249+
3. Sélectionnant "Utiliser la version de l'espace de travail"
250+
251+
<Image
252+
alt="Palette de commandes TypeScript"
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+
Consultez la page [Référence TypeScript](/docs/app/api-reference/config/next-config-js/typescript) pour plus d'informations.
262+
263+
## Configurer ESLint
264+
265+
Next.js inclut ESLint intégré. Il installe automatiquement les paquets nécessaires et configure les paramètres appropriés lorsque vous créez un nouveau projet avec `create-next-app`.
266+
267+
Pour ajouter manuellement ESLint à un projet existant, ajoutez `next lint` comme script à `package.json` :
268+
269+
```json filename="package.json"
270+
{
271+
"scripts": {
272+
"lint": "next lint"
273+
}
274+
}
275+
```
276+
277+
Ensuite, exécutez `npm run lint` et vous serez guidé à travers le processus d'installation et de configuration.
278+
279+
```bash filename="Terminal"
280+
npm run lint
281+
```
282+
283+
Vous verrez une invite comme celle-ci :
284+
285+
> ? Comment souhaitez-vous configurer ESLint ?
286+
>
287+
> ❯ Strict (recommandé)
288+
> Base
289+
> Annuler
290+
291+
- **Strict** : Inclut la configuration de base ESLint de Next.js ainsi qu'un ensemble de règles plus strictes pour les Core Web Vitals. C'est la configuration recommandée pour les développeurs configurant ESLint pour la première fois.
292+
- **Base** : Inclut la configuration de base ESLint de Next.js.
293+
- **Annuler** : Ignorer la configuration. Choisissez cette option si vous prévoyez de configurer votre propre configuration ESLint personnalisée.
294+
295+
Si `Strict` ou `Base` sont sélectionnés, Next.js installera automatiquement `eslint` et `eslint-config-next` comme dépendances dans votre application et créera un fichier `.eslintrc.json` à la racine de votre projet qui inclut votre configuration sélectionnée.
296+
297+
Vous pouvez maintenant exécuter `next lint` chaque fois que vous souhaitez exécuter ESLint pour détecter les erreurs. Une fois ESLint configuré, il s'exécutera également automatiquement lors de chaque construction (`next build`). Les erreurs feront échouer la construction, tandis que les avertissements ne le feront pas.
298+
299+
Consultez la page [Plugin ESLint](/docs/app/api-reference/config/next-config-js/eslint) pour plus d'informations.
300+
301+
## Configurer les imports absolus et les alias de module
302+
303+
Next.js prend en charge nativement les options `"paths"` et `"baseUrl"` des fichiers `tsconfig.json` et `jsconfig.json`.
304+
305+
Ces options vous permettent d'aliasser les répertoires du projet vers des chemins absolus, rendant l'importation de modules plus facile et plus propre. Par exemple :
306+
307+
```jsx
308+
// Avant
309+
import { Button } from '../../../components/button'
310+
311+
// Après
312+
import { Button } from '@/components/button'
313+
```
314+
315+
Pour configurer les imports absolus, ajoutez l'option `baseUrl` à votre fichier `tsconfig.json` ou `jsconfig.json`. Par exemple :
316+
317+
```json filename="tsconfig.json ou jsconfig.json"
318+
{
319+
"compilerOptions": {
320+
"baseUrl": "src/"
321+
}
322+
}
323+
```
324+
325+
En plus de configurer le chemin `baseUrl`, vous pouvez utiliser l'option `"paths"` pour `"aliasser"` les chemins de module.
326+
327+
Par exemple, la configuration suivante mappe `@/components/*` vers `components/*` :
328+
329+
```json filename="tsconfig.json ou jsconfig.json"
330+
{
331+
"compilerOptions": {
332+
"baseUrl": "src/",
333+
"paths": {
334+
"@/styles/*": ["styles/*"],
335+
"@/components/*": ["components/*"]
336+
}
337+
}
338+
}
339+
```
340+
341+
Chacun des `"paths"` est relatif à l'emplacement `baseUrl`.

0 commit comments

Comments
 (0)