Next.js 入門チュートリアル

Next.js 入門チュートリアル

導入

Next.js は、軽量の React サーバー側レンダリング アプリケーション フレームワークです。

公式サイトリンク: www.nextjs.cn/

アドバンテージ:

ゼロ構成の自動コンパイルとパッケージ化。最初から本番環境向けに最適化されています。

ハイブリッドモード: SSG と SSR
1つのプロジェクトでビルド時の事前レンダリング(SSG)とリクエスト時のレンダリング(SSR)の両方をサポート

増分静的生成では、ビルド後に静的な事前レンダリングされたページが増分的に追加および更新されます。

TypeScript サポート
TypeScript を自動的に構成およびコンパイルします。

高速更新 Facebook クラスのアプリで大規模に実証された、高速で信頼性の高いリアルタイム編集エクスペリエンス。

ファイル システム ベースのルーティング ページ ディレクトリ内の各コンポーネントはルートです。

API ルートは、バックエンド機能を提供するための API エンドポイント (オプション) を作成します。

CSSの組み込みサポート
CSS モジュールを使用してコンポーネント レベルのスタイルを作成します。 Sass の組み込みサポート。

コード分​​割とバンドルでは、Google Chrome チームによって作成された最適化されたバンドルおよび分割アルゴリズムが使用されます。

Next.jsプロジェクトを作成する

Next.js プロジェクトを手動で作成する

mkdir nextDemo //プロジェクトを作成 npm init //プロジェクトを初期化 npm i react react-dom next --save //依存関係を追加

package.jsonにショートカットコマンドを追加する

 「スクリプト」: {
    "test": "echo \"エラー: テストが指定されていません\" && exit 1",
    「開発」:「次へ」、
    "ビルド" : "次のビルド",
    「開始」: 「次の開始」
  },

ページフォルダとファイルを作成する

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

関数インデックス(){
    戻る (
        <div>こんにちは Next.js</div>
    )
}
デフォルトインデックスをエクスポート

プロジェクトを実行する

npm 実行 dev

creact-next-appはプロジェクトを素早く作成します

create-next-app は、Next.js プロジェクトをすばやく作成できるスキャフォールディングです。

npm install -g create-next-app //scaffolding のグローバルインストール create-next-app nextDemo //scaffolding に基づいてプロジェクトを作成 cd nextDemo
npm run dev //プロジェクトを実行する

ディレクトリ構造の紹介:

  • コンポーネント フォルダー: ここに独自のコンポーネントを配置します。ここでのコンポーネントにはページは含まれませんが、パブリック コンポーネントまたは特殊用途のコンポーネントを参照します。
  • node_modules フォルダ: Next プロジェクトの依存パッケージはすべてここにあります。通常、ここでコンテンツを変更したり編集したりすることはありません。
  • Pages フォルダ: ここにページが配置されます。ここのコンテンツは自動的にルートを生成し、サーバー側でレンダリングされます。レンダリング後、データが同期されます。
  • static フォルダー: これは静的フォルダーです。たとえば、プロジェクトに必要な画像、アイコン、静的リソースをここに配置できます。
  • .gitignore ファイル: これは主に git によるファイルの送信とアップロードを制御します。簡単に言えば、送信を無視することを意味します。
  • package.json ファイル: プロジェクトに必要なファイルと構成情報 (名前、バージョン、ライセンス) を定義します。最も重要なことは、npm install を使用してプロジェクトに必要なすべてのパッケージをダウンロードすることです。

ページ

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

pages/about.js というファイルを作成し、次のように React コンポーネントをエクスポートすると、/about パスでアクセスできるようになります。

ルーティング

ページジャンプには、一般的に 2 つの形式があります。1 つは <Link> タグを使用する方法で、もう 1 つは js プログラミング、つまり Router コンポーネントを使用してジャンプする方法です。

リンク

