Fondamentaux React - Installation de Next.js

Lorsque vous utilisez Next.js dans votre projet, vous n'avez plus besoin de charger les scripts react et react-dom depuis unpkg.com. À la place, vous pouvez installer ces packages localement en utilisant npm ou votre gestionnaire de paquets préféré.

Remarque : Pour utiliser Next.js, vous devez avoir Node.js version 18.17.0 ou supérieure installée sur votre machine (voir les exigences de version minimale), vous pouvez le télécharger ici.

Pour ce faire, créez un nouveau fichier dans le même répertoire que votre fichier index.html, appelé package.json avec un objet vide {}.

package.json

{}

Dans votre terminal, exécutez la commande suivante à la racine de votre projet :

Terminal

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

Une fois l'installation terminée, vous devriez voir les dépendances de votre projet listées dans votre fichier package.json :

package.json

{
  "dependencies": {
    "next": "^14.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

Ne vous inquiétez pas si vous avez des versions plus récentes que celles affichées ci-dessus, tant que vous avez les packages next, react et react-dom installés, vous êtes prêt.

Vous remarquerez également un nouveau fichier appelé package-lock.json qui contient des informations détaillées sur les versions exactes de chaque package.

Revenons au fichier index.html, vous pouvez supprimer le code suivant :

Les balises <html> et <body>.
L'élément <div> avec l'id app.
Les scripts react et react-dom puisque vous les avez installés avec NPM.
Le script Babel car Next.js dispose d'un compilateur qui transforme le JSX en JavaScript valide que les navigateurs peuvent comprendre.
La balise <script type="text/jsx">.
Les méthodes document.getElementById() et ReactDom.createRoot().
La partie React. de la fonction React.useState(0).

Après avoir supprimé les lignes ci-dessus, ajoutez l'import suivant en haut de votre fichier :

index.html

import { useState } from 'react';

Votre code devrait ressembler à ceci :

index.html

import { useState } from 'react';
 
function Header({ title }) {
  return <h1>{title ? title : 'Titre par défaut'}</h1>;
}
 
function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  const [likes, setLikes] = useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return (
    <div>
      <Header title="Développer. Prévisualiser. Livrer." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
 
      <button onClick={handleClick}>J'aime ({likes})</button>
    </div>
  );
}

Le seul code restant dans le fichier HTML est du JSX, vous pouvez donc changer le type de fichier de .html à .js ou .jsx.

Création de votre première page

Next.js utilise le routage par système de fichiers. Cela signifie qu'au lieu d'utiliser du code pour définir les routes de votre application, vous pouvez utiliser des dossiers et des fichiers.

Voici comment créer votre première page dans Next.js :

Créez un nouveau dossier appelé app et déplacez le fichier index.js à l'intérieur.
Renommez votre fichier index.js en page.js. Ce sera la page principale de votre application.
Ajoutez export default à votre composant <HomePage> pour aider Next.js à identifier quel composant afficher comme composant principal de la page.

app/page.js

import { useState } from 'react';
 
function Header({ title }) {
  return <h1>{title ? title : 'Titre par défaut'}</h1>;
}
 
export default function HomePage() {
  // ...
}

Lancement du serveur de développement

Ensuite, lançons votre serveur de développement pour voir les modifications sur votre nouvelle page pendant le développement. Ajoutez un script "next dev" à votre fichier package.json :

package.json

{
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "next": "^14.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

Vérifiez ce qui se passe en exécutant npm run dev dans votre terminal. Vous remarquerez deux choses :

Lorsque vous naviguez vers localhost:3000, vous devriez voir l'erreur suivante :

Message d'erreur Next.js : Vous importez un composant qui nécessite useState. Cela ne fonctionne que dans un composant Client...

C'est parce que Next.js utilise les Composants Serveur React, une nouvelle fonctionnalité qui permet à React de s'exécuter côté serveur. Les Composants Serveur ne prennent pas en charge useState, vous devrez donc utiliser un Composant Client à la place.

Dans le prochain chapitre, nous discuterons des principales différences entre les Composants Serveur et Client et corrigerons cette erreur.

Un nouveau fichier appelé layout.js a été automatiquement créé dans le dossier app. Il s'agit de la mise en page principale de votre application. Vous pouvez l'utiliser pour ajouter des éléments d'interface utilisateur partagés entre toutes les pages (par exemple, navigation, pied de page, etc.).

/app/layout.js

export const metadata = {
  title: 'Next.js',
  description: Généré par Next.js,
};
 
export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body>{children}</body>
    </html>
  );
}

Résumé

En regardant la migration jusqu'à présent, vous commencez peut-être déjà à percevoir les avantages de l'utilisation de Next.js :

Vous avez supprimé les scripts React et Babel ; un avant-goût des outils et configurations complexes dont vous n'avez plus à vous soucier.
Vous avez créé votre première page.

Lecture supplémentaire :

Fondamentaux du routage Next.js

Définition des routes

Pages et mises en page

Installation de Next.js

Création de votre première page

Lancement du serveur de développement

Résumé

On this page