Premiers pas avec Next.js

octobre 22, 2020

À propos de l'auteur

Adebiyi Adedotun Lukman est un ingénieur UI / Frontend basé à Lagos, au Nigeria, qui adore également UI / UX Design par amour des grands logiciels. Quand …
En savoir plus sur
Adebiyi
…

Next.js est un framework React qui est destiné à vous faciliter la vie en tant que développeur React en faisant abstraction des tâches courantes et redondantes (telles que le routage) dans des API relativement plus simples et puissantes. De cette façon, vous pouvez vous concentrer sur l'écriture de vos applications au lieu de réinventer la roue.

Dernièrement, Next.js s'est appelé The React Framework for Production et avec une telle affirmation audacieuse vient une multitude de fonctionnalités qui il propose de vous aider à faire passer vos sites Web React de zéro à la production. Ces fonctionnalités importent moins si Next.js n'est pas relativement facile à apprendre, et si les nombreuses fonctionnalités peuvent signifier plus de choses et de nuances à apprendre, sa tentative de simplicité, de puissance et peut-être de succès dans ce domaine est certainement quelque chose à avoir dans votre arsenal.

Lorsque vous vous installez pour en savoir plus sur Next.js, il y a des choses que vous connaissez peut-être déjà et vous pourriez même être surpris de voir à quel point cela vous donne beaucoup de travail avec cela. peut sembler presque écrasant à première vue. Next.js est allumé pour les sites statiques et il a été bien conçu à cet effet. Mais il va aussi plus loin avec sa Régénération statique incrémentielle qui se combine bien avec les fonctionnalités existantes pour faire du développement une expérience apaisante. Mais attendez, vous pourriez demander. Pourquoi Next.js?

Ce didacticiel sera utile aux développeurs qui cherchent à se familiariser avec Next.js ou qui ont déjà commencé mais qui doivent combler certaines lacunes dans leurs connaissances. Vous n’avez pas besoin d’être un pro dans React, cependant, avoir une expérience de travail avec React vous sera utile.

Mais pourquoi Next.js?

Relativement facile à apprendre.
C’est tout. Si vous avez écrit un React, vous vous retrouverez chez vous avec Next.js. Il vous offre des outils avancés et un support d'API robuste, mais il ne vous oblige pas à les utiliser.
Support CSS intégré.
L'écriture de CSS dans des frameworks pilotés par composants s'accompagne d'un besoin sacro-saint de la «cascade ». C'est pourquoi vous avez des outils CSS-in-JS mais Next.js sort de la boîte avec sa propre offre – styled-jsx et prend également en charge une multitude de méthodologies de style.
Prise en charge automatique de TypeScript.
Si vous aimez coder en TypeScript, avec Next.js, vous disposez littéralement d'un support automatique pour la configuration et la compilation de TypeScript.
Technique de récupération de données multiples.
Il prend en charge SSG et / ou SSR. Vous pouvez choisir d'utiliser l'un ou l'autre, ou les deux.
Routage du système de fichiers.
La navigation d'une page à une autre est prise en charge via le système de fichiers de votre application. Vous n'avez besoin d'aucune bibliothèque spéciale pour gérer le routage.

Il existe de nombreuses autres fonctionnalités, par ex. en utilisant des fonctionnalités ES expérimentales telles que chaînage facultatif et non importation react partout où vous utilisez JSX, prise en charge d'API comme next / head qui aide à gérer la tête de votre document HTML, et ainsi de suite. Il suffit de dire que plus vous allez en profondeur, plus vous appréciez, appréciez et découvrez de nombreuses autres fonctionnalités.

Conditions requises pour créer une application Next.js

La création d'une application Next.js nécessite Node.js ]et npm (ou npx ) installés.

Pour vérifier si Node.js est installé, exécutez la commande dans votre terminal:

 # Il devrait répondre par un numéro de version
nœud -v

Idéalement, npm (et npx) est fourni avec votre installation Node.js. Pour confirmer que vous les avez installés, exécutez les commandes dans votre terminal:

 # Exécutez ceci. Il doit répondre avec un numéro de version
npm -v

# Ensuite, lancez ceci. Il doit également répondre avec un numéro de version
npx -v

Au cas où l'une des commandes ci-dessus ne répondrait pas avec un numéro de version, vous voudrez peut-être examiner l'installation de Node.js et npm .