'react' から React をインポートします
'next/link' からリンクをインポートします
const ホーム = () => (
  <>
    <div>私はホームページです</div>
    <div><Link href="/pageA" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><a>ページ A に移動</a></Link></div>
    <div><Link href="/pageB" rel="external nofollow" ><a>ページ B へ移動</a></Link></div>

  </>
)

エクスポートデフォルトホーム

注意: <Link> タグを使用してジャンプするのは非常に簡単ですが、注意する必要があるもう 1 つの小さな落とし穴があります。それは、兄弟タグが並んで配置されている状況をサポートしていないことです。

 //<div> の書き方が間違っている
  <リンク href="/pageA" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" >
    <span>ページ A へ移動</span>
    <span>フロントエンドブログ</span>
  </リンク>
</div>

//正しい書き方 <Link href="/pageA" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <あ>
    <span>ページ A へ移動</span>
    <span>フロントエンドブログ</span>
  </a>
</リンク>

ルーター

'next/router' から Router をインポートします。

<button onClick={()=>{Router.push('/pageA')}}>ページAへ移動</button>

パラメータの受け渡しと受け取り

Next.js では、パラメータは (path:id) ではなく、クエリ (?id=1) を通じてのみ渡すことができます。

'next/link' からリンクをインポートします

// <Link href="/blogDetail?bid=23" rel="external nofollow" ><a>{blog.title}</a></Link> を渡します

    
    
//ブログ.js
'next/router' から { withRouter} をインポートします
'next/link' からリンクをインポートします

const BlogDetail = ({router})=>{
    戻る (
        <>
            <div>ブログ ID: {router.query.name}</div>
            <Link href="/" rel="external nofollow" ><a>ホームページに戻る</a></Link>
        </>
    )
}
//withRouter は Next.js フレームワークの高度なコンポーネントであり、ルーティングを処理するために使用されます。export default withRouter(BlogDetail)


/********************************************************************************************/
'next/router' から Router をインポートします。

<button onClick={gotoBlogDetail} >ブログの詳細</button>

関数gotoBlogDetail(){
    ルータ.push('/blogDetail?bid=23')
}

//オブジェクトフォーム関数gotoBlogDetail(){
    ルータ.push({
        パス名: "/blogDetail",
        クエリ:{
            入札:23
        }
    })
}

<Link href={{pathname:'/blogDetail',query:{bid:23}}><a>ブログの詳細</a></Link>

ダイナミックルーティング

ページ/投稿/[pid].js
ルート: /post/abc --> クエリ: { "pid": "abc" }


ページ/投稿/[pid]/[コメント].js
ルート: /post/abc/a-comment --> クエリ: { "pid": "abc", "comment": "a-comment" }

フックイベント

フック イベントを使用すると、遷移中にアニメーションをロードしたり、ページ上の一部のリソース カウンターをオフにしたりするなど、さまざまなことを行うことができます。

//ルートが変更されると、Router.events.on('routeChangeStart',(...args)=>{
    console.log('1.routeChangeStart->ルートの変更が開始されます。パラメータは次のとおりです:',...args)
})

//ルートが変更されると、Router.events.on('routeChangeComplete',(...args)=>{
    console.log('routeChangeComplete->ルート変更が完了しました、パラメータ:',...args)
})

// トリガー前のブラウザ履歴 Router.events.on('beforeHistoryChange',(...args)=>{
    console.log('3, beforeHistoryChange-> ブラウザ履歴を変更する前にトリガーされました、パラメータ:',...args)
})

//ルートジャンプでエラーが発生した場合、Router.events.on('routeChangeError',(...args)=>{
    console.log('4, routeChangeError-> リダイレクトエラー、パラメータ:',...args)
})

/******************************** ハッシュルート***********************************/

Router.events.on('hashChangeStart',(...args)=>{
    console.log('5, ジャンプ開始時にhashChangeStart->hashが実行され、パラメータは次のとおりです:',...args)
})

Router.events.on('hashChangeComplete',(...args)=>{
    console.log('6, hashChangeComplete->hash ジャンプが完了しました。パラメータは次のとおりです:',...args)
})

