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の簡単な紹介

推薦する

MySql データベースのサブクエリと高度なアプリケーションの簡単な分析

MySql データベースのサブクエリ:サブクエリ: 選択クエリ ステートメント内に別の選択ステートメ...

DIV の一般的なタスク (パート 1) — 一般的なタスク (スクロール バーの表示、div の非表示、イベント バブリングの無効化など)

最も一般的に使用されるレイアウト要素として、DIV は Web 開発において重要な役割を果たします。...

Vueでタイマーをエレガントにクリアする方法

目次序文最適化派生的な質問: beforeDestroy はトリガーされませんか?序文タイマーをクリ...

MACOS で MySQL ルートパスワードを忘れた場合の解決策

MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレーショナル データベース...

DockerにMySQL 8.0をインストールする方法

環境: MacOS_Cetalina_10.15.1、Mysql8.0.18、Docker_2.0....

MySQL データ挿入効率の比較

データを挿入するとき、以前オフィス システムに取り組んでいたときにはデータベースのパフォーマンスにつ...

mysqlサーバーは--skip-grant-tablesオプションで実行されています

MySQLサーバーは--skip-grant-tablesオプションで実行されているため、このステー...

MySQL ロック関連知識のまとめ

MySQL のロックロックは、並行環境におけるリソースの競合を解決する手段です。その中でも、楽観的並...

JavaScript 開発における標準コミットメッセージの重要性の詳細な説明

目次標準コミットメッセージの重要性コミットするコミットリント依存関係をインストールする.commit...

MySQL での挿入効率のいくつかの例の比較

序文最近、仕事の都合で、約 1000w の大量のデータを MySQL に挿入する必要があり、時間がか...

VueプロジェクトでReactを書く方法の詳細

jsx/tsxファイルを直接作成できます今回のプロジェクト構成は以下のとおりです。 vueファイルで...

IE6はmin-widthを実装している

まず第一に、この効果は古い話題であるはずだということはわかっています。今日ファイルを整理していたら、...

MySql ログイン パスワードを忘れた場合とパスワードを忘れた場合の解決策

方法1: MySQL では、次のコマンド ラインで MySQL サーバーを起動することにより、アクセ...

Docker swarm の簡単なチュートリアル

3つの仮想マシン132、133、134を群がらせる1. クラスターを初期化し、自分自身をクラスターに...

開発効率を向上させる 20 の JavaScript ヒント

目次1. 配列を宣言して初期化する2. 合計、最小値、最大値を計算する3. 文字列、数値、オブジェク...