Reactサーバーサイドレンダリングフレームワーク：Next.js

記事の出典：Lagouの大きなフロントエンドの高給トレーニングキャンプ

Next.jsは、Reactサーバー側レンダリングアプリケーションフレームワークであり、SEO対応のSPAアプリケーションを構築するために使用されます。

静的生成とサーバー側レンダリングの2つの事前レンダリング方法をサポートします。
ページベースのルーティングシステム、ルーティングゼロ構成
自動コード分割。ページの読み込み速度を最適化します。
静的エクスポートをサポートします。アプリケーションを静的Webサイトとしてエクスポートできます。
組み込みのCSS-in-JSライブラリstyled-jsx
このソリューションは成熟しており、実稼働環境で使用でき、世界中の多くの企業が使用しています。
アプリケーションのデプロイはシンプルで、独自のデプロイメント環境Vercelを備えており、他の環境にもデプロイできます。

1つは、Next.jsプロジェクトを作成する

作成：npm init next-app next-guide
実行：npm run dev
アクセス：プロジェクトの作成に使用されるlocalhost:3000
一時的なインストール。create-next- appNext.js

2.ページベースのルーティングシステム

1.ページを作成します

Next.jsでは、ページはpagesフォルダーに配置されたReactコンポーネントです。
コンポーネントはデフォルトでエクスポートする必要があります。Reactを
コンポーネントファイルに含める必要はありません。

pages / list.js

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

アクセスアドレスは次のとおりです。http://localhost:3000/list
ページアドレスはファイルアドレスに対応します。

2.ページジャンプ

デフォルトでは、LinkコンポーネントはJavaScriptを使用してページにジャンプします。つまり、SPAの形式でジャンプします。
ブラウザでJavaScriptが無効になっている場合は、リンクを使用してジャンプします
。Linkコンポーネントはhref以外の属性を追加しないでください。属性、および残りの属性は上記のタグに追加されます。
リンクコンポーネントは、プリフェッチ（本番環境）機能を介してアプリケーションを自動的に最適化し、最高のパフォーマンスを実現します。

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>
}

3つ、静的リソース、メタデータ、CSS

1.静的リソース

アプリケーションのルートディレクトリにあるパブリックフォルダは、静的リソースを提供するために使用されます。

次のフォームからアクセスします。

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

2.ページのメタデータを変更します

Headコンポーネントを介してメタデータを変更する

import Head from 'next/head'

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

3.CSSスタイル

3.1組み込みのstyled-jsx

Styled-jsxはNext.jsに組み込まれています。これは、ReactコンポーネントでCSSを記述できるCSS-in-JSライブラリであり、CSSはコンポーネント内でのみ機能します。

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.2CSSモジュール

CSSモジュール関数を使用することにより、コンポーネントのCSSスタイルを別のCSSファイルに書き込むことができます
。CSSモジュールの規則スタイルファイル名は、"组件文件名称.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グローバルスタイルファイル

_app.jsファイル内の新しいページフォルダに次のコードを追加します
プロジェクトのルートディレクトリにstylesフォルダーを作成し、その中にglobal.cssを作成します
_app.jsで、importを使用してglobal.cssをインポートします。
開発サーバーを再起動します

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;
}

第四に、事前レンダリング

1.事前レンダリングの概要

事前レンダリングとは、サーバー側でデータとHTMLのスプライシングが事前に完了することを意味します。
事前レンダリングにより、SEOがより使いやすくなります。
事前レンダリングにより、ユーザーエクスペリエンスが向上し、JavaScriptを実行せずにアプリケーションUIを表示できます。

2.2つの形式の事前レンダリング

Next.jsでは、静的生成とサーバー側レンダリングの2つの形式の事前レンダリングがサポートされています。
静的生成とサーバー側レンダリングは、HTMLを生成するタイミングが異なります。
静的生成：静的生成は、ビルド時にHTMLを生成することです。以降のすべてのリクエストは、ビルド中に生成されたHTMLを共有します。
サーバー側のレンダリング：サーバー側のレンダリングは、要求されたときにHTMLを生成することです。すべてのリクエストはHTMLを再生成します。

3.2つの事前レンダリング方法の選択

Next.jsを使用すると、開発者はページごとに異なる事前レンダリング方法を選択できます。異なる事前レンダリング方法にはさまざまな特性があり、シーンに応じてレンダリングする必要があります。
ただし、ほとんどのページで静的生成を使用することをお勧めします。
静的生成は一度作成されて繰り返し使用され、ページが事前に生成されるため、アクセス速度が速くなります。
該当するシナリオ：マーケティングページ、ブログ投稿、eコマース製品リスト、ヘルプ、およびドキュメント。
サーバー側のレンダリングアクセス速度は静的生成ほど高速ではありませんが、各リクエストが再レンダリングされるため、データが頻繁に更新されるページや、リクエストによってコンテンツが変更されるページに適しています。

