Guide étape par étape pour installer et structurer votre application Next.js pour des performances optimales

Bienvenue dans un nouvel épisode de notre série de tutoriels sur Next.js 14 ! Aujourd'hui, nous plongeons dans les essentiels pour démarrer avec une application Next.js en utilisant le puissant App Router. Notre guide complet vous accompagnera à travers le processus d'installation et vous montrera comment structurer votre application pour des performances optimales.

Ce tutoriel s'adresse à des lecteurs de niveaux variés, donc si vous êtes nouveau sur Next.js ou cherchez à perfectionner vos compétences, vous êtes au bon endroit.

Configuration système requise

Avant de commencer, assurez-vous que votre environnement de développement répond aux prérequis suivants :

• Node.js : Version 18.17 ou ultérieure
• Système d'exploitation : Compatible avec macOS, Windows (y compris WSL) et Linux

Installation automatique

Étape 1 : Créer votre projet

L'une des façons les plus simples de démarrer votre application Next.js est d'utiliser la commande create-next-app, qui automatise le processus de configuration. Ouvrez votre terminal et exécutez :

npx create-next-app@latest

Vous serez invité à répondre à une série de questions pour personnaliser la configuration de votre application :

Quel est le nom de votre projet ? my-app
Souhaitez-vous utiliser TypeScript ? Non / Oui
Souhaitez-vous utiliser ESLint ? Non / Oui
Souhaitez-vous utiliser Tailwind CSS ? Non / Oui
Souhaitez-vous utiliser le répertoire `src/` ? Non / Oui
Souhaitez-vous utiliser App Router ? (recommandé) Non / Oui
Souhaitez-vous personnaliser l'alias d'import par défaut (@/*) ? Non / Oui

Étape 2 : Structure du répertoire

Après avoir répondu aux questions, create-next-app générera votre dossier de projet et installera les dépendances nécessaires. Si vous choisissez d'utiliser l'App Router, la structure de base suivante apparaîtra :

- my-app/
  - app/
    - layout.tsx
    - page.tsx
  - public/
  - package.json
  - tsconfig.json
  - next.config.js

Installation manuelle

Si vous préférez une configuration manuelle ou souhaitez comprendre les mécanismes internes, suivez ces étapes :

Étape 1 : Initialisation du projet

D'abord, créez un répertoire de projet et initialisez-le :

mkdir my-next-app
cd my-next-app
npm init -y

Étape 2 : Installer les dépendances

Ensuite, installez les packages nécessaires :

npm install next@latest react@latest react-dom@latest

Étape 3 : Configuration des scripts

Ajoutez les scripts suivants à votre fichier package.json :

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Voici ce qu'ils font :

• dev : Démarre Next.js en mode développement.
• build : Construit l'application pour la production.
• start : Démarre un serveur Next.js de production.
• lint : Lint votre code avec ESLint.

Création des répertoires

Le répertoire App

L'App Router est le modèle de routage préféré pour les nouvelles applications. Il donne accès aux dernières fonctionnalités de React et offre une façon plus flexible de structurer votre application.

Créez un dossier app et incluez les fichiers layout.tsx et page.tsx :

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      {children}
    </div>
  );
}
 
// app/page.tsx
export default function Page() {
  return (
    <h1>Bonjour, Next.js !</h1>
  );
}

Structurer votre application

Layout racine

Votre layout.tsx doit inclure la structure principale de votre application. Ce Layout racine contiendra les composants enfants rendus.

Page d'accueil

Le page.tsx fonctionne comme votre page d'accueil par défaut, affichant le contenu lorsque l'utilisateur navigue vers le chemin racine (/).

Exécuter le serveur de développement

Une fois que vous avez configuré votre structure de répertoires et vos fichiers, vous pouvez démarrer votre application avec :

npm run dev

Visitez http://localhost:3000 dans votre navigateur pour voir votre application Next.js en direct.

Conclusion

Dans ce guide, nous avons couvert comment installer et configurer une application Next.js 14 avec le nouveau App Router. Cette configuration est conçue pour fournir des performances optimales tout en gardant votre base de code organisée et gérable.

Restez à l'écoute pour notre prochain épisode, où nous plongerons plus profondément dans la construction et la structuration de votre application. Nous explorerons les meilleures pratiques et les techniques avancées pour faire briller votre application Next.js.

Références :

Source : Documentation Next.js