Next.js - Guide rapide

Next.js est un framework basé sur React avec une capacité de rendu côté serveur. C'est très rapide et convivial pour le référencement.

En utilisant Next.js, vous pouvez créer assez facilement une application robuste basée sur les réactions et les tester. Voici les principales fonctionnalités de Next.js.

Hot Code Reload - Le serveur Next.js détecte les fichiers modifiés et les recharge automatiquement.
Automatic Routing- Pas besoin de configurer une URL pour le routage. les fichiers doivent être placés dans le dossier pages. Toutes les URL seront mappées au système de fichiers. La personnalisation peut être effectuée.
Component specific styles - styled-jsx prend en charge les styles globaux et spécifiques aux composants.
Server side rendering - les composants de réaction sont pré-rendus sur le serveur et se chargent donc plus rapidement sur le client.
Node Ecosystem - Next.js réagit bien aux gels basés sur l'écosystème Node.
Automatic code split- Next.js rend les pages avec les bibliothèques dont elles ont besoin. Next.js au lieu de créer un seul gros fichier javascript, crée plusieurs ressources. Lorsqu'une page est chargée, seule la page javascript requise est chargée avec elle.
Prefetch - Next.js fournit un composant Link qui est utilisé pour lier plusieurs composants prend en charge une propriété de prélecture pour pré-lire les ressources de la page en arrière-plan.
Dynamic Components - Next.js permet d'importer dynamiquement des modules JavaScript et des composants React.
Export Static Site - Next.js permet d'exporter un site statique complet depuis votre application web.
Built-in Typescript Support - Next.js est écrit en Typescripts et fournit un excellent support Typescript.

Comme Next.js est un framework basé sur des réactions, nous utilisons l'environnement Node. Maintenant, assurez-vous d'avoirNode.js et npminstallé sur votre système. Vous pouvez utiliser la commande suivante pour installer Next.js -

npm install next react react-dom

Vous pouvez observer la sortie suivante une fois que Next.js est installé avec succès -

+ [email protected]
+ [email protected]
+ [email protected]
added 831 packages from 323 contributors and audited 834 packages in 172.989s

Maintenant, créons un nœud package.json -

npm init

Sélectionnez les valeurs par défaut lors de la création d'un package.json -

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nextjs)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to \Node\nextjs\package.json:
{
   "name": "nextjs",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "next": "^9.4.4",
      "react": "^16.13.1",
      "react-dom": "^16.13.1"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
}
Is this OK? (yes)

Mettez maintenant à jour la section scripts de package.json pour inclure les commandes Next.js.

{
   "name": "nextjs",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "next": "^9.4.4",
      "react": "^16.13.1",
      "react-dom": "^16.13.1"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "next",
      "build": "next build",
      "start": "next start"
   },
   "author": "",
   "license": "ISC"
}

Créez un répertoire de pages.

Créez un dossier pages dans le dossier nextjs et créez un fichier index.js avec le contenu suivant.

function HomePage() {
   return <div>Welcome to Next.js!</div>
}

export default HomePage

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez localhost: 3000 dans un navigateur et vous verrez la sortie suivante.

Dans Next.js, nous pouvons créer des pages et naviguer entre elles à l'aide de la fonction de routage du système de fichiers. Nous utiliseronsLink composant pour avoir une navigation côté client entre les pages.

Dans Next.js, une page est un composant React et est exportée à partir du répertoire de pages. Chaque page est associée à une route en fonction de son nom de fichier. Par exemple

pages/index.js est lié à la route «/».
pages/posts/first.js est lié à la route «/ posts / first» et ainsi de suite.

Mettons à jour le projet nextjs créé dans le chapitre Configuration de l'environnement .

Créez un répertoire de publication et first.js avec le contenu suivant.

export default function FirstPost() {
   return <h1>My First Post</h1>
}

Ajoutez le support de lien pour revenir à la page d'accueil. Mettez à jour first.js comme suit -

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
      </>	  
   )
}