Si vous préférez le gestionnaire de paquets de fils à la place, vous pouvez lancer l'installer avec la commande:

 # Installe yarn globalement
fil npm i -g

Puis confirmez l'installation avec:

 # Il devrait également répondre avec un numéro de version
fil -v

Création d'une application Next.js

En éliminant les exigences ci-dessus, la création d'un Next.js peut être effectuée de deux manières, la première étant la plus simple:

Avec create-next- app ou
Manuellement

Création d'une application Next.js avec `create-next-app`

L'utilisation de create-next-app est simple et directe, plus vous peut également démarrer avec un démarreur comme Next.js avec Redux Next.js avec Tailwind CSS ou Next.js avec Sanity CMS etc. Vous pouvez afficher la liste complète des démarreurs dans le référentiel d'exemples Next.js .

 # Créer une nouvelle application Next.js avec npx
npx create-next-app 

# Créer une nouvelle application Next.js avec npm
npm create-next-app 

# Avec du fil
yarn create next-app

Si vous vous demandez quelle est la différence entre npm et npx, il y a un article détaillé sur le blog npm, Présentation de npx: an npm package runner .

Création manuelle d'un projet Next.js

Cela nécessite trois packages: next react et react-dom .

 # With npm
npm installer la prochaine réaction react-dom

# Avec du fil
fil ajouter suivant réagir react-dom

Ajoutez ensuite les scripts suivants à package.json .

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

Structure des dossiers

Une chose importante que vous remarquerez peut-être après avoir créé une application Next.js est la structure simplifiée des dossiers. Vous disposez du strict minimum pour exécuter une application Next.js. Ni plus ni moins. Ce que vous obtenez au fur et à mesure de la croissance de votre application dépend plus de vous que du framework.

Les seuls dossiers spécifiques à Next.js sont les pages public et styles dossier.

 # autres fichiers et dossiers, .gitignore, package.json ...
- pages
  - api
    - bonjour.js
  - _app.js
  - index.js
- Publique
  - favicon.ico
  - vercel.svg
- modes
  - globals.css
  - Home.module.css

Pages

Dans une application Next.js, pages est l'un des dossiers spécifiques à Next que vous obtenez. Voici quelques informations sur les pages :

Les pages sont des composants React
Chaque fichier est une page et chaque page est un composant React.


 // Emplacement: /pages/homepage.js
//  n'est qu'un composant de base de React
exporter la page d'accueil par défaut () {
  return  Bienvenue sur Next.js 
}

Pages personnalisées
Il s'agit de pages spéciales précédées d'un trait de soulignement, comme _app.js .

_app.js : il s'agit d'un composant personnalisé qui réside dans le dossier pages . Next.js utilise ce composant pour initialiser les pages.
_document.js : comme _app.js _document.js est un composant personnalisé que Next.js utilise pour augmentez les balises et de vos applications. Ceci est nécessaire car les pages Next.js ignorent la définition du balisage du document environnant.


 Système de routage basé sur des fichiers basé sur des pages 
 Next.js a un système de routage basé sur des fichiers où chaque page devient automatiquement une route basée sur son nom de fichier. Par exemple, une page à  pages / profil  sera située dans  / profile  et  pages / index.js  à  / . [19659067] # Autres dossiers