データを取得

静的プロパティを取得する

ビルド時にデータを要求する

ビルドフェーズでは、ページが静的 HTML ファイルに組み込まれるため、非常に高いパフォーマンスで HTML ファイルにオンラインで直接アクセスできます。

getStaticProps メソッドを使用して、ビルド フェーズ中にページに必要なデータを返します。
動的にルーティングされるページの場合は、getStaticPaths メソッドを使用して、すべてのルーティング パラメータと、フォールバック メカニズムが必要かどうかを返します。

// 投稿はビルド時に getStaticProps() によって設定されます
関数 Blog({ 投稿 }) {
  戻る (
    <ul>
      {posts.map((投稿) => (
        <li>{投稿タイトル}</li>
      ))}
    </ul>
  )
}

// この関数はサーバー側でビルド時に呼び出されます。
// クライアント側では呼び出されないので、
// 直接データベースクエリ。「技術的な詳細」セクションを参照してください。
非同期関数 getStaticProps(context) をエクスポートします。
  // 投稿を取得するには外部 API エンドポイントを呼び出します。
  // 任意のデータ取得ライブラリを使用できます
  const res = フェッチを待機します('https://.../posts')
  const posts = res.json() を待機します

  // { props: { posts } } を返すことで、Blogコンポーネントは
  // ビルド時にプロパティとして `posts` を受け取ります
  戻る {
    小道具: {
      投稿、
    },
  }
}

デフォルトのエクスポートブログ

サーバーサイドプロパティを取得する

訪問ごとにデータをリクエストする

ページに非同期の getServerSideProps メソッドをエクスポートし、次にリクエストが行われるたびにサーバー上でこのメソッドを呼び出します。

  • このメソッドはサーバー側でのみ実行され、getServerSideProps メソッドはリクエストごとに実行されます。
  • ページがブラウザ側の Link コンポーネントからナビゲートされた場合、Next はサーバーにリクエストを送信し、サーバー上で getServerSideProps メソッドを実行してから、JSON をブラウザに返します。
関数 Page({データ}) {
  // データをレンダリングします...
}

// これはリクエストごとに呼び出されます
非同期関数 getServerSideProps(context) をエクスポートします。
  // 外部APIからデータを取得する
  const res = フェッチを待機します(`https://.../data`)
  const データ = res.json() を待機します

  // props 経由でページにデータを渡す
  戻り値: { プロパティ: { データ } }
}

デフォルトページをエクスポート

CSS サポート

グローバルスタイルシートの追加

アプリケーションにスタイルシートを追加するには、pages/_app.js ファイルに CSS ファイルをインポートします。
本番環境では、すべての CSS ファイルは自動的に 1 つの縮小された .css ファイルにマージされます。
pages/_app.js ファイル内のスタイルシートのみをインポートする必要があります。
Next.js 9.5.4 以降では、アプリケーション内の任意の場所にある node_modules ディレクトリから CSS ファイルをインポートできます。
サードパーティのコンポーネントをインポートするために必要な CSS については、コンポーネント内で実行できます。

コンポーネントレベルのCSSの追加

[名前].module.css
//ログインモジュール.css
.ログインDiv{
    色: 赤;
}

//サードパーティのスタイルを変更する.loginDiv:global(.active){
    色:rgb(30, 144, 255) !重要;
}
'./login.module.css' からスタイルをインポートします
<div className={styles.loginDiv}/>

Next.js を使用すると、.scss および .sass 拡張子を持つ Sass ファイルをインポートできます。 CSS モジュールと .module.scss または .module.sass 拡張機能を介してコンポーネントと Sass を使用できます。

npm i sass --save

Sass コンパイラを構成する場合は、 next.config.js ファイルで sassOptions パラメータを使用できます。

定数パス = require('path')

モジュール.エクスポート = {
  sassオプション: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

CSS-in-JS

既存の CSS-in-JS ソリューションを使用できます。 最も単純なのはインライン スタイルです。

<p style={{ color: 'red' }}>こんにちは</p>

styled-jsxを使用するコンポーネントは次のようになります

関数HelloWorld() {
  戻る (
    <div>
      こんにちは世界
      <p>スコープが設定されました!</p>
      <スタイルjsx>{`
        p {
          色: 青;
        }
        div {
          背景: 赤;
        }
        @media (最大幅: 600px) {
          div {
            背景: 青;
          }
        }
      ` </スタイル>
      <スタイル グローバル jsx>{`
        体 {
          背景:黒;
        }
      ` </スタイル>
    </div>
  )
}

デフォルトのHelloWorldをエクスポートする

カスタムヘッダー

<ヘッド>
    <title>テクニカルファットな人たちが一番太っている! </タイトル>
    <メタ文字セット='utf-8' />
</ヘッド>

以上で、Next.js入門チュートリアルの記事は終了です。Next.js入門のコンテンツをさらにご覧になりたい方は、123WORDPRESS.COMの過去記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • next.js を使って URL 短縮サービスを開発する方法
  • Next.js ページレンダリングの最適化ソリューションの詳細な説明
  • Next.js は React サーバーサイドレンダリングの例を実装します
  • Next.js プロジェクト実践ガイド (メモ)
  • Next.js を使用したサーバーサイドレンダリングアプリケーションの構築の詳細な説明

<<:  Apache ab を使用して HTTP パフォーマンス テストを実行する

>>:  MySQLデータベースを操作するためのコマンドラインツールmycliの簡単な紹介

推薦する

Vueでドラッグ可能なコンポーネントを実装する方法

この記事では、Vueでドラッグ可能なコンポーネントとドラッグ可能なコンポーネントを実装する方法を参考...

Linux環境でIPV6接続をサポートするようにmysql5.6を設定する方法

導入:この記事では主に、Linux システムで IPV6 接続をサポートするように MySQL を構...

Docker可視化ツールPortainerの導入と中国語翻訳

#docker 検索#docker プルポーター1. イメージを取得した後、中国語パッケージをダウン...

HTML チュートリアル: 順序付きリスト

<br />原文: http://andymao.com/andy/post/103.h...

JavaScript 関数をよりエレガントにする方法

目次分割代入を使用したオブジェクトパラメータコールバック関数の命名条件文を説明的にするスイッチ文をM...

HTMLの基礎を徹底解説(第1部)

1. WEBを理解するWeb ページは主にテキスト、画像、ハイパーリンクなどの要素で構成されていま...

JavaScript ではおそらく switch 文を使う必要はない

目次スイッチも複雑なコードブロックもありませんPythonからのインスピレーション辞書を使用してスイ...

CSS クラスと ID の一般的な命名規則

ページの公開名: #wrapper - ページの外側の端が全体のレイアウト幅を制御します#conta...

ネイティブjsは9マスグリッドのドラッグアンドドロップを実現します

ネイティブJSを使用して9つの正方形のグリッドを記述し、9つのグリッドの位置をドラッグして変更する効...

カスタムポップアップボックスを実装するためのJavaScriptシングルトンモード

この記事では、カスタムポップアップボックスを実装するためのJavaScriptシングルトンモードの具...

MySQLで置換関数を実装するためのいくつかの実用的なシナリオ

REPLACE構文REPLACE(String,from_str,to_str)つまり、String...

MySQLトリガーの詳細な説明と簡単な例

MySQLトリガーの簡単な例文法CREATE TRIGGER <トリガー名> -- トリ...

Web プロジェクト開発 JS 機能の手ぶれ補正とスロットリングのサンプル コード

目次安定導入手ぶれ補正シーン1(マウスの動き込み)手ぶれ補正シーン2(キーボードのキー)関数のスロッ...

Nginxは特定のページへのIPアクセスを制限します

1.すべてのIPアドレスが3つのページa1.htm、a2.htm、a3.htmにアクセスするのを禁止...