Ajoutez Link Support à la page d'accueil pour accéder à la première page. Mettez à jour index.js comme suit -

import Link from 'next/link'

function HomePage() {
   return (
      <>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
      </>	    
   )
}

export default HomePage

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez localhost: 3000 dans un navigateur et vous verrez la sortie suivante.

Cliquez sur Premier lien et vous verrez la sortie suivante.

Dans Next.js, nous pouvons servir des pages statiques comme des images très facilement en les mettant dans public, un répertoire de premier niveau. Nous pouvons référencer ces fichiers de la même manière que les pages danspages annuaire.

Dans Next.js, une page est un composant React et est exportée à partir du répertoire de pages. Chaque page est associée à une route en fonction de son nom de fichier.

Mettons à jour le projet nextjs utilisé dans le chapitre Pages .

Créez un répertoire public et placez-y toutes les images. Nous avons pris logo.png, l'image du logo TutorialsPoint.

Mettez à jour first.js comme suit -

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
         <br/">
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	  
   )
}

Ici, nous avons ajouté une référence à logo.png dans le fichier index.js.

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez localhost: 3000 dans un navigateur et vous verrez la sortie suivante.

l'annuaire public est également utile en cas de référencement. Il peut être utilisé pour robot.txt, la vérification du site Google ou tout autre élément statique de l'application Web.

Dans Next.js, nous pouvons servir à modifier la section head de chaque page de réaction très facilement à l'aide de <Head> composant de réaction qui est intégré.

Mettons à jour le projet nextjs utilisé dans le chapitre Pages .

Mettez à jour index.js comme suit -

import Link from 'next/link'
import Head from 'next/head'

function HomePage() {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export default HomePage

Mettez à jour first.js comme suit -

import Link from 'next/link'
import Head from 'next/head'

export default function FirstPost() {
   return (
      <>
      <Head>
         <title>My First Post</title>
      </Head>
      <h1>My First Post</h1>
      <h2>
         <Link href="/">
            <a>Home</a>
         </Link>
      </h2>
      </>	  
   )
}

Ici, nous avons ajouté une référence à logo.png dans le fichier index.js.

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez localhost: 3000 dans un navigateur et vous verrez la sortie suivante.

Cliquez sur le lien Première page et vérifiez également le titre modifié dans la page Premier message.

Dans Next.js, nous pouvons utiliser la bibliothèque inbuild css-in-js nommée styled-jsx. Il permet d'écrire du CSS dans un composant react et ces styles seront étendus au composant.

Dans cet exemple, nous allons créer un objet Container qui sera utilisé pour styliser d'autres composants en les contenant.

Mettons à jour le projet nextjs utilisé dans le chapitre Meta Data .

Créez d'abord un répertoire Components au niveau racine et ajoutez un fichier container.module.css comme suit -

.container {
   max-width: 36rem;
   padding: 0 1rem;
   margin: 3rem auto 6rem;
   border: 1px solid red;  
}

Créer un fichier container.js dans le répertoire Components

import styles from './container.module.css'

function Container({ children }) {
   return <div className={styles.container}>{children}</div>
}

export default Container

Utilisez maintenant le composant Container dans first.js.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost() {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
            </h2>
         </Container>
      </>	  
   )
}

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez localhost: 3000 dans un navigateur et accédez au premier message, vous verrez la sortie suivante.

Dans Next.js, créons des styles globaux qui seront appliqués sur toutes les pages.

Dans cet exemple, nous allons créer un style.css qui sera utilisé sur tous les composants en utilisant le composant _app.js.

Mettons à jour le projet nextjs utilisé dans le chapitre Support CSS .

Créez d'abord un répertoire de styles au niveau racine et ajoutez un fichier styles.css comme suit -

html,
body {
   padding: 0;
   margin: 0;
   line-height: 1.6;
   font-size: 18px;
   background-color: lime;
}

* {
   box-sizing: border-box;
}

a {
   color: #0070f3;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

img {
   max-width: 100%;
   display: block;
}

Créer le fichier _app.js dans le répertoire des pages

import '../styles/styles.css'

export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />
}

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez localhost: 3000 dans un navigateur et vous verrez la sortie suivante.

Cliquez sur le lien Premier message.

Dans Next.js, nous savons qu'il génère du HTML pour une page appelée pré-rendu. Next.JS prend en charge deux types de pré-rendu.

Static Generation- Cette méthode génère la page HTML au moment de la construction. Ce HTML pré-rendu est envoyé à chaque demande. Cette méthode est utile pour le marketing de sites Web, de blogs, de produits de commerce électronique répertoriant des sites Web, des aides, des sites Web de documentation.
Server Side Generation- Cette méthode génère la page HTML à chaque demande. Cette méthode convient lorsque le contenu d'une page html peut varier avec chaque demande.

Pré-rendu par page

Next.JS permet de définir une méthode de pré-rendu pour chaque page où la plupart des pages suivent la génération statique et d'autres pages utiliseront le rendu côté serveur.

Génération statique sans données

La génération statique peut être effectuée sans données, auquel cas, les pages HTML seront prêtes sans qu'il soit nécessaire de pré-extraire les données, puis de démarrer le rendu. Les données peuvent être récupérées plus tard ou sur demande. Cette technique aide à montrer à l'utilisateur une interface utilisateur sans aucune donnée au cas où les données prennent du temps à venir.

Génération statique avec des données

La génération statique peut être effectuée avec des données, auquel cas les pages HTML ne seront pas prêtes tant que les données ne seront pas récupérées, car HTML peut dépendre des données. Chaque composant a une méthode spécialegetStaticProps qui peut être utilisé pour récupérer des données et passer des données en tant qu'accessoires de la page afin que la page puisse rendre les données en accord avec les accessoires passés.

La fonction getStaticProps () s'exécute au moment de la construction en production et s'exécute pour chaque requête en mode développement.

Créons un exemple pour démontrer la même chose.

Dans cet exemple, nous allons créer une page de mise à jour index.js et first.js pour créer un appel de serveur pour obtenir des données.

Mettons à jour le projet nextjs utilisé dans le chapitre Global CSS Support .

Mettez à jour le fichier index.js dans le répertoire pages pour utiliser la méthode getServerSideProps (). Cette méthode sera appelée par requête.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Mettez à jour le fichier first.js dans le répertoire pages pour utiliser la méthode getStaticProps (). Cette méthode sera appelée une fois.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
               <Link href="/">
                  <a>Home</a>
               </Link>
               <div>Next stars: {props.stars}</div>
            </h2>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez localhost: 3000 dans un navigateur et vous verrez la sortie suivante.

Cliquez sur le lien Premier message.

Next.js utilise un routeur basé sur le système de fichiers. Chaque fois que nous ajoutons une page àpagesrépertoire, il est automatiquement disponible via url. Voici les règles de ce routeur.

Index Routes- Un fichier index.js présent dans un dossier correspond à la racine du répertoire. Par exemple -
- pages / index.js correspond à '/'.
- pages / posts / index.js correspond à «/ posts».
Nested Routes- Toute structure de dossier imbriquée dans le répertoire de pages car l'URL du routeur automatiquement. Par exemple -
- pages / settings / dashboard / about.js correspond à '/ settings / dashboard / about'.
- pages / posts / first.js correspond à '/ posts / first'.
Dynamic Routes- Nous pouvons également utiliser un paramètre nommé pour faire correspondre l'url. Utilisez des crochets pour le même. Par exemple -
- pages / posts / [id] .js correspond à «/ posts /: id» où nous pouvons utiliser une URL comme «/ posts / 1».
- pages / [user] /settings.js correspond à '/ posts /: user / settings' où nous pouvons utiliser une URL comme '/ abc / settings'.
- pages / posts / [... all] .js correspond à '/ posts / *' où nous pouvons utiliser n'importe quelle URL comme '/ posts / 2020 / jun /'.

