Next.js Basics(2)

会社の次のプロジェクトはNextです.jsを利用することにしました.
指定された期限は5日5日以内の次の日ですjsの基礎を熟知して、すぐにプロジェクトから打ち出します.

Setup

npx create-next-app --typescript

typescriptを使用するので、上記のようにオプションを追加します.
そして梱包します.jsonを表示すると、私たちが使用できるscriptを表示できます.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

公式ドキュメントを見ると、scriptごとの説明が表示されます.

dev:next devでnextを実行します.開発モードでjsアプリケーションを実行します.

build:next buildを実行し、本番バージョンを実行します.

start:next startそしてNextを実行する.jsの本番サーバを実行します.

lint:next lintを実行し、次はNextです.js上で内蔵ESLintプロファイルを実行します.

だから開発の時.

npm run dev

構築時、

npm run build

Page

Next.jsの最大の利点とされる特性.要するに、reactがルーティング時に「react-router-dom」を用いてSPAを実装してルーティングを行う場合、Nextはこれを必要としない.
pagesというディレクトリにあります.jsというファイルを作成し、ページに対応するコンポーネントをエクスポートすれば、自動ルーティングが実現されます.SSGを使ったことがあると、その働き方がよく似ていることがわかります.

Pre-rendering

pre(プリ)render(表示、描画、表示)、すなわち、「プリ表示、プリ描画」という意味で解釈できる.

Nextでは、各ページのプレゼンテーションが基本です.(つまり、ページごとにHTMLを作成しておきます.)

このプリレンダリングには2つの方法があります.
-static Generation(推奨):HTMLはbuild timeで作成され、各リクエストで繰り返し使用されます.

Server-side Rendering:要求ごとにHTMLを作成します.

build time, request time Next.jsドキュメントを読むと、構築時間とリクエスト時間が表示されます。違いは次のとおりです。構築時間はNextです。jsアプリケーションを構築するときのことです。そしてリクエスト時間はnextjsが実行中でリクエストを受信したときを指します。

Static Generation without Data

Next.jsは基本的にデータをインポートするのではなく、ページをプリプレゼンテーションします.

したがって、ページにデータがロードされず、そのままレンダリング可能なコンテンツであれば、nextは自分でHTMLを作成し、リクエストを受信したときにクライアントに送信します.

Static Generation with Data

多くの場合、データをロードする必要がある場合があります.データのロードには、次の2つの方法が考えられます.

コンテンツが外部データの影響を受ける場合、getStaticPropsが使用される.

ページのパスが外部データによって影響される場合、getStaticPathsが使用され、getStaticPropsとともに使用される.

データの読み込み

Nextの場合、ページを有する同じファイルからgetStaticPropsという非同期関数を導出することができる.

この関数はbuild timeに呼び出され、レンダリング時にページ上のpropsにデータが渡された.

そのため、以下に示すように、一連のパターンが必要です.

function Blog({ posts }) {
  // Render posts...
}

// This function gets called at build time
export async function getStaticProps() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

上記のコードはasync function getStaticProps()を導出し、propsはpropsであり、propsの値はpostsと呼ばれるデータを含むオブジェクトを返します.
そして上を見るとblogというreact elmentにpostsというpropsが届きますこのルールを守ってコードを作ればいいです.
*getStaticPropsの場合は、個別に配置します.
今日はここまで書いて次から本格的に次を書きます