Framework de rendu côté serveur React: Next.js

Source de l'article: Grand camp d'entraînement haut de gamme de Lagou

Next.js est un framework d'application de rendu côté serveur React. Il est utilisé pour créer des applications SPA conviviales pour le référencement.

Prend en charge deux méthodes de pré-rendu, la génération statique et le rendu côté serveur.
Système de routage basé sur les pages, configuration zéro du routage
Fractionnement automatique du code. Optimisez la vitesse de chargement des pages.
Prise en charge de l'exportation statique, vous pouvez exporter l'application en tant que site Web statique.
Bibliothèque CSS-in-JS intégrée styled-jsx
La solution est mature et peut être utilisée dans l'environnement de production, et de nombreuses entreprises dans le monde l'utilisent
Le déploiement d'application est simple, avec son propre environnement de déploiement Vercel, et il peut également être déployé dans d'autres environnements.

Premièrement, créez le projet Next.js

Créé: npm init next-app next-guide
Exécuter: npm run dev
Accès: localhost:3000
installation temporaire create-next- apputilisée pour créer le Next.jsprojet.

2. Système de routage basé sur les pages

1. Créez une page

Dans Next.js, les pages sont des composants React placés dans le dossier pages. Les
composants doivent être exportés par défaut.
React n'a pas besoin d'être inclus dans le fichier du composant.

pages / list.js

export default function List () {
    
    
  return (
    <div>List Page</div>
  )
}

L'adresse d'accès est: l' http://localhost:3000/list
adresse de la page correspond à l'adresse du fichier.

2. Saut de page

Par défaut, le composant Lien utilise JavaScript pour accéder à la page. Autrement dit, le saut sous la forme de SPA.
Si JavaScript est désactivé dans le navigateur, utilisez le lien pour sauter. Le
composant Lien ne doit pas ajouter d'attributs autres que href et les autres attributs sont ajoutés à la balise ci-dessus. Le
composant Lien optimise automatiquement l'application pour de meilleures performances grâce à la fonction de prélecture (en production).

import Link from 'next/link'

export default function Home() {
    
    
  return <div>
    Index Page works
    <Link href="/list"><a>Jump to List Page</a></Link>
  </div>
}

Trois, ressources statiques, métadonnées et CSS

1. Ressources statiques

Le dossier public dans le répertoire racine de l'application est utilisé pour fournir des ressources statiques.

Accès via les formulaires suivants:

public / images / 1.jpg -> /images/1.jpg
public / css / base.css -> /css/base.css

2. Modifier les métadonnées de la page

Modifier les métadonnées via le composant Head

import Head from 'next/head'

<>
  <Head>
    <title>next app</title>
  </Head>
</>

3. Style CSS

3.1 Styled-jsx intégré

Styled-jsx est construit dans Next.js, qui est une bibliothèque CSS-in-JS qui vous permet d'écrire du CSS dans les composants React, et CSS ne fonctionne qu'à l'intérieur des composants.

export default function Home() {
    
    
  return <>
    <Head>
      <title>Index Page</title>
    </Head>
    <div>
      Index Page works
      <Link href="/list"><a className="demo">Jump to List Page</a></Link>
      <img src="/images/1.jpeg" height="100" />
    </div>
    <style jsx>{
    
    `
      .demo {
        color: red
      }
    `}</style>
  </>
}

3.2 Module CSS

En utilisant la fonction de module CSS, il est permis d'écrire le style CSS du composant dans un fichier CSS séparé. Le
nom du fichier de style de convention du module CSS doit être"组件文件名称.module.css"

pages / list.js

import Head from "next/head";
import style from './list.module.css'

export default function List () {
    
    
  return (
    <>
      <Head>
        <title>List Page</title>
      </Head>
      <div className={
    
    style.demo}>List Page</div>
    </>
  )
}

page / list.module.css

.demo {
    
    
  color: green;
  font-size: xx-large;
}

3.3 Fichier de style global

Nouveau dossier de pages dans le _app.jsfichier et ajoutez le code suivant
Créez un dossier de styles dans le répertoire racine du projet et créez-y global.css
Dans _app.js, importez global.css via l'importation.
Redémarrez le serveur de développement

pages / _app.js

import '../styles/globals.css'

function MyApp({
    
     Component, pageProps }) {
    
    
  return <Component {
    
    ...pageProps} />
}

export default MyApp

styles / globals.css

html,
body {
    
    
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  background: tomato;
}