Lien de page

Next.JS permet de lier des pages côté client à l'aide du composant Link react. Il a les propriétés suivantes -

href- nom de la page dans le répertoire des pages. Par exemple/posts/first qui fait référence à first.js présent dans le répertoire pages / posts.

Créons un exemple pour démontrer la même chose.

Dans cet exemple, nous mettrons à jour la page index.js et first.js pour créer un appel de serveur pour obtenir des données.

Mettons à jour le projet nextjs utilisé dans le chapitre Global CSS Support .

Mettez à jour le fichier index.js dans le répertoire pages comme suit.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first">> <a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez localhost: 3000 dans un navigateur et vous verrez la sortie suivante.

Cliquez sur le lien Premier message.

Dans Next.js, nous pouvons créer des routes de manière dynamique. Dans cet exemple, nous allons créer des pages à la volée et leur routage.

Step 1. Define [id].js file- [id] .js représente la page dynamique où id sera le chemin relatif. Définissez ce fichier dans le répertoire pages / post.
Step 2. Define lib/posts.js- posts.js représente les identifiants et le contenu. Le répertoire lib doit être créé dans le répertoire racine.

[id] .js

Mettez à jour le fichier [id] .js avec la méthode getStaticPaths () qui définit les chemins et la méthode getStaticProps () pour obtenir le contenu basé sur id.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

import { getAllPostIds, getPostData } from '../../lib/posts'

export default function Post({ postData }) {
   return (
      <Container>
         {postData.id}
         <br />
         {postData.title}
         <br />
         {postData.date}
      </Container>
   )
}
export async function getStaticPaths() {
   const paths = getAllPostIds()
   return {
      paths,
      fallback: false
   }
}

export async function getStaticProps({ params }) {
   const postData = getPostData(params.id)
      return {
      props: {
         postData
      }
   }
}

posts.js

posts.js contient getAllPostIds () pour obtenir les identifiants et getPostData () pour obtenir le contenu correspondant.

export function getPostData(id) {
   const postOne = {
      title: 'One',
      id: 1,
      date: '7/12/2020'
   }

   const postTwo = {
      title: 'Two',
      id: 2,
      date: '7/12/2020'
   }
   if(id == 'one'){
      return postOne;
   }else if(id == 'two'){
      return postTwo;
   }  
}

export function getAllPostIds() {
   return [{
      params: {
         id: 'one'
      }
   },
   {
      params: {
         id: 'two'
      }
   }
];
}

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez localhost: 3000 / posts / one dans un navigateur et vous verrez la sortie suivante.

Ouvrez localhost: 3000 / posts / two dans un navigateur et vous verrez la sortie suivante.

Dans Next.js, nous utilisons jusqu'à présent le composant Link react pour naviguer d'une page à l'autre. Il existe également un moyen programmatique pour obtenir la même chose en utilisant le composant Router. Généralement, le composant Router est utilisé avec les balises html.

Mettez à jour le fichier index.js dans le répertoire pages comme suit.

import Router from 'next/router'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <span onClick={() => Router.push('/posts/one')}>First Post</span>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez localhost: 3000 dans un navigateur et vous verrez la sortie suivante.

Cliquez sur Premier message qui n'est pas un lien mais qui est cliquable.

Dans Next.js, le routage superficiel fait référence à la navigation vers la même page, mais aucun appel aux méthodes getServerSideProps, getStaticProps et getInitialProps.

Pour effectuer un routage peu profond, nous utilisons Router avec le drapeau shallow comme vrai. Voir l'exemple ci-dessous.

Mettez à jour le fichier index.js dans le répertoire pages comme suit.

import Router from 'next/router'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <span onClick={() => Router.push('/?counter=1', undefined, { shallow: true })}>Reload</span>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez localhost: 3000 dans un navigateur, puis cliquez sur le lien Recharger et vous verrez la sortie suivante.

API Routes est un moyen de créer une API de repos à l'aide de Next.js. Next.js mappe tout fichier présent dans/pages/apidossier et sera traité comme point final de l'API. Un exemple de fonction API -

export default (req, res) => {
   ...
}

Voici quelques points importants à considérer.

req - req est une instance de http.IncomingMessage et est utilisée pour obtenir des données à partir de request.
res - res est une instance de http.ServerResponse et est utilisé pour envoyer des données en réponse.

Créons un exemple pour démontrer la même chose.

Dans cet exemple, nous allons créer un user.js dans pages/api annuaire.

Mettons à jour le projet nextjs utilisé dans le chapitre Global CSS Support .

Créez le fichier user.js dans le répertoire pages / api comme suit.

export default (req, res) => {
   res.statusCode = 200
   res.setHeader('Content-Type', 'application/json')
   res.end(JSON.stringify({ name: 'Robert' }))
}

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez localhost: 3000 / api / user dans un navigateur et vous verrez la sortie suivante.

{"name":"Robert"}

Les itinéraires d'API dans Next.JS ont des middlewares intégrés qui aident à analyser la demande entrante.

Voici les middlewares

req.cookies- l'objet cookies contient les cookies envoyés par la demande. La valeur par défaut est {}.
req.query- l'objet de requête contient la chaîne de requête. La valeur par défaut est {}.
req.body- l'objet de requête contient le corps de la requête analysé à l'aide de 'content-type'. La valeur par défaut est nulle.

Créons un exemple pour démontrer la même chose.

Dans cet exemple, nous allons mettre à jour un user.js dans pages/api annuaire.

Mettons à jour le projet nextjs utilisé dans le chapitre API Routes .

Créez le fichier user.js dans le répertoire pages / api comme suit.

export default (req, res) => {
   res.statusCode = 200
   res.setHeader('Content-Type', 'application/json')
   res.end(JSON.stringify({ query: req.query }))
}

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez http: // localhost: 3000 / api / user? Counter = 1 dans un navigateur et vous verrez la sortie suivante.

{"query":{"counter":"1"}}

res object ont express.js comme des méthodes d'assistance pour faciliter le développement pour créer des services.

Voici les méthodes d'aide à la réponse

res.status(code)- Ces méthodes définissent l'état de la réponse. Le code transmis doit être un état HTTP valide.
req.json(json)- Cette méthode renvoie une réponse JSON. json passé doit être un objet JSON valide.
req.send(body)- Cette méthode envoie une réponse HTTP. La réponse peut être une chaîne, un objet ou un tampon.

Créons un exemple pour démontrer la même chose.

Dans cet exemple, nous allons mettre à jour un user.js dans pages/api annuaire.

Mettons à jour le projet nextjs utilisé dans le chapitre API Routes .

Créez le fichier user.js dans le répertoire pages / api comme suit.

export default (req, res) => {
   res.status(200).json({ name: 'Robert' });
}

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez http: // localhost: 3000 / api / user dans un navigateur et vous verrez la sortie suivante.

{ name: 'Robert' }

Next.js, a un excellent support pour dactylographié. Voici quelques étapes pour activer le typographie dans le projet.

Créer tsconfig.json

Créez tsconfig.json dans le répertoire racine. Nous le gardons vide au départ. Démarrez maintenant le serveur.

Next.JS détectera tsconfig.json et affichera le message suivant sur la console.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install typescript, @types/react, and @types/node by running:

        npm install --save-dev typescript @types/react @types/node

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files).
...

Installer dactylographié

Exécutez la commande npm install pour installer dactylographié et les bibliothèques associées.

npm install --save-dev typescript @types/react @types/node
...

+ @types/[email protected]
+ @types/[email protected]
+ [email protected]
added 5 packages from 72 contributors and audited 839 packages in 27.538s
...

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
We detected TypeScript in your project and created a tsconfig.json file for you.


Your tsconfig.json has been populated with default values.

event - compiled successfully
wait  - compiling...
event - compiled successfully

Ouvrez tsconfig.json

Le serveur NextJS a modifié le tsconfig.json.

{
   "compilerOptions": {
      "target": "es5",
      "lib": [
         "dom",
         "dom.iterable",
         "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "strict": false,
      "forceConsistentCasingInFileNames": true,
      "noEmit": true,
      "esModuleInterop": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "jsx": "preserve"
   },
   "exclude": [
      "node_modules"
   ],
   "include": [
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx"
   ]
}

Créez hello.ts

Créez hello.ts dans le répertoire pages / api qui agira comme un service de repos pour nous.

import { NextApiRequest, NextApiResponse } from 'next'

export default (_: NextApiRequest, res: NextApiResponse) => {
   res.status(200).json({ text: 'Welcome to TutorialsPoint' })
}

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez localhost: 3000 / api / hello dans un navigateur et vous verrez la sortie suivante.

{"text":"Welcome to TutorialsPoint"}

Next.js prend en charge la publication de variables d'environnement dans le nœud que nous pouvons utiliser pour nous connecter au serveur, à la base de données, etc. Pour cela, nous devons créer un fichier .env.local dans le répertoire racine. Nous pouvons également créer .env.production.

Créer .env.local

Créez .env.local dans le répertoire racine avec le contenu suivant.

DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs

Créer env.js

Créez une page nommée env.js avec le contenu suivant dans le répertoire pages / posts où nous utiliserons les variables d'environnement en utilisant process.env.

import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>Environment Variables</title>
            </Head>
            <h1>Database Credentials</h1>
               <p>Host: {props.host}</p>
               <p>Username: {props.username}</p>
               <p>Password: {props.password}</p>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   // Connect to Database using DB properties
   return {
      props: { 
         host: process.env.DB_HOST,
         username: process.env.DB_USER,
         password: process.env.DB_PASS
      }
   }
}

Démarrez maintenant le serveur.

Next.JS détectera .env.local et affichera le message suivant sur la console.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
wait  - compiling...
event - compiled successfully
event - build page: /posts/env
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez localhost: 3000 / posts / env dans un navigateur et vous verrez la sortie suivante.

Jusqu'à présent, nous avons développé et exécuté l'exemple d'application NEXT.JS en mode dev, nous allons maintenant effectuer le déploiement prêt pour la production localement en utilisant les étapes suivantes.

npm run build - Construisez la version prête pour la production et hautement optimisée.
npm run start - Démarrez le serveur.

La version prête pour la production manque de cartes sources et de rechargement de code à chaud par rapport au mode de développement car ces fonctionnalités sont principalement utilisées dans le débogage.

Préparer la construction

Exécutez la commande suivante pour préparer la version prête pour la production -.

npm run build

> [email protected] build \Node\nextjs
> next build

info  - Loaded env from \Node\nextjs\.env.local
Creating an optimized production build

Compiled successfully.

Automatically optimizing pages

Page                                                           Size     First Load JS
+ ? /                                                          2.25 kB        60.3 kB
+   /_app                                                      288 B          58.1 kB
+        /404                                                       3.25 kB   61.3 kB
+ ? /api/user
+ ? /posts/[id]                                                312 B          61.6 kB
+   + /posts/one
+   + /posts/two
+ ? /posts/env                                                 2.71 kB        60.8 kB
+ ? /posts/first                                               374 B          61.7 kB
+ First Load JS shared by all                                  58.1 kB
  + static/pages/_app.js                                       288 B
  + chunks/3458401054237127135bcd3ee8eb2a19d67af299.a1a019.js  10.5 kB
  + chunks/framework.c6faae.js                                 40 kB
  + runtime/main.60464f.js                                     6.54 kB
  + runtime/webpack.c21266.js                                  746 B
  + css/9706b5b8ed8e82c0fba0.css                               175 B

?  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
          (Static)  automatically rendered as static HTML (uses no initial props)
?  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

Démarrez le serveur

Exécutez la commande suivante pour démarrer le serveur de production -.

npm run start

> [email protected] start \Node\nextjs
> next start

info  - Loaded env from \Node\nextjs\.env.local
ready - started server on http://localhost:3000

Vérifier la sortie

Ouvrez localhost: 3000 / api / user dans un navigateur et vous verrez la sortie suivante.

{"name":"Robert"}

NEXT.JS fournit une CLI pour démarrer, créer et exporter une application. Il peut être appelé en utilisant npx qui vient avec npm 5.2.

Aide CLI

Pour obtenir la liste des commandes CLI et obtenir de l'aide sur celles-ci, tapez la commande suivante.

npx next -h
   Usage
      $ next <command>

   Available commands
      build, start, export, dev, telemetry

   Options
      --version, -v   Version number
      --help, -h      Displays this message

   For more information run a command with the --help flag
      $ next build --help

Construire une version prête pour la production

Tapez la commande suivante.

npx next build
info  - Loaded env from D:\Node\nextjs\.env.local
Creating an optimized production build

Compiled successfully.

Automatically optimizing pages

Page                                                           Size     First Load JS
+ ? /                                                          2.25 kB        60.3 kB
+   /_app                                                      288 B          58.1 kB
+        /404                                                       3.25 kB   61.3 kB
+ ? /api/user
+ ? /posts/[id]                                                312 B          61.6 kB
+   + /posts/one
+   + /posts/two
+ ? /posts/env                                                 2.71 kB        60.8 kB
+ ? /posts/first                                               374 B          61.7 kB
+ First Load JS shared by all                                  58.1 kB
  + static/pages/_app.js                                       288 B
  + chunks/ab55cb957ceed242a750c37a082143fb9d2f0cdf.a1a019.js  10.5 kB
  + chunks/framework.c6faae.js                                 40 kB
  + runtime/main.60464f.js                                     6.54 kB
  + runtime/webpack.c21266.js                                  746 B
  + css/9706b5b8ed8e82c0fba0.css                               175 B

?  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
          (Static)  automatically rendered as static HTML (uses no initial props)
?  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

Créer et démarrer le serveur de développement

Tapez la commande suivante.

npx next dev

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully

Démarrez le serveur de production

Tapez la commande suivante.

npx next start

info  - Loaded env from \Node\nextjs\.env.local
ready - started server on http://localhost:3000

↰ Previous page

Next.js - Guide rapide

Créez un répertoire de pages.

Démarrez le serveur Next.js

Vérifier la sortie

Démarrez le serveur Next.js

Vérifier la sortie

Démarrez le serveur Next.js

Vérifier la sortie

Démarrez le serveur Next.js

Vérifier la sortie

Démarrez le serveur Next.js

Vérifier la sortie

Démarrez le serveur Next.js

Vérifier la sortie

Pré-rendu par page

Génération statique sans données

Génération statique avec des données

Démarrez le serveur Next.js

Vérifier la sortie

Lien de page

Démarrez le serveur Next.js

Vérifier la sortie

[id] .js

posts.js

Démarrez le serveur Next.js

Vérifier la sortie

Démarrez le serveur Next.js

Vérifier la sortie

Démarrez le serveur Next.js

Vérifier la sortie

Démarrez le serveur Next.js

Vérifier la sortie

Démarrez le serveur Next.js

Vérifier la sortie

Démarrez le serveur Next.js

Vérifier la sortie

Créer tsconfig.json

Installer dactylographié

Démarrez le serveur Next.js

Ouvrez tsconfig.json

Créez hello.ts

Démarrez le serveur Next.js

Vérifier la sortie

Créer .env.local

Créer env.js

Vérifier la sortie

Préparer la construction

Démarrez le serveur

Vérifier la sortie

Aide CLI

Construire une version prête pour la production

Créer et démarrer le serveur de développement

Démarrez le serveur de production

Routes d'API Next.js

Caractéristiques de Next.js

Next.js Divers

Routage Next.js

Tutoriel Next.js

Ressources utiles Next.js