– pages

  – index.js # situé à /

  – profile.js # situé dans / profile

  – tableau de bord

    – index.js # situé dans / dashboard

    – payments.js # situé dans / dashboard / payments


 Routage 
 Next.js a un système de routage basé sur des fichiers basé sur des pages  . Chaque page créée devient automatiquement un itinéraire. Par exemple,  pages / books.js  deviendra route  /book.js . 
 - pages
  - index.js # url: /
  - books.js # url: / livres
  - profile.js # url: / profile 
 Le routage a conduit à des bibliothèques comme  React Router  et peut être intimidant et assez complexe en raison du grand nombre de façons que vous pourriez juger appropriées pour acheminer une section de vos pages dans votre application Next.js. Parler de routage dans Next.js est assez simple, dans la plupart des cas, le système de routage basé sur les fichiers peut être utilisé pour définir les modèles de routage les plus courants. 
 Index Routes 
 The  pages  ] a automatiquement une page  index.js  qui est automatiquement acheminée vers le point de départ de votre application comme  / . Mais vous pouvez avoir différents  index.js  sur vos pages, mais un dans chaque dossier. Vous n'êtes pas obligé de le faire, mais cela permet de définir le point de départ de vos itinéraires et d'éviter une certaine redondance dans la dénomination. Prenons par exemple cette structure de dossiers: 
 - pages
  - index.js
  - utilisateurs
    - index.js
    - [user] .js 
 Il y a deux itinéraires d'index à  /  et  / users . Il est possible de nommer la route d’indexation dans le dossier  users   users.js  et de l’acheminer vers  / users / users  si cela est lisible et pratique pour vous. Sinon, vous pouvez utiliser la route d'index pour atténuer la redondance. 
 Routes imbriquées 
 Comment structurez-vous votre dossier pour avoir une route comme  / dashboard / user /: id . 
 Vous besoin de dossiers imbriqués: 
 - pages
  - index.js
  - tableau de bord
    - index.js
    - utilisateur
      - [id] .js # id dynamique pour chaque utilisateur 
 Vous pouvez imbriquer et approfondir autant que vous le souhaitez. 
 Segments de route dynamiques 
 Les segments d'une URL ne sont pas toujours indéterminés. Parfois, vous ne pouvez tout simplement pas dire ce qui sera là lors du développement. C'est là qu'interviennent les segments de route dynamiques. Dans le dernier exemple, : id  est le segment dynamique dans l'URL  / dashboard / user /: id . L'identifiant   détermine l'utilisateur qui sera actuellement sur la page. Si vous y réfléchissez, vous pouvez très probablement le créer avec le système de fichiers. 
 La partie dynamique peut apparaître n'importe où dans les routes imbriquées: 
 - pages
  - tableau de bord
    - utilisateur
      - [id] .js
          - profile 
 donnera l'itinéraire  / dashboard / user /: id / profile  qui mène à une page  profile  d'un  utilisateur  avec un  particulier ] id.  
 Imaginez que vous essayez d'accéder à un itinéraire  / news /: category /: category-type /: league /: team  where  category  category -type  league  et  team  sont des segments dynamiques. Chaque segment sera un fichier et les fichiers ne peuvent pas être imbriqués. C'est là que vous aurez besoin d'un  itinéraires fourre-tout  où vous répartissez les parties dynamiques comme: 
 - pages
  - nouvelles
    - [...id] .js 
 Ensuite, vous pouvez accéder à l'itinéraire comme  / news / sport / football / epl / liverpool . 
 Vous vous demandez peut-être comment obtenir les segments dynamiques dans vos composants. Le hook  useRouter exporté depuis  next / router   est réservé à cette fin et à d'autres. Il expose l'objet  router . 
 import {useRouter} from 'next / router';

Exporter la fonction par défaut Post () {
  // useRouter renvoie l'objet routeur
  routeur const = useRouter ();

  console.log ({routeur});
  retour  Nouvelles ;
} 
 Les segments dynamiques sont dans la propriété  query  de l'objet  router  accessible avec  router.query . S'il n'y a pas de requête, la propriété query renvoie un objet vide. 
 Liaison entre les pages 
 La navigation entre les pages de vos applications peut être effectuée avec le composant  Link   exporté par  suivant / lien . Disons que vous avez les pages: 
 - pages
  - index.js
  - profile.js
  - settings.js
  - utilisateurs
    - index.js
    - [user] .js

 Vous pouvez  les lier  comme: 
 importer le lien de "suivant / lien";

