Comment installer Next.js

Instructions étape par étape pour démarrer avec Next.js

Pour installer Next.js, vous devez avoirNode.jsinstallée.

Assurez-vous que vous disposez de la dernière version de Node. Vérifier avec la coursenode -vdans votre terminal et comparez-le à la dernière version LTS répertoriée surhttps://nodejs.org/.

Après avoir installé Node.js, vous aurez lenpmcommande disponible dans votre ligne de commande.

Si vous rencontrez des problèmes à ce stade, je vous recommande les tutoriels suivants que j'ai écrits pour vous:

Maintenant que vous avez mis à jour Node vers la dernière version etnpm, créez un dossier vide où vous le souhaitez, par exemple dans votre dossier de départ, et entrez-y:

mkdir nextjs
cd nextjs

et créez votre premier projet Next

mkdir firstproject
cd firstproject

Maintenant, utilisez lenpmcommande pour l'initialiser en tant que projet Node:

npm init -y

Le-yoption ditnpmpour utiliser les paramètres par défaut d'un projet, en remplissant un échantillonpackage.jsondéposer.

npm init result

Maintenant, installez Next et React:

npm install next react react-dom

Votre dossier de projet devrait maintenant contenir 2 fichiers:

et lenode_modulesdossier.

Ouvrez le dossier du projet à l'aide de votre éditeur préféré. Mon éditeur préféré estCode VS. Si vous l'avez installé, vous pouvez exécutercode .dans votre terminal pour ouvrir le dossier courant dans l'éditeur (si la commande ne fonctionne pas pour vous, voirce)

Ouvertpackage.json, qui a maintenant ce contenu:

{
  "name": "airbnbclone",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies":  {
    "next": "^9.1.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  }
}

et remplacez lescriptssection avec:

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

pour ajouter les commandes de construction Next.js, que nous allons utiliser bientôt.

the package.json file

Créez maintenant unpagesdossier et ajoutez unindex.jsdéposer.

Dans ce fichier, créons notre premier composant React.

Nous allons l'utiliser comme exportation par défaut:

const Index = () => (
  <div>
    <h1>Home page</h1>
  </div>
)

export default Index

Maintenant en utilisant le terminal, exécuteznpm run devpour démarrer le serveur de développement Next.

Cela rendra l'application disponible sur le port 3000, sur localhost.

npm run dev

Ouverthttp://localhost:3000dans votre navigateur pour le voir.

The first Next app screen

Téléchargez mon gratuitManuel Next.js


Plus de prochains tutoriels: