Qu'est-ce que NextJS? Créez votre première application NextJS

Qu'est-ce que NextJS?

NextJS est un framework permettant de construire tout type d’application React. Il est spécialisé dans le rendu des composants côté serveur (SSR), mais il supporte aussi la génération statique (SSG). De ce fait l’application peut être facilement hébergée sur différents types de services, sur un SI, depuis un serveur web HTTP (pour le rendu SSG) jusqu’à un serveur NodeJS pour le rendu des composants côtés serveur.

Pourquoi utiliser NextJS?

NextJS est un framework qui facilite la création d'applications Web avec JavaScript. C'est également un excellent moyen de commencer à découvrir les dernières fonctionnalités de JavaScript.

NextJS présente de nombreux avantages tels que:

C'est facile à apprendre et à utiliser,
Il est rapide et léger,
Il a une large communauté; Il est basé sur React,
NextJS fournit un moyen simple d'utiliser le routage et la navigation dans votre application,
Il a une excellente documentation, et
Il offre aux développeurs un moyen simple de travailler à la fois sur le code client et sur le code serveur.

Quels sont les pré-requis?

Pour créer une application avec NextJS, vous avez besoin d'installer ces outils:

NodeJS: Installer Nodejs et NPM
NPM ou Yarn
Create Next App.

Create Next App

La façon la plus simple de démarrer avec Next.js est d'utiliser create-next-app. Cet outil CLI vous permet de commencer rapidement la création d'une nouvelle application Next.js, avec tout ce qui a été mis en place pour vous. Vous pouvez créer une nouvelle application en utilisant le modèle par défaut de Next.js, ou en utilisant l'un des exemples officiels de Next.js. Pour commencer, utilisez la commande suivante :

npx create-next-app@latest
# ou
yarn create next-app
# ou
pnpm create next-app

Vous pouvez créer un projet TypeScript avec l'option --ts, --typescript :

npx create-next-app@latest --ts
# ou
yarn create next-app --typescript
# ou
pnpm create next-app --ts

Créer un nouveau projet NextJS

Pour utiliser Create Next App, nous devons d'abord ouvrir notre terminal ou ligne de commande sur notre ordinateur.

$ npx create-next-app premier-projet
Need to install the following packages:
  create-next-app
Ok to proceed? (y) y
Creating a new Next.js app in /Users/<path>/tutorials/premier-projet-nextjs/premier-projet.

Using yarn.

Installing dependencies:
- react
- react-dom
- next

yarn add v1.22.18

Cette commande crée un dossier appelé premier-projet le nom de notre application, npx installe automatique create-next-app, si vous ne l'avez pas encore sur votre machine.

Voici le résultat de la commande

Ouvrez le projet avec votre éditeur de code préféré , moi j’utilise Visual studio code: cd premier-projet voici la structure d'un projet NextJS.

À quoi servent chacun de ces fichiers et dossiers ?

README.md est un fichier markdown qui comprend de nombreux conseils et liens utiles qui peuvent vous aider à apprendre à utiliser Create Next App.

node_modules est un dossier qui inclut tout le code lié aux dépendances que Create React App a installé. Vous n'aurez jamais besoin d'aller dans ce dossier.

package.json qui gère les dépendances de notre application et ce qui est inclus dans notre dossier node_modules pour notre projet, ainsi que les scripts dont nous avons besoin pour exécuter notre application.

.gitignore est un fichier utilisé pour exclure des fichiers et des dossiers du suivi par Git. Nous ne voulons pas inclure de grands dossiers tels que le dossier node_modules.

public est un dossier que nous pouvons utiliser pour stocker nos actifs statiques, tels que des images, des svgs et des polices pour notre application Next.

styles est un dossier que nous pouvons utiliser pour stocker nos ficher css ou scss.

pages dans Next.js, une page est un composant React exporté depuis un fichier .js, .jsx, .ts ou .tsx dans le dossier pages. Chaque page est associée à une route(un url) en fonction de son nom de fichier.

Exemple : Si vous créez pages/about.js qui exporte un composant React comme ci-dessous, il sera accessible à /about.

function About() {
  return <div>About</div>
}

export default About

Pour tester notre application, nous allons utiliser npm dev ou yarn dev. cette commande va démarrer directement le serveur de développement de NextJS.

$ yarn dev
yarn run v1.22.18
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 847 ms (172 modules)

Rendez-vous sur http://localhost:3000/, que ce que vous remarquez?

Modifiez le contenu et enregistrez votre code. le serveur va redémarrer automatiquement. NextJs a le hot reloading intégré. J'ai modifié le code comme suit:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Premier projet Next</title>
        <meta name='description' content='Generated by create next app' />
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>Premier projet NextJS</h1>

        <p className={styles.description}>J&#39;aime NextJS</p>
      </main>
    </div>
  )
}

Voici le résultat :