Exporter la fonction par défaut Utilisateurs ({utilisateurs) {
  revenir (
    
       Accueil 
       Profil 
      
          Paramètres 
      
      
          Paramètres 
      
      
          Paramètres 
      
    
  )
} 
 Le composant  Link  a un certain nombre d'accessoires acceptables,  href  – l'URL du lien hypertexte – étant le seul requis. Il équivaut à l'attribut  href     de l'élément HTML  anchor ().  
 Les autres accessoires incluent: 



 Prop 
 Default value 
 Description 




 as 
 Identique à  href 
 Indique ce qu'il faut afficher dans la barre d'URL du navigateur. 


 passHref  
 false 
 Force le  Liez le composant  pour transmettre l'accessoire  href  à son enfant./td>[19659125—2012prefetch[19659120[Vrai19659124)PermetàNextjsd'extrairedemanièreproactivelespagesactuellementdanslafenêtreavantmêmequ'elles'


 replace  
 false 
 Remplace l'historique de navigation  actuel  au lieu de pousser une nouvelle URL sur la pile  history . [19659131] scroll  
 true 
 Après navigation, la nouvelle page doit être défilée vers le haut. 


 shallow  
 false 
 Upda Le chemin de la page actuelle sans réexécution  getStaticProps  getServerSideProps ou  getInitialProps permet à la page d'avoir des données périmées si elle est activée. 



 Styling 
 Next.js est livré avec trois méthodes de style prêtes à l'emploi, CSS global, modules CSS et styled-jsx. 
 Il y a un article détaillé sur le style dans Next.js qui a été couvert dans  Comparing Méthodes de style dans Next.js 
 Linting And Formatting 
 Linting and formatting Je soupçonne que c'est un sujet très controversé, mais les mesures empiriques montrent que la plupart des gens qui en ont besoin dans leur base de code JavaScript semblent apprécier la compagnie de  ESLint  et  Prettier . Là où ce dernier formate idéalement, le premier lints votre base de code. Je me suis habitué à  ESLint et Prettier Setup de Wes Bos  parce qu'il étend  eslint-config-airbnb interpole un formatage plus joli via ESLint, inclut des valeurs par défaut sensibles qui fonctionnent principalement (pour moi ), et peut être remplacé si nécessaire. 
 L'inclure dans votre projet Next.js est assez simple. Vous pouvez  l'installer globalement  si vous le souhaitez, mais nous le ferions  localement . 

 Exécutez la commande ci-dessous dans votre terminal. 


 # Cela installera toutes les dépendances homologues requis pour que le package fonctionne
npx install-peerdeps --dev eslint-config-wesbos 


 Créez un fichier  .eslintrc  à la racine de votre application Next.js, à côté des pages   styles  et  dossier public avec le contenu: 

 {
  "étend": [
    "wesbos"
  ]
}

 À ce stade, vous pouvez soit lint et formater votre code manuellement, soit laisser votre éditeur prendre le contrôle. 

 Pour lint et formater manuellement, il faut ajouter deux  scripts npm  lint et  lint: correction . 

 "scripts": {
  "dev": "prochain dev",
  "build": "prochaine build",
  "start": "next start"
  "lint": "eslint.", # Lints et vous montrer les erreurs et les avertissements seuls
  "lint: fix": "eslint. --fix" # Lints et corrections
}, 

 Si vous utilisez  VSCode  et que vous préférez que votre éditeur lint et formate automatiquement, vous devez d'abord installer le plug-in  ESLint VSCode  puis ajouter les commandes suivantes à vos paramètres VSCode: 

 # Autre paramètre
"editor.formatOnSave": vrai,
"[javascript]": {
  "editor.formatOnSave": false
},
"[javascriptreact]": {
  "editor.formatOnSave": false
},
"eslint.alwaysShowStatus": vrai,
"editor.codeActionsOnSave": {
  "source.fixAll": vrai
},
"prettier.disableLanguages": ["javascript", "javascriptreact"],

  Remarque :  Vous pouvez en savoir plus sur la façon de le faire fonctionner avec VSCode sur  ici .  
 Lorsque vous travaillez avec vous, vous aurez probablement besoin pour remplacer certaines configurations, par exemple, j'ai dû désactiver la règle  react / jsx-props-no-spreading  qui génère des erreurs lorsque les accessoires JSX sont étalés comme dans le cas de  pageProps  dans le composant de page personnalisé Next.js,  _app.js . 
 function MyApp ({Component, pageProps}) {
  retour ;
} 
 Désactiver la règle se passe ainsi: 
 {
  "étend": [
    "wesbos"
  ],
  "règles": {
    "react / jsx-props-no-spreading": 0
  }
}

 Actifs statiques 
 À certains ou plusieurs moments de la durée de vie de votre application Next.js, vous allez avoir besoin d'un élément ou d'un autre. Il peut s'agir d'icônes, de polices auto-hébergées ou d'images, etc. Pour Next.js, cela est également connu sous le nom de  Static File Serving  et il existe une seule source de vérité, le dossier  public . La documentation Next.js avertit:  Ne nommez pas le répertoire public   autrement. Le nom ne peut pas être modifié et est le seul répertoire utilisé pour servir les actifs statiques.  
 L'accès aux fichiers statiques est simple. Prenons par exemple la structure des dossiers ci-dessous, 
 - pages
  profile.js
- Publique
  - favicon.ico #url /favicon.ico
  - les atouts
    - polices
      - font-x.woff2
      - font-x.woff # url: /assets/fonts/font-x.woff2
    - images
      - profile-img.png # url: /assets/images/profile-img.png
- modes
  - globals.css

 Vous pouvez accéder à l'image  profile-img.png  à partir du composant  : 

 //  est un composant React
Exporter la fonction par défaut Profile () {
  revenir {
      
        
      
  }
}


 ou les polices du dossier  fonts  dans CSS: 
 / * styles / globals.css * /
@ font-face {
  font-family: 'font-x';
  src: format url (/assets/fonts/font-x.woff2) ('woff2'),
       url (/assets/fonts/font-x.woff) format ('woff');
}

 Récupération de données 
 La récupération de données dans Next.js est un sujet énorme qui nécessite un certain niveau de travail. Ici, nous allons discuter du nœud. Avant de plonger, il y a un besoin précurseur d'avoir une idée de la façon dont Next.js rend ses pages. 
  Le pré-rendu  est une grande partie du fonctionnement de Next.js ainsi que de ce qui le rend vite. Par défaut, Next.js  effectue un pré-rendu  de chaque page en générant chaque page HTML à l'avance avec le JavaScript minimal dont ils ont besoin pour s'exécuter, via un processus appelé Hydratation. 
 C'est possible, bien que peu pratique pour vous. pour désactiver JavaScript et conserver certaines parties du rendu de votre application Next.js. Si jamais vous faites cela, pensez à le faire uniquement à des fins mécaniques pour montrer que Next.js hydrate réellement les pages rendues. 
 Cela étant dit, il existe deux formes de pré-rendu :  

 Static Generation (SG), 
 Rendu côté serveur (SSR). 

 La différence entre les deux réside dans  lorsque les données  sont extraites. Pour SG, les données sont extraites au  au moment de la construction  et réutilisées à chaque requête (ce qui les rend plus rapides car elles peuvent être mises en cache), tandis qu'en SSR, les données sont récupérées à chaque requête. 
 Ce qu'ils ont tous les deux en commun, ils peuvent être mélangés avec  Client-side Rendering 

 wit  fetch  Axios  SWR  React Query  etc. 
 Les deux formes de pré-rendu ne sont pas un cas absolu de l'un ou l'autre; vous pouvez choisir d'utiliser la génération statique ou le rendu côté serveur, ou vous pouvez utiliser un hybride des deux. Autrement dit, alors que certaines parties de votre application Next.js utilisent la génération statique, une autre peut utiliser SSR. 
 Dans les deux cas, Next.js propose des fonctions spéciales pour récupérer vos données. Vous pouvez utiliser l'une des  Approche traditionnelle de la récupération de données dans React  ou vous pouvez utiliser les fonctions spéciales. Il est conseillé d'utiliser les fonctions spéciales, non pas parce qu'elles sont  supposées  spéciales, ni parce qu'elles portent bien leur nom (comme vous le verrez), mais parce qu'elles vous donnent une technique de récupération de données centralisée et familière que vous 
 Les trois fonctions spéciales sont: 

   getStaticProps   – utilisé dans SG lorsque le contenu de votre  page  dépend de données externes. [19659013]  getStaticPaths   – utilisé dans SG lorsque vos chemins de page   dépendent de données externes. 
  getServerSideProps   – utilisé dans le rendu côté serveur. 

 getStaticProps  
  getStaticProps  est un frère de  getStaticPaths  et est utilisé dans Static Generation. Il s'agit d'une fonction asynchrone dans laquelle vous pouvez récupérer des données externes et les renvoyer en tant qu'accessoire au composant par défaut d'une page. Les données sont renvoyées sous la forme d'un objet  props  et correspondent implicitement à l'accessoire du composant d'exportation par défaut sur la page. 
 Dans l'exemple ci-dessous, nous devons mapper les comptes   et affichez-les, le contenu de notre  page  dépend des données externes comme nous l'avons récupéré et résolu dans  getStaticProps . 

 // les comptes sont transmis comme accessoire à  de getStaticProps ( )
// Beaucoup plus comme 
Exporter la fonction par défaut AccountsPage ({accounts}) {
  revenir (
    
       Comptes bancaires 
      {accounts.map ((compte) => (
        
           {account.Description} 
        
      ))}
    
  )
}

Exporter la fonction asynchrone getStaticProps () {
  // Ceci est un vrai point final
  const res = attendre fetch ('https://sampleapis.com/fakebank/api/Accounts');
  comptes const = attendre res.json ();

  revenir {
    accessoires: {
      comptes: accounts.slice (0, 10),
    },
  };
} 

 Comme vous pouvez le voir,  getStaticProps  fonctionne avec Static Generation et renvoie un objet  props d'où son nom. 
 getStaticPaths  
 Similaire à  getStaticProps  getStaticPaths  est utilisé dans la génération statique, mais il est différent en ce que ce sont vos  chemins de page  qui sont dynamiques et non votre contenu de page .  Ceci est souvent utilisé avec  getStaticProps  car il ne renvoie aucune donnée à votre composant lui-même, mais renvoie plutôt les chemins qui doivent être pré-rendus au moment de la construction. Avec la connaissance des chemins, vous pouvez ensuite aller chercher leur contenu de page  correspondant . 
 Pensez à Next.js pré-rendu votre page sous l'aspect d'une page dynamique par rapport à Static Generation . Pour ce faire avec succès au moment de la construction, il doit savoir quels sont les chemins de page. Mais ce n'est pas possible parce qu'ils sont dynamiques et indéterminés, c'est là que  getStaticPaths  entre en jeu. 
 Imaginez que vous ayez une application Next.js avec des pages  States  et  état  qui montre respectivement une liste de pays aux États-Unis et un seul état. Vous pourriez avoir une structure de dossier qui ressemble à: 
 - pages
  - index.js
  - États
    - index.js # url: / states
    - [id] .js # url /states/[19459162 Often.js
 
 Vous créez le [id] .js  pour afficher un seul état basé sur leur  id . Ainsi, le contenu de la page   (données renvoyées par  getStaticProps ) dépendra des chemins de page   (données renvoyées par  getStaticPaths ). 
 Créons d'abord les composants  . 

 // Les états seront passés en tant que prop de getStaticProps
exporter les états de fonction par défaut ({states}) {
  // Nous rendrons les états ici
}

Exporter la fonction asynchrone getStaticProps () {
  // Ceci est un vrai point final.
  const res = attendre fetch (`https: // sampleapis.com / les-états / api / les-états`);
  états const = attendre res.json ();
  
  // Nous renvoyons les états comme accessoire à 
  revenir {
    accessoires: {
      États
    }
  };
} 


 Créons maintenant la page dynamique pour un seul état. C'est la raison pour laquelle nous avons que [id] .js  afin que nous puissions faire correspondre le chemin  / states / 1 ou  / states / 2  où 1 et 2 sont les  id  in [id] .js . 

 // Nous commençons par attendre un état prop de getStaticProps
Exporter l'état de la fonction par défaut ({state}) {
    // Nous rendrons les états ici
}

// getStaticProps a un prop params qui exposera le nom donné au
// chemin dynamique, dans ce cas, ʻid` qui peut être utilisé pour récupérer chaque état par id.
Exporter la fonction asynchrone getStaticProps ({params}) {
  const res = attendre la récupération (
    `https://sampleapis.com/the-states/api/the-states?id=$ {params.id}`
  );
  état const = attendre res.json ();

  revenir {
    accessoires: {
      état: état [0]
    }
  };
} 

 Si vous essayez d'exécuter le code tel quel, vous obtiendrez le message:  Erreur:  getStaticPaths  est requis pour les pages SSG dynamiques et est manquant pour  / states / [id].  

 // Le composant d'état
// fonction getStaticProps
// getStaticPaths
Exporter la fonction asynchrone getStaticPaths () {
  // Récupère la liste des états
  const res = attendre fetch ("https://sampleapis.com/the-states/api/the-states");
  états const = attendre res.json ();

  // Crée un chemin à partir de leurs identifiants: `/ states / 1`,` / states / 2` ...
  chemins const = states.map ((state) => `/ states / $ {state.id}`);

  // Renvoie les chemins, le repli est nécessaire, false signifie que les chemins non reconnus seront
  // rendre une page 404
  return {chemins, repli: faux};
} 

 Avec les chemins   renvoyés de  getStaticPaths  getStaticProps  sera informé et ses  paramètres  seront renseignés avec les valeurs nécessaires , comme le  id  dans ce cas. 

 Importations absolues 
 Il existe un support pour  l'importation absolue  à partir de Next.js 9.4, ce qui signifie que vous n'avez plus besoin d'importer des composants relativement comme : 

 importez FormField à partir de "../../../../../../components/general/forms/formfield"[19659166Oft"àlaplacevouspouvezlefaireabsolumentcomme: import FormField depuis "components / general / forms / formfield"; 
 Pour que cela fonctionne, vous aurez besoin d'un fichier  jsconfig.json  ou  tsconfig.json  pour JavaScript et TypeScript respectivement, avec le contenu suivant: 
 {
  "compilerOptions": {
      "baseUrl": "."
  }
} 

 Cela suppose que le dossier  components  existe à la racine de votre application, aux côtés de  pages, styles  et  public. 

 Experimental ES Features 
 Il est possible d'utiliser certaines fonctionnalités expérimentales comme  Opérateur de fusion nul (??)  et  Chaînage facultatif (?.)  dans votre application Next.js. 
 fonction par défaut d'exportation Utilisateur ( {utilisateur) {
  return  {personne? .nom? .premier ?? 'Sans nom'} 
} 
 Conclusion 
 Selon l'équipe Next.js, bon nombre des objectifs qu'ils se sont fixés étaient ceux énumérés dans les  7 principes des applications Web riches,  et au fur et à mesure de votre progression dans et au plus profond de l'écosystème, vous vous rendrez compte que vous êtes entre de bonnes mains, comme beaucoup d'autres  utilisateurs qui ont choisi d'utiliser Next.js  pour alimenter leurs sites Web / applications Web. Essayez-le, si vous ne l'avez pas fait, et si vous l'avez fait, continuez. 
 Ressources 
 (ks, ra, yk, il) 





 Le meilleur outil 2023 pour ta croissance Instagram ! 











