Catégories
Astuces et Design

Premiers pas avec Next.js – Smashing Magazine

A propos de l'auteur

Adebiyi Adedotun Lukman est un ingénieur UI / Frontend basé à Lagos, au Nigéria, qui adore également UI / UX Design par amour des excellents produits logiciels. Quand …
Plus à propos
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é Le cadre de production React, et avec une telle affirmation audacieuse vient une multitude de fonctionnalités qu'il offre pour vous aider à faire passer vos sites Web React de zéro à la production. Ces fonctionnalités auraient moins d’importance si Next.js n’était pas relativement facile à apprendre, et bien que les nombreuses fonctionnalités puissent signifier plus de choses et de nuances à apprendre, sa tentative de simplicité, de puissance et peut-être le succès est certainement quelque chose à avoir dans votre arsenal.

Au fur et à mesure que vous vous installez pour en savoir plus sur Next.js, il y a certaines 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, 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 également 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 lancer 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?

  1. 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 une prise en charge d'API robuste, mais ne vous oblige pas à les utiliser.
  2. Support CSS intégré.
    L'écriture de CSS dans des frameworks pilotés par composants s'accompagne d'un sacro-saint besoin de «cascade». C’est pourquoi vous avez des outils CSS-in-JS, mais Next.js est livré avec sa propre offre – styled-jsx, et prend également en charge une multitude de méthodologies de style.
  3. Prise en charge automatique de TypeScript.
    Si vous aimez coder en TypeScript, avec Next.js, vous avez littéralement un support automatique pour la configuration et la compilation de TypeScript.
  4. 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.
  5. 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 exemple en utilisant des fonctionnalités ES expérimentales comme le chaînage facultatif, ne pas importer de réagir partout où vous utilisez JSX, prise en charge d'API telles que next/head qui aide à gérer la tête de votre document HTML, et ainsi de suite. Autant 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ée.

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

# It should respond with a version number
node -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:

# Run this. It should respond with a version number
npm -v

# Then run this. It should also respond with a version number
npx -v

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

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

# Installs yarn globally
npm i -g yarn

Puis confirmez l'installation avec:

# It should also respond with a version number
yarn -v

Créer 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:

  1. Avec create-next-app, ou
  2. Manuellement

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

L'utilisation de create-next-app est simple et directe, et vous pouvez également commencer 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 starters dans le référentiel d'exemples Next.js.

# Create a new Next.js app with npx
npx create-next-app 

# Create a new Next.js app with npm
npm create-next-app 

# With yarn
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, Introducing 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 install next react react-dom

# With yarn
yarn add next react react-dom

Ajoutez ensuite les scripts suivants à package.json.

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

Structure des dossiers

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

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

# other files and folders, .gitignore, package.json...
- pages
  - api
    - hello.js
  - _app.js
  - index.js
- public
  - favicon.ico
  - vercel.svg
- styles
  - globals.css
  - Home.module.css

Des pages

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

  • Les pages sont des composants React
    Chaque fichier qu'il contient est un page et chacun page est un composant React.

// Location: /pages/homepage.js
//  is just a basic React component
export default HomePage() {
  return 

Welcome to Next.js

}
  • Pages personnalisées
    Ce sont des pages spéciales préfixées par le 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 augmenter vos applications et Mots clés. Cela 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 dispose d'un système de routage basé sur des fichiers où chaque page devient automatiquement une route en fonction de son nom de fichier. Par exemple, une page à pages/profile sera situé à /profile, et pages/index.js à /.

# Other folders
- pages
  - index.js # located at /
  - profile.js # located at /profile
  - dashboard
    - index.js # located at /dashboard
    - payments.js # located at /dashboard/payments

Routage

Next.js dispose d'un système de routage basé sur des fichiers basé sur 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: /books
  - profile.js # url: /profile

Le routage a conduit à des bibliothèques telles que React Router et peut être intimidant et assez complexe en raison du grand nombre de façons dont vous pourriez juger utile de router la section de vos pages dans votre application Next.js. Parler de routage dans Next.js est assez simple, pour la plupart, le système de routage basé sur les fichiers peut être utilisé pour définir les modèles de routage les plus courants.

Index des itinéraires