a {
    
    
  color: inherit;
  text-decoration: none;
}

* {
    
    
  box-sizing: border-box;
}

Quatrièmement, pré-rendu

1. Présentation du pré-rendu

Le pré-rendu signifie que l'épissage des données et du HTML est effectué à l'avance côté serveur.
Le pré-rendu peut rendre le référencement plus convivial.
Le pré-rendu apportera une meilleure expérience utilisateur, vous pouvez afficher l'interface utilisateur de l'application sans exécuter JavaScript.

2. Deux formes de pré-rendu

Deux formes de pré-rendu sont prises en charge dans Next.js: la génération statique et le rendu côté serveur.
La génération statique et le rendu côté serveur sont à des moments différents pour générer du HTML.
Génération statique: la génération statique consiste à générer du HTML au moment de la construction. Chaque requête ultérieure partagera le HTML généré lors de la construction.
Rendu côté serveur: le rendu côté serveur consiste à générer du HTML à la demande. Chaque demande régénérera le HTML.

3. Choix de deux méthodes de pré-rendu

Next.js permet aux développeurs de choisir différentes méthodes de pré-rendu pour chaque page. Différentes méthodes de pré-rendu ont des caractéristiques différentes et doivent être rendues en fonction de la scène.
Mais il est recommandé que la plupart des pages utilisent la génération statique.
La génération statique est construite une fois et utilisée à plusieurs reprises, et la vitesse d'accès est rapide, car les pages sont générées à l'avance.
Scénarios applicables: pages marketing, articles de blog, listes de produits e-commerce, aide et documentation.
La vitesse d'accès au rendu côté serveur n'est pas aussi rapide que la génération statique, mais comme chaque requête est restituée, elle convient aux pages avec des données fréquemment mises à jour ou aux pages dont le contenu change avec les requêtes.

4. Génération statique sans données et avec données

Si le composant n'a pas besoin d'obtenir des données d'autres endroits, il est directement généré de manière statique.
Si le composant a besoin d'obtenir des données à partir d'autres endroits, Next.js obtiendra les données requises par le composant à l'avance pendant la construction, puis générera le composant de manière statique.

5. Générez statiquement getStaticProps

La fonction de la méthode getStaticProps est d'obtenir les données nécessaires à la génération statique du composant. Et transmettez les données au composant via des accessoires.
Cette méthode est une fonction asynchrone et doit être exportée à l'intérieur du composant.
En mode développement, getStaticProps est modifié pour s'exécuter à chaque demande.
En mode production, getStaticProps ne sera exécuté qu'au moment de la construction et la méthode getStaticProps ne sera pas exécutée à chaque fois que la page / list est accédée.

pages / list.js

import Head from "next/head";
import style from './list.module.css'
import {
    
     readFile } from "fs";
import {
    
     promisify } from "util";
import {
    
     join } from "path";

const read = promisify(readFile)

export default function List ({
    
    data}) {
    
    
  return (
    <>
      <Head>
        <title>List Page</title>
      </Head>
      <div className={
    
    style.demo}>List Page</div>
      <div>{
    
    data}</div>
    </>
  )
}

export async function getStaticProps () {
    
    
  let data = await read(join(process.cwd(), 'pages', '_app.js'), 'utf-8')
  console.log(data) // 会在 node 环境下输出，这个函数会在构建时运行
  return {
    
    
    props: {
    
    
      data
    }
  }
}

6. Rendu côté serveur getServerSideProps

Si vous utilisez le rendu côté serveur, vous devez exporter la méthode getServerSideProps dans le composant

Remplacez la méthode getStaticProps dans list.js par la méthode getServerSideProps, où getServerSideProps a également un paramètre context.

La méthode getServerSideProps n'est pas exécutée en mode développement.

En mode production: exécutez
pour npm run buildgénérer le dossier .next, vous pouvez voir que la page de liste ne générera pas de page HTML.
Ensuite, exécutez npm startle code qui démarre l'environnement de production, visitez la page / list et la console du nœud affichera l'instruction d'impression dans la méthode getServerSideProps.
Étant donné que getServerSideProps est utilisé, cela signifie que le rendu côté serveur est utilisé au lieu de la génération statique, de sorte que la méthode getServerSideProps sera exécutée pour chaque visite.

6. Génération statique basée sur le routage dynamique

Générez des pages HTML pour les composants de page en fonction de paramètres et générez autant de pages HTML que de paramètres
Lors de la création d'une application, obtenez d'abord tous les paramètres de routage auxquels les utilisateurs peuvent accéder, puis obtenez des données spécifiques basées sur les paramètres de routage, puis générez du HTML statique basé sur les données.

7. Réaliser la génération statique basée sur le routage dynamique

Créez un fichier de composant de page basé sur le routage dynamique, ajoutez [] en dehors du nom du fichier lors de son attribution, tel que [id] .js
Exportez la fonction asynchrone getStaticPaths, qui est utilisée pour obtenir les paramètres de routage auxquels tous les utilisateurs peuvent accéder

export async function getStaticPaths () {
    
    
  // 此处获取所有用户可以访问的路由参数
  return {
    
    
    // 返回固定合适的路由参数
    paths: [{
    
    params: {
    
    id: 1}}, {
    
    params: {
    
    id: 2}}],
    // 当用户访问的路由有参数没有在当前函数中返回时，是否显示 404 页面， false 表示显示， true 表示不显示
    fallback: false
  }
}

Exportez la fonction asynchrone getStaticProps, qui est utilisée pour obtenir des données spécifiques en fonction des paramètres de routage

export async function getStaticProps ({
    
    params}) {
    
    
  // params -> {id: 1}
  // 此处根据路由参数获取具体数据
  return {
    
    
    // 将数据传递到组件中进行静态页面的生成
    props: {
    
    }
  }
}

Remarque: getStaticPaths et getStaticProps ne s'exécutent que côté serveur, ne s'exécutent jamais côté client, ni même intégrés dans le JavaScript côté client, ce qui signifie que vous pouvez écrire du code côté serveur à volonté, par exemple en interrogeant la base de données.

8. Page 404 personnalisée

Pour créer une page 404 personnalisée, vous devez créer un fichier 404.js dans le dossier pages

export default function Error () {
    
    
  return <div>404 ~</div>
}

五、 Routes API

1. Comment implémenter les routes API

Créez un fichier de routes API dans le dossier pages / api. Tels que user.js
La fonction de traitement des requêtes est exportée par défaut dans le fichier, la fonction a deux paramètres, req est l'objet de requête, res est l'objet de réponse

export default function (req, res) {
    
    
  res.status(200).send({
    
    id: 1, name: 'TOM'})
}

Remarque: Actuellement, les routes API peuvent accepter n'importe quelle méthode de requête Http.

Accéder aux routes API: localhost: 3000 / api / user
N'accédez pas aux routes API dans la fonction getStaticPaths ou getStaticProps, car ces deux fonctions sont exécutées côté serveur, vous pouvez écrire directement du code côté serveur.

Six, projet de film

1. Créez un projet

npm init next-app movie
cd movie
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
npm install react-icons
npm install @emotion/babel-preset-css-prop -D
npm install @babel/core
npm run dev

Visite: localhost: 3000

pages / _app.js

// import '../styles/globals.css'

import {
    
     ChakraProvider } from '@chakra-ui/react'
import theme from '@chakra-ui/theme'

function MyApp({
    
     Component, pageProps }) {
    
    
  return <ChakraProvider theme={
    
    theme}>
    <Component {
    
    ...pageProps} />
  </ChakraProvider>
}

export default MyApp

2. Démarrez le service de données

npm install
npm run dev

Adresse IP du service de données: localhost: 3005

Exporter dans le fichier axiosConfig.js baseURL = 'http://localhost:3005'

3. Écrivez le code

4. Générez des fichiers statiques

npm run export
serve out

Visite: localhost: 5000

5. Personnalisez le prochain service

package.json

    "mydev": "nodemon server/index.js",

serveur / index.js

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'

const app = next({
    
    dev})

const handler = app.getRequestHandler()

// prepare 方法是准备一下 next 应用
app.prepare().then(() => {
    
    
  const server = express()

  server.get('/hello', (req, res) => {
    
    
     res.send('Hello Next.js')
  })

  server.get('*', (req, res) => {
    
    
    handler(req, res)
  })

  server.listen(3000, () => console.log('服务器启动成功，请访问: http://localhost:3000'))
})

6. Déployer sur Vercel

J'ai d'abord déployé le service de données sur mon serveur, l'adresse est http://jiailing.com:3005, cette adresse doit être écrite dans le fichier axiosConfig.js et donner la variable baseURL.

Créez ensuite un référentiel sur GitHub et importez le code du projet dans le référentiel GitHub. Connectez-vous ensuite à https://vercel.com/ et sélectionnez ce référentiel GitHub pour le déploiement.