Source link

Premiers pas avec Next.js

À propos de l'auteur

Mais pourquoi Next.js?

Conditions requises pour créer une application Next.js

Création d'une application Next.js

Création d'une application Next.js avec `create-next-app`

Création manuelle d'un projet Next.js

Structure des dossiers

Pages

Bienvenue sur Next.js

Routage

Index Routes

Routes imbriquées

Segments de route dynamiques

Liaison entre les pages

Styling

Linting And Formatting

Actifs statiques

Récupération de données

`getStaticProps`

Comptes bancaires

`getStaticPaths`

Importations absolues

Experimental ES Features

{personne? .nom? .premier ?? 'Sans nom'}

Conclusion

Ressources

Prop	Default value	Description
`as`	Identique à `href`	Indique ce qu'il faut afficher dans la barre d'URL du navigateur.
`passHref`	false	Force le `Liez le composant` pour transmettre l'accessoire `href` à son enfant./td>[19659125—2012prefetch[19659120[Vrai19659124)PermetàNextjsd'extrairedemanièreproactivelespagesactuellementdanslafenêtreavantmêmequ'elles'
`replace`	false	Remplace l'historique de navigation `actuel` au lieu de pousser une nouvelle URL sur la pile `history` . [19659131] scroll	true	Après navigation, la nouvelle page doit être défilée vers le haut.
`shallow`	false	Upda Le chemin de la page actuelle sans réexécution `getStaticProps` `getServerSideProps` ou `getInitialProps` permet à la page d'avoir des données périmées si elle est activée.

À propos de l'auteur

Mais pourquoi Next.js?

Conditions requises pour créer une application Next.js

Création d'une application Next.js

Création d'une application Next.js avec create-next-app

Création manuelle d'un projet Next.js

Structure des dossiers

Pages

Bienvenue sur Next.js

Routage

Index Routes

Routes imbriquées

Segments de route dynamiques

Liaison entre les pages

Styling

Linting And Formatting

Actifs statiques

Récupération de données

getStaticProps

Comptes bancaires

getStaticPaths

Importations absolues

Experimental ES Features

{personne? .nom? .premier ?? 'Sans nom'}

Conclusion

Ressources

Partager :

Création d'une application Next.js avec `create-next-app`

`getStaticProps`

`getStaticPaths`