Next.jsの新バージョン登場から埋葬まで

ネット 2023-09-11 20:07:26 訪問数: null

このチュートリアルで使用する Next.js はバージョン 13 です

Next.js の概要

  1. 完全な React プロジェクト、構築が簡単
  2. サーバーサイドレンダリングの最大の問題を解決するデータ同期機能が付属しています
  3. 豊富なプラグイン
  4. 柔軟な構成

最初のプロジェクトを作成する

手動で作成する

初期化

npm init

必要な依存関係パッケージをインストールする

npm install --save react react-don next

ショートカットコマンドを追加する

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },

テストファイルを作成する

ルートディレクトリにpagesフォルダーを作成し、このファイルの下にindex.jsを作成します。

Nextではpagesフォルダを指定しており、このフォルダに書かれたファイルに対してNext.jsが対応するルートを自動で作成してくれます。

function Index() {
    return (
        <div>Halo Next.js</div>
    )
}

export default Index

npmを実行してdevを実行

Next.js プロジェクトを作成するための creact-next-app スキャフォールディング

プロジェクトの作成

npx create-next-app@latest

初めてプロジェクトを作成するときに、nextjs がインストールされていない場合は、インストールするかどうかを確認するメッセージが表示されます。

What is your project named? my-app                              // 项目名
Would you like to use TypeScript? No / Yes                      // TypeScript 
Would you like to use ESLint? No / Yes                          // ESLint
Would you like to use Tailwind CSS? No / Yes                    // Tailwind CSS
Would you like to use `src/` directory? No / Yes                // src 作为根目录
Would you like to use App Router? (recommended) No / Yes        // 路由
Would you like to customize the default import alias? No / Yes  // 自定义默认导入别名
What import alias would you like configured? @/*                // 配置什么导入别名

npmを実行してdevを実行

Next.js ページとコンポーネント

新しいページを作成する

ページディレクトリにabout.jsを作成します。

function About () {
    return (
        <div>About nextjs</div>
    )
}

export default About

http://localhost:3000/about にアクセスしてください

Next.js では、ページ (ページ) は.js、 、jsx、.tsまたはfiles から.tsxエクスポートされたReact コンポーネントであり、これらのファイルはpagesディレクトリに保存されます。各ページはそのファイル名をルートとして使用します

セカンダリ ディレクトリ ページを作成する

ページディレクトリにホームファイルを作成し、このファイルの下にhome.jsを作成します。

function Home () {
    return (
        <div>home nextjs</div>
    )
}

export default Home

http://localhost:3000/home/home にアクセスしてください

コンポーネント部品の製造

コンポーネントの作成

src ディレクトリの下にコンポーネント ディレクトリを作成し、このディレクトリの下に buttonComponent.js ファイルを作成します。

export default ({children})=><button>{children}</button>

引用

home.jsでインポートする

import dynamic from 'next/dynamic'

const ButtonComponent = dynamic(
    () => import('@/components/buttonComponent'),
// { ssr: false }  // 是否关闭 ssr（服务端渲染） 默认是开启
)

使用

<ButtonComponent>按钮</ButtonComponent>

ルーティング

タブ付きジャンプ

ホーム ページに 2 つの新しいページを追加します

ホームA.js

import React from "react";
import Link from "next/link";

const HomeA = () => {
    return (
        <>
            <div>我是HomeA 页面</div>
            <div><Link href="/home/home"><div>去Home页面</div></Link></div>
        </>
    )
}

export default HomeA

ホームB.js

import React from "react";
import Link from "next/link";

const HomeB = () => {
    return (
        <>
            <div>我是HomeB 页面</div>
            <div><Link href="/home/home"><div>去Home页面</div></Link></div>
        </>
    )
}

export default HomeB

ホームページのコンテンツを変更する

import React from "react"
import Link from "next/link"

function Home () {
    return (
        <div>
            <div>home nextjs</div>
            <div><Link href="/home/homeA"><div>去homeA页面</div></Link></div>
            <div><Link href="/home/homeB"><div>去homeB页面</div></Link></div>
        </div>
    )
}

export default Home

以前のバージョンではリンクラベルにaラベルを接続していましたが、現バージョン(13.4.19)ではaラベルを追加するとエラーが報告されます。

ルーターモジュールジャンプ（プログラムによるジャンプ）

home.js ページを変更する

import React from "react"
import Router from "next/router"

const goHomeA = () => {
    Router.push('/home/homeA')
}

const goHomeB = () => {
    Router.push('/home/homeB')
}

function Home () {
    return (
        <div>
            <div>home nextjs</div>
            <div onClick={goHomeA}>去homeA页面</div>
            <div onClick={goHomeB}>去homeB页面</div>
        </div>
    )
}

export default Home

送信と受信

Next.js はクエリを通じてのみパラメータを渡すことができます

ラベル付き

home.js ページを変更する

import React from "react"
import Link from "next/link"

function Home () {
    return (
        <div>
            <div>home nextjs</div>
            <div><Link href="/home/homeA?name=张三&age=18"><div>张三</div></Link></div>
            <div><Link href="/home/homeA?name=李四&age=20"><div>李四</div></Link></div>
        </div>
    )
}

export default Home

homeA.jsページを変更する

withRouter は Next.js フレームワークの高度なコンポーネントであり、ルーティングを処理するために使用されます。

import React from "react";
import Link from "next/link";
import { withRouter } from "next/router";

function Home () {
    return (
        <div>
            <div>home nextjs</div>
            <div><Link href="/home/homeA?name=张三&age=18"><div>写法一</div></Link></div>
            <div><Link href={
   
   {
                pathname: '/home/homeA',
                query: {
                    name: '李四',
                    age: 20
                }
            }}><div>写法二</div></Link></div>
        </div>
    )
}

export default withRouter(HomeA)

プログラマティック

import React from "react"
import Router from "next/router"

const goHomeA = () => {
    Router.push('/home/homeA?name=张三&age=18')
}

const goHomeA2 = () => {
    Router.push({
        pathname: '/home/homeA',
        query: {
            name: '李四',
            age: 20
        }
    })
}

function Home () {
    return (
        <div>
            <div>home nextjs</div>
            <div onClick={goHomeA}>写法一</div>
            <div onClick={goHomeA2}>写法二</div>
        </div>
    )
}

export default Home

フック関数

歴史

import React from "react"
import Router from "next/router"

Router.events.on('routeChangeStart', (...args) => {
    console.log('routeChangeStart -> 路由开始变化', ...args)
})

Router.events.on('routeChangeComplete', (...args) => {
    console.log('routeChangeComplete -> 路由结束变化', ...args)
})

Router.events.on("beforeHistoryChange", (...args) => {
    console.log('beforeHistoryChange -> 在改变浏览器 history 之前触发', ...args)
})

Router.events.on('routeChangeError', (...args) => {
    console.log('routeChangeError -> 跳转发生错误', ...args)
})

const goHomeA = () => {
    Router.push('/home/homeA?name=张三&age=18')
}

const goHomeA2 = () => {
    Router.push({
        pathname: '/home/homeA',
        query: {
            name: '李四',
            age: 20
        }
    })
}

function Home () {
    return (
        <div>
            <div>home nextjs</div>
            <div onClick={goHomeA}>写法一</div>
            <div onClick={goHomeA2}>写法二</div>
        </div>
    )
}

export default Home

ハッシュ

Router.events.on('hashChangeStart', (...args) => {
    console.log('hashChangeStart -> 路由开始变化', ...args)
})

Router.events.on('hashChangeComplete', (...args) => {
    console.log('hashChangeComplete -> 路由结束变化', ...args)
})

getInitialProps でリモート データを取得する

getInitialPropsコンポーネントにハングするReact静的メソッドです

Next.js 9.3 以降を使用している場合は、代わりにgetStaticPropsまたはを使用することをお勧めします。getServerSidePropsgetInitialProps

公式推奨はfetchです

フェッチリクエスト

ページ ディレクトリに新しい request.js ページを作成します。

import { withRouter } from "next/router";

function Request ({router, data}) {
    return (
        <>
            <div>{router.name}</div>
            <div>请求页面 {data} </div>
        </>
    )
}

Request.getInitialProps = async () => {
    const res = await fetch('https://api.github.com/repos/vercel/next.js')
    const json = await res.json()
    console.log(json)
    return { stars: json.stargazers_count }
}


export default withRouter(Request)

インデックス.js

import Router from "next/router"

const goRequest = () => {
  Router.push({
    pathname: '/request',
    query: {
        name: '李四',
        age: 20
    }
  })  
}

export default function Home() {
  return (
    <>
      <div>首页</div>
      <div onClick={goRequest}>去Request页面</div>
    </>
  )
}

ページを実行すると、getInitialPropsサーバー レンダリングとクライアント レンダリング中に実行されることがわかります。

  1. Nextjsページの更新などによってページに直接アクセスすると、サーバー側のレンダリングを使用してページ データを返すようにトリガーされます。

このときgetInitialProps、サーバー側で実行され、ブラウザ側では実行されません。

  1. ブラウザ側のルーティング ジャンプ (ブラウザが前後に進むなど) を通じてページにアクセスされる場合、ページのレンダリングによってNextjsサーバー側のレンダリングはトリガーされません。

したがって、実際には、getInitialPropsメソッドは、現在のページがレンダリングされるときに、さまざまな端末に応じてノード側で実行するかクライアント側で実行するかを独立して選択します。

getStaticProps

getStaticPropsページにアクセスするたびに要求されます

request.jsを変更する

import { withRouter } from "next/router";

function Request ({router, content}) {
    return (
        <>
            <div>{router.name}</div>
            <div>请求页面 {content} </div>
        </>
    )
}

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

export default withRouter(Request)

getStaticProps は、ビルド時にgetInitialPropsが行う処理を事前実行し、静的ファイルを事前生成するための API です。クライアントでは実行されません。常にサーバー側で実行します。

getServerSideProps

import { withRouter } from "next/router";

function Request ({router, content}) {
    return (
        <>
            <div>{router.name}</div>
            <div>请求页面 {content} </div>
        </>
    )
}

export const getServerSideProps = async context => {
    const res = await fetch('https://api.github.com/repos/vercel/next.js')

    // if (!res) {
        // notFound 强制页面跳转到 404
        // return {
        //     notFound: true
        // };

        // redirect 来将页面重定向
        // return {
        //     redirect: {
        //         destination: '/',
        //         permanent: false
        //     }
        // };
    // }

    const json = await res.json()
    console.log(json)
    return {
        props: {
            content: json.stargazers_count
        }
    };
}


export default withRouter(Request)

を通じてnext.js、getServerSideProps開発中にフロントエンドとバックエンドのデータを非常にうまく調整できます。一部のページ初期化データとページ認証は でgetServerSideProps直接処理できるため、ページ ロジックが大幅に簡素化され、フロントエンドとバックエンドの統一性が確保されます。 -終わり。

JSX はページの CSS スタイルを書き込みます

基本的な書き方

新しい style.js ページを作成する

const Style = () => {
    return (
        <>
            <div>style 页面</div>
            <div className="base">基础</div>

            <style jsx>
                {`
                    .base {
                        color: blue;
                        font-size: 16px;
                        margin: 40px;
                        display: block;
                    }
                `}
            </style>
        </>
    )
}

export default Style

style の後に jsx が必要な場合、next.js は CSS のグローバルな汚染を防ぐためにランダムなクラス名を自動的に追加します。たとえば、上記のコードのベースは、base-xxxxxx になります。

ダイナミックなスタイル

style.jsページを変更する

import React, {useState} from "react"

const Style = () => {

    const [color, setColor] = useState('blue')
    const [fontSize, setFontSize] = useState('16')
    const [margin, setMargin] = useState('40')

    const changeColor = () => {
        setColor(color === 'blue' ? 'red': 'blue')
    }

    const changeFontSize = () => {
        setFontSize(fontSize === '16' ? '20': '16')
    }

    const changeMargin = () => {
        setMargin(margin  === '10' ? '40': '10')
    }


    return (
        <>
            <div>style 页面</div>
            <div className="base">基础</div>

            <button onClick={changeColor}>改颜色</button>
            <button onClick={changeFontSize}>改字体大小</button>
            <button onClick={changeMargin}>改边距</button>

            <style jsx>
                {`
                    .base {
                        color: ${color};
                        font-size: ${fontSize}px;
                        margin: ${margin}px;
                        display: block;
                    }
                `}
            </style>
        </>
    )
}

export default Style

モジュールの遅延読み込み

新しい import.js ページを作成する

dayjsライブラリの紹介

npm i dayjs

ページ上で直接紹介すると、パッケージ化されて公開ライブラリとして公開されるため、プロジェクトの最初のページが使用されなくてもロードされるため、リソースの無駄になりますmoment。

導入されたサードパーティライブラリの遅延読み込み

インポート.js

import React,{useState} from "react";

const Import = () => {
    const [time, setTime] = useState()

    const changeTime = async () => {
        const dayjs = await import('dayjs')        
        setTime(dayjs.default(Date.now()).format('YYYY-MM-DD HH:mm:ss'))
    }

    return (
        <>
            <div>import 页面</div>
            <div>当前时间为：{time}</div>
            <button onClick={changeTime}>获取当前时间</button>
        </>
    )
}

export default Import

必要な場所に導入したことがわかります

デフォルトを有効にするには注意してください

コンポーネントの遅延読み込み

動的を使用してコンポーネント実装を導入する

import dynamic from 'next/dynamic'

const ButtonComponent = dynamic(() => import('@/components/buttonComponent'))

const Import = () => {
    return (
        <>
            <div>import 页面</div>
            <ButtonComponent>按钮</ButtonComponent>
        </>
    )
}

export default Import

カスタム コンポーネントは遅延ロードされます。jsx使用される<ButtonComponent/>場合にのみロードされます。使用されない場合はロードされません。

ヘッドコンポーネント

SEO 最適化をより効果的に実行するために、<Head>タグを自分でカスタマイズできます。

header.js ページを作成する

Next.jsカプセル化されており<Head>、それ自体がコンポーネントであり、直接

import Head from 'next/head'

const Header = ()=>{
    return (
        <>
            <Head>
                <title> 头部 </title>   
            </Head>
        </>
    )
}

export default Header

Next.js フレームワークでの Ant Design UI の使用

Ant Design は、Alibaba のオープンソース フロントエンド コンポーネント ライブラリです。

React の観点から見ると、これは開発で最も一般的に使用されるコンポーネントの一部をカプセル化したコンポーネント ライブラリであり、簡単な構成で使用できるようになります。

Next.js で CSS ファイルのインポートをサポートする

まず、pages/_app.js を作成します (存在しない場合)。次に、styles.cssファイルをインポートします。

スタイルシートのグローバルプロパティ

古いバージョンでは@zeit/next-sassを通じて CSS をサポートできますが、これは新しいバージョンでは削除されました

Next.js は、[name].module.cssファイル命名規則を通じて CSS モジュールをサポートします

CSS モジュールは、一意のクラス名を自動的に作成することで CSS をスコープします。これにより、競合を心配することなく、異なるファイルで同じ CSS クラス名を使用できます。

この動作により、CSS モジュールはコンポーネント レベルの CSS を組み込むための理想的な方法になります。CSS モジュール ファイルはアプリケーション内のどこにでもインポートできます

next.jsフレームワーク モジュールが追加されていない場合、グローバル スタイルと誤認され、競合やエラーが発生します。

import styles from '@/styles/test.module.css'

const Ant = () => {
    return (
        <>
            <div>Ant 页面</div>
            <p className={styles.default}>测试</p>
        </>
    )
}

export default Ant

サポートSCSS

scssをインストールする

npm install sass

使用法はCSSと一致しています

import styles from '@/styles/test.module.scss'

const Ant = () => {
    return (
        <>
            <div>Ant 页面</div>
            <p className={styles.default}>测试</p>
        </>
    )
}

export default Ant

アリをインストールする

npm install antd --save

アリの導入と使い方

新しいreact.jsページを作成する

import React from 'react';
import { DatePicker } from 'antd';

const App = () => {
  return <DatePicker />;
};

export default App;

バベル

webpackパッケージ全体がAnt Design実稼働環境にパッケージ化されるのを防ぐため

babel を使用してください

npm install --save babel-plugin-import

プロジェクトのルートディレクトリに.babelrcファイルを作成します

{
    "presets":["next/babel"],  //Next.js的总配置文件，相当于继承了它本身的所有配置
    "plugins":[     //增加新的插件，这个插件就是让antd可以按需引入，包括CSS
        [
            "import",
            {
                "libraryName":"antd"
            }
        ]
    ]
}

このように、そのコンポーネントを使用するときにそのコンポーネントをパッケージ化するのと同様に、CSS もオンデマンドでパッケージ化されます。

Next.js 本番環境のパッケージ化

package.jsonフォルダーを構成する

"start": "next start -p 8088"

パッケージングを実行する

npm run build

パッケージ化されたファイルを実行する

npm run start

おすすめ

転載: blog.csdn.net/weixin_44872023/article/details/132628279
おすすめ
ランキング
Tongyi Lingma Enterprise Edition は、プライベート ドメインの知識の検索、データ コンプライアンス、統合管理などの企業のニーズを満たすために正式にリリースされました。
Свойство «значение» не существует для типа «EventTarget» в vue3 (ts)
Фильтрация и картографирование потокового потока
アヒルを数える Python コード
python read csvcsvファイルの一部を新しいファイルに読み取ります
[スウィフト] LeetCode1281整数あなたの製品との違い|。整数の桁のプロダクトと和を減算
Huawei OD コンピュータベースの試験アルゴリズムの問題: ブロックチェーン ファイル ダンプ システム
BigDecimalの使い方
Python実装ハングマンゲーム
タイタニック（タイタニック生存予測）に生存
アーカイブ
もっと
2024-05-28(0)
2024-05-27(1)
2024-05-26(0)
2024-05-25(1)
2024-05-24(11)
2024-05-23(35)
2024-05-22(9)
2024-05-21(36)
2024-05-20(5)
2024-05-19(0)

コードワールド

© 2018 codetd.com