4.データなしおよびデータありの静的生成

コンポーネントが他の場所からデータを取得する必要がない場合は、静的に直接生成されます。
コンポーネントが他の場所からデータを取得する必要がある場合、Next.jsは構築中にコンポーネントに必要なデータを事前に取得し、コンポーネントを静的に生成します。

5.getStaticPropsを静的に生成します

getStaticPropsメソッドの機能は、コンポーネントの静的生成に必要なデータを取得することです。そして、小道具を介してデータをコンポーネントに渡します。
このメソッドは非同期関数であり、コンポーネント内にエクスポートする必要があります。
開発モードでは、getStaticPropsはすべてのリクエストで実行されるように変更されます。
本番モードでは、getStaticPropsはビルド時にのみ実行され、getStaticPropsメソッドは/ listページにアクセスするたびに実行されるわけではありません。

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.サーバー側のレンダリングgetServerSideProps

サーバー側のレンダリングを使用する場合は、コンポーネントでgetServerSidePropsメソッドをエクスポートする必要があります

list.jsのgetStaticPropsメソッドをgetServerSidePropsメソッドに変更します。ここで、getServerSidePropsにはコンテキストのパラメーターもあります。

getServerSidePropsメソッドは開発モードでは実行されません。

本番モードの場合：
実行しnpm run buildて.nextフォルダーを生成すると、リストページがHTMLページを生成しないことがわかります。
次にnpm start、本番環境を開始するコードを実行し、/ listページにアクセスすると、ノードコンソールがgetServerSidePropsメソッドにprintステートメントを出力します。
getServerSidePropsが使用されるため、静的生成の代わりにサーバー側のレンダリングが使用されることを意味します。したがって、getServerSidePropsメソッドは訪問ごとに実行されます。

6.動的ルーティングに基づく静的生成

パラメータに基づいてページコンポーネントのHTMLページを生成し、パラメータと同じ数のHTMLページを生成します
アプリケーションを構築するときは、最初にユーザーがアクセスできるすべてのルーティングパラメーターを取得し、次にルーティングパラメーターに基づいて特定のデータを取得し、次にそのデータに基づいて静的HTMLを生成します。

7.動的ルーティングに基づく静的生成を実現します

動的ルーティングに基づいてページコンポーネントファイルを作成し、ファイル名の外に[id] .jsなどの[]を追加します。
すべてのユーザーがアクセスできるルーティングパラメーターを取得するために使用される非同期関数getStaticPathsをエクスポートします

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

ルーティングパラメータに基づいて特定のデータを取得するために使用される非同期関数getStaticPropsをエクスポートします

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

注：getStaticPathsとgetStaticPropsはサーバー側でのみ実行され、クライアント側では実行されません。また、クライアント側のJavaScriptにパッケージ化されることもあります。つまり、データベースのクエリなど、サーバー側のコードを自由に記述できます。

8.カスタム404ページ

カスタム404ページを作成するには、pagesフォルダーに404.jsファイルを作成する必要があります

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

五、APIルート

1.APIルートを実装する方法

pages / apiフォルダーにAPIルートファイルを作成します。user.jsなど
リクエスト処理関数はデフォルトでファイルにエクスポートされます。この関数には2つのパラメータがあり、reqはリクエストオブジェクト、resはレスポンスオブジェクトです。

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

注：現在、APIルートは任意のHttpリクエストメソッドを受け入れることができます。

APIルートへのアクセス：localhost：3000 / api / user
getStaticPathsまたはgetStaticProps関数でAPIルートにアクセスしないでください。これらの2つの関数はサーバー側で実行されるため、サーバー側のコードを直接記述できます。

6、映画プロジェクト

1.プロジェクトを作成します

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

訪問：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.データサービスを開始します

npm install
npm run dev

データサービスアドレスIP：localhost：3005

axiosConfig.jsファイルにエクスポートします baseURL = 'http://localhost:3005'

3.コードを書く

4.静的ファイルを生成します

npm run export
serve out

訪問：localhost：5000

5.次のサービスをカスタマイズする

package.json

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

server / 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.Vercelにデプロイする

最初にデータサービスをサーバーにデプロイしました。アドレスはhttp://jiailing.com:3005です。このアドレスは、axiosConfig.jsファイルに記述し、baseURL変数を指定する必要があります。

次に、GitHubにリポジトリを作成し、プロジェクトコードをGitHubリポジトリにインポートします。次に、https：//vercel.com/にログインし、このGitHubリポジトリをデプロイ用に選択します。