le pages le dossier a automatiquement une page index.js qui est automatiquement acheminé vers le point de départ de votre application en tant que /. Mais tu peux avoir différents index.jss 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
  - users
    - index.js
    - (user).js

Il existe deux itinéraires d'index à / et /users. Il est possible de nommer la route d'index dans le users dossier users.js et le faire 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.

Itinéraires imbriqués

Comment structurez-vous votre dossier pour avoir un itinéraire comme /dashboard/user/:id.

Vous avez besoin de dossiers imbriqués:

- pages
  - index.js
  - dashboard
    - index.js
    - user
      - (id).js # dynamic id for each user

Vous pouvez nicher et aller plus loin 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 routage dynamiques. Dans le dernier exemple, :id est le segment dynamique de l'URL /dashboard/user/:id. le id détermine l'utilisateur qui sera actuellement sur la page. Si vous pouvez y réfléchir, vous pouvez probablement le créer avec le système de fichiers.

La pièce dynamique peut apparaître n'importe où dans les itinéraires imbriqués:

- pages
  - dashboard
    - user
      - (id).js
          - profile

donnera la route /dashboard/user/:id/profile ce qui conduit à un profil page d'un utilisateur avec un particulier id.

Imaginez essayer d'accéder à un itinéraire /news/:category/:category-type/:league/:teamcategory, 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 avez besoin d'itinéraires fourre-tout où vous répartissez les parties dynamiques comme:

- pages
  - news
    - (...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 useRouter crochet, exporté de next/router est réservé à cette fin et à d'autres. Il expose le router objet.

import { useRouter } from 'next/router';

export default function Post() {
  // useRouter returns the router object
  const router = useRouter();

  console.log({ router });
  return 
News
; }

Les segments dynamiques sont dans le query propriété de la router objet, accessible avec router.query. S'il n'y a pas de requêtes, 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 Lien composant exporté par next/link. Dites que vous avez les pages:

- pages
  - index.js
  - profile.js
  - settings.js
  - users
    - index.js
    - (user).js

Vous pouvez Link eux comme:

import Link from "next/link";

export default function Users({users) {
  return (
    
  )
}

le Lien le composant a un certain nombre d'accessoires acceptables, href – l'URL du lien hypertexte – était le seul requis. C'est l'équivalent du href attribut de l'ancre HTML () élément.

Les autres accessoires incluent:

Soutenir Valeur par défaut La description
as Pareil que href Indique ce qu'il faut afficher dans la barre d'URL du navigateur.
passHref faux Force le Link composant pour passer le href accessoire à son enfant./td>
prefetch vrai Permet à Next.js d'extraire de manière proactive les pages actuellement dans la fenêtre avant même qu'elles ne soient visitées pour des transitions de page plus rapides.
replace faux Remplace la navigation actuelle history au lieu de pousser une nouvelle URL sur le history empiler.
scroll vrai Après la navigation, la nouvelle page doit défiler vers le haut.
shallow faux Mettre à jour le chemin de la page actuelle sans la réexécuter getStaticProps, getServerSideProps, ou getInitialProps, permet à la page d'avoir des données périmées si elle est activée.

Coiffant

Next.js est livré avec trois méthodes de style prêtes à l'emploi, CSS global, modules CSS et styled-jsx.

Il existe un article complet sur le style dans Next.js qui a été couvert dans Comparaison des méthodes de style dans Next.js

Peluches et formatage

Le peluchage et le formatage sont, je soupçonne, un sujet très avisé, mais les mesures empiriques montrent que la plupart des personnes qui en ont besoin dans leur base de code JavaScript semblent apprécier la compagnie d'ESLint et de 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 car 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 peuvent être remplacées si le besoin s'en fait sentir.

L'inclure dans votre projet Next.js est assez simple. Vous pouvez l'installer globalement si vous le souhaitez, mais nous le ferons localement.

  • Exécutez la commande ci-dessous dans votre terminal.
# This will install all peer dependencies required for the package to work
npx install-peerdeps --dev eslint-config-wesbos
  • Créer un .eslintrc à la racine de votre application Next.js, à côté du pages, styles et public dossier, avec le contenu:
{
  "extends": (
    "wesbos"
  )
}

À ce stade, vous pouvez soit lisser 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:fix.
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
  "lint": "eslint .", # Lints and show you errors and warnings alone
  "lint:fix": "eslint . --fix" # Lints and fixes
},
  • 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:
# Other setting
"editor.formatOnSave": true,
"(javascript)": {
  "editor.formatOnSave": false
},
"(javascriptreact)": {
  "editor.formatOnSave": false
},
"eslint.alwaysShowStatus": true,
"editor.codeActionsOnSave": {
  "source.fixAll": true
},
"prettier.disableLanguages": ("javascript", "javascriptreact"),

Remarque: Vous pouvez en savoir plus sur la façon de le faire fonctionner avec VSCode ici.

Au fur et à mesure que vous travaillez, vous devrez probablement 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 diffusés, comme dans le cas de pageProps dans le composant de page personnalisée Next.js, _app.js.

function MyApp({ Component, pageProps }) {
  return ;
}

Désactiver la règle va ainsi:

{
  "extends": (
    "wesbos"
  ),
  "rules": {
    "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 Service de fichiers statiques et il y a une seule source de vérité, la Publique dossier. La documentation Next.js avertit: Ne nommez pas le public annuaire autre chose. 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. Prenez la structure de dossiers ci-dessous par exemple,

- pages
  profile.js
- public
  - favicon.ico #url /favicon.ico
  - assets
    - fonts
      - font-x.woff2
      - font-x.woff # url: /assets/fonts/font-x.woff2
    - images
      - profile-img.png # url: /assets/images/profile-img.png
- styles
  - globals.css

Vous pouvez accéder au profile-img.png image de la composant:

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

ou les polices dans le polices dossier en CSS:

/* styles/globals.css */
@font-face {
  font-family: 'font-x';
  src: url(/assets/fonts/font-x.woff2) format('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 est indispensable d'avoir une idée de la manière dont Next.js rend ses pages.

Pré-rendu est une grande partie du fonctionnement de Next.js ainsi que de ce qui le rend rapide. Par défaut, Next.js pré-rendus chaque page en générant chaque page HTML à l'avance avec le JavaScript minimal dont elles ont besoin pour s'exécuter, via un processus connu sous le nom d'hydratation.

Il est possible, bien que peu pratique, pour vous de désactiver JavaScript tout en conservant le rendu de certaines parties de votre application Next.js. Si jamais vous faites cela, envisagez de le faire uniquement à des fins mécaniques pour montrer que Next.js hydrate vraiment les pages rendues.

Cela étant dit, il existe deux formes de pré-rendu:

  1. Génération statique (SG),
  2. Rendu côté serveur (SSR).

La différence entre les deux réside dans quand les données ont été récupérées. Pour SG, les données sont récupérées à temps de construction et réutilisé à chaque demande (ce qui le rend plus rapide car il peut être mis en cache), tandis qu'en SSR, les données sont récupérées à chaque demande.

Ce qu'ils ont tous les deux en commun, c'est qu'ils peuvent être mélangés avec Rendu côté client
wit fetch, Axios, SWR, React Query, etc.

Les deux formes de pré-rendu ne sont pas un cas absolu 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 approches traditionnelles 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, pas parce qu’elles sont soi-disant spécial, ni parce qu’ils portent bien leur nom (comme vous le verrez), mais parce qu’ils vous offrent une technique de récupération de données centralisée et familière avec laquelle vous ne pouvez pas vous tromper.

Les trois fonctions spéciales sont:

  1. getStaticProps – utilisé dans SG lorsque votre Contenu de la page dépend de données externes.
  2. getStaticPaths – utilisé dans SG lorsque votre chemins de page dépend de données externes.
  3. getServerSideProps – utilisé dans le rendu côté serveur.

getStaticProps

getStaticProps est un frère de getStaticPaths et est utilisé dans la génération statique. 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 forme de accessoires objet et correspond implicitement à l'accessoire du composant d'exportation par défaut sur la page.

Dans l'exemple ci-dessous, nous devons mapper sur le comptes et affichez-les, notre Contenu de la page dépend des données externes que nous avons récupérées et résolues dans getStaticProps.

// accounts get passed as a prop to  from getStaticProps()
// Much more like 
export default function AccountsPage({accounts}) {
  return (
    

Bank Accounts

{accounts.map((account) => (

{account.Description}

))}
) } export async function getStaticProps() { // This is a real endpoint const res = await fetch('https://sampleapis.com/fakebank/api/Accounts'); const accounts = await res.json(); return { props: { accounts: accounts.slice(0, 10), }, }; }

Comme vous pouvez le voir, getStaticProps fonctionne avec Static Generation et renvoie un accessoires objet, d'où le nom.

getStaticPaths

Semblable à getStaticProps, getStaticPaths est utilisé dans la génération statique mais est différent en ce que c'est votre chemins de page ce n'est pas votre dynamique Contenu de la page. Ceci est souvent utilisé avec getStaticProps car il ne renvoie aucune donnée à votre composant lui-même, il 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 correspondant Contenu de la page.

Pensez au pré-rendu Next.js de votre page sous l'aspect d'une page dynamique en ce qui concerne la génération statique. 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.

Imaginez que vous avez une application Next.js avec des pages States et state qui montre une liste de pays aux États-Unis et un seul État respectivement. Vous pourriez avoir une structure de dossiers qui ressemble à:

- pages
  - index.js
  - states
    - index.js # url: /states
    - (id).js # url /states/(id).js
 

Vous créez le (id).js pour montrer un seul état basé sur leur id. Alors, c'est le Contenu de la page (données renvoyées par getStaticProps) dépendra de la chemins de page (données renvoyées par getStaticPaths).

Créons le les composants en premier.

// The states will be passed as a prop from getStaticProps
export default function States({states}) {
  // We'll render the states here
}

export async function getStaticProps() {
  // This is a real endpoint.
  const res = await fetch(`https://sampleapis.com/the-states/api/the-states`);
  const states = await res.json();
  
  // We return states as a prop to 
  return {
    props: {
      states
    }
  };
}

Créons maintenant la page dynamique pour un seul état. C’est la raison pour laquelle nous avons ça (id).js afin que nous puissions correspondre au chemin /states/1, ou /states/2 où 1 et 2 sont les id dans (id).js.

// We start by expecting a state prop from getStaticProps
export default function State({ state }) {
    // We'll render the states here
}

// getStaticProps has a params prop that will expose the name given to the
// dynamic path, in this case, `id` that can be used to fetch each state by id.
export async function getStaticProps({ params }) {
  const res = await fetch(
    `https://sampleapis.com/the-states/api/the-states?id=${params.id}`
  );
  const state = await res.json();

  return {
    props: {
      state: state(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).

// The state component
// getStaticProps function
// getStaticPaths
export async function getStaticPaths() {
  // Fetch the list of states
  const res = await fetch("https://sampleapis.com/the-states/api/the-states");
  const states = await res.json();

  // Create a path from their ids: `/states/1`, `/states/2` ...
  const paths = states.map((state) => `/states/${state.id}`);

  // Return paths, fallback is necessary, false means unrecognize paths will
  // render a 404 page
  return { paths, fallback: false };
}

Avec le paths retour de getStaticPaths, getStaticProps sera informé et sa params les accessoires seront renseignés avec les valeurs nécessaires, comme id dans ce cas.

Importations absolues

L’importation absolue est prise en charge à partir de Next.js 9.4, ce qui signifie que vous n’avez plus à importer de composants tels que:

import FormField from "../../../../../../components/general/forms/formfield"

au lieu de cela, vous pouvez le faire absolument comme:

import FormField from "components/general/forms/formfield";

Pour que cela fonctionne, vous aurez besoin d'un jsconfig.json ou tsconfig.json fichier pour JavaScript et TypeScript respectivement, avec le contenu suivant:

{
  "compilerOptions": {
      "baseUrl": "."
  }
}

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

Fonctionnalités ES expérimentales

Il est possible d'utiliser certaines fonctionnalités expérimentales telles que l'opérateur de fusion Nullish (??) et le chaînage facultatif (?.) Dans votre application Next.js.

export default function User({user) {
  return 

{person?.name?.first ?? 'No name'}

}

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 que vous vous frayez un chemin dans l'écosystème, vous réaliserez que vous êtes entre de bonnes mains, comme de nombreux 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

Éditorial fracassant(ks, ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *