Installation de Next.js

Avant de commencer, assurez-vous d'avoir installé Node.js et npm. Vous pouvez vérifier s'ils sont installés à l'aide des commandes suivantes :

node -v
npm -v

Si votre système ne prend pas encore en charge Node.js et NPM, vous pouvez consulter notreTutoriel Node.js。

L'utilisation de npm en Chine est très lente. Vous pouvez utiliser l'outil en ligne de commande cnpm personnalisé par Taobao (avec prise en charge de la compression gzip) à la place du npm par défaut :

$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com

Ensuite, vous pouvez utiliser la commande cnpm pour installer des modules :

$ cnpm install [name]

Pour plus d'informations, veuillez consulter :http://npm.taobao.org/。

Utilisez create-react-app pour créer rapidement un environnement de développement Next.js

Next.js fournit un outil officiel de génération de projet, create-next-app, pour configurer rapidement un projet.

create-react-app vient de Facebook. Avec cette commande, nous pouvons rapidement mettre en place un environnement de développement Next.js sans configuration.

Le projet créé automatiquement par create-react-app est basé sur Webpack + ES6.

Exécutez la commande suivante pour créer un projet :

npx create-next-app@latest my-next-app

Pendant l'installation, vous verrez les invites suivantes. Appuyez simplement sur Entrée jusqu'à la fin :

Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

    npx est un outil Node.js permettant d'exécuter des binaires dans des paquets sans les installer globalement.

  • Utilisercreate-next-appl'outil d'échafaudage pour créer un nouveau projet Next.js.
  • my-next-appest le nom du projet. Vous pouvez le remplacer par n'importe quel nom selon vos besoins.
  • Il installera automatiquement les dépendances requises par le projet.

Après avoir exécuté cette commande, create-next-app effectuera automatiquement les opérations suivantes :

  • Créer un dossier nommé my-next-app.
  • Initialiser le projet et installer les dépendances nécessaires.
  • Créer la structure de base du projet, y compris le dossier app, le dossier public, le fichier package.json, etc.

Une fois la création terminée, accédez au répertoire du projet :

cd my-next-app

Dans le répertoire du projet, exécutez la commande suivante pour démarrer le serveur de développement :

npm run dev

Ou si vous utilisez yarn :

yarn dev

Le serveur de développement s'exécute par défaut surhttp://localhost:3000, ouvrez votre navigateur et visitez http://localhost:3000, vous devriez voir la page d'accueil par défaut de Next.js.

Nous pouvons modifier le fichier page.tsx dans le répertoire app. Le code modifié est :

app/page.tsx

export default function Home() {
    return <div>Hello, World!</div>;
}

Visitez http://localhost:3000, le résultat s'affiche comme suit :

Hello, World!

Installer Next.js manuellement

Pour créer manuellement une nouvelle application Next.js, installez d'abord les packages requis :

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

Ensuite, ouvrez votre fichier package.json et ajoutez les scripts suivants :

fichier package.json :

{
  "scripts": {
    "dev": "next dev",        // Démarrer Next.js en mode développement
    "build": "next build",    // Compiler l'application pour une utilisation en production
    "start": "next start",    // Démarrer le serveur de production Next.js
    "lint": "next lint"       // Configurer ESLint intégré à Next.js
  }
}

Ces scripts représentent différentes étapes du développement d'une application :

  • dev: exécuternext dev, qui démarre Next.js en mode développement.
  • build: exécuternext build, qui compile l'application pour la production.
  • start: exécuternext start, qui démarre le serveur de production Next.js.
  • lint: exécuternext lint, qui met en place la configuration ESLint intégrée à Next.js.

Créer le dossier app

Next.js utilise le routage par système de fichiers, ce qui signifie que les routes de l'application sont déterminées par la structure des fichiers.

Créez un dossier app, puis ajoutez un fichier layout.tsx et un fichier page.tsx. Lorsque les utilisateurs visitent le chemin racine de l'application/, ces fichiers seront rendus.

Créer le fichier layout racine

Dansapp/layout.tsxcréez le fichier layout racine dedans, en incluant les<html>et<body>balises :

Exemple

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Créer le fichier de page d'accueil

Enfin, créez un fichier de page d'accueil dans app/page.tsx et ajoutez le contenu initial :

Exemple

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

Notes

  • Si vous oubliez de créerlayout.tsx, Next.js, lors de l'exécution du serveur de développement (next dev), créera automatiquement ce fichier.
  • Vous pouvez éventuellement utiliser, dans le répertoire racine du projet, lesrcrépertoire pour séparer le code de l'application des fichiers de configuration.

Créer le dossier public (facultatif)

Vous pouvez éventuellement créer unpublicdossier dans le répertoire racine du projet pour stocker des ressources statiques, telles que des images, des polices, etc.publicLes fichiers dans le dossier peuvent être référencés via/chemin.

À ce stade, vous avez terminé l'installation et l'initialisation manuelles d'une structure de projet Next.js de base.

Lancer le serveur de développement

Exécutez la commande suivante pour démarrer le serveur de développement :

npm run dev

Visitez http://localhost:3000 pour voir l'application.

Modifiez le fichierapp/page.tsxet enregistrez-le, puis vous pouvez voir le résultat mis à jour dans le navigateur.

Autres extensions