Tweet
Tweet

Slide 1

Slide 1 text

2022年6月24日 ⚫ 7月14日 社内勉強会資料 ZOZOTOWN WEB部 フロントエンド1　菊地 宏之 Next.jsで開発を始める前に 知っておくと良さそうなこと

Slide 2

Slide 2 text

● Next.js とは ● なぜ、Next.js を使うのか ● セットアップと開発手順 ● ファイルベースルーティング ● 事前レンダリング ● まとめ アジェンダ

Slide 3

Slide 3 text

● この資料の対象者 ○ これから Next.js に触れようとしている人 ■ 情報過多にならないようにあえて省いている情報もある ● この資料で伝えたいこと ○ Next.js での開発をスムーズに始められる情報の提供 ■ プレーンな環境の構築方法（セットアップ） ● プロダクトから学びづらい部分を学べる環境 ■ ページの作り方（ファイルベースルーティング） ■ 事前レンダリング （モダンフロントエンド開発で知っておくべき情報） まず、はじめに

Slide 4

Slide 4 text

Next.js は、Vercel 社が提供する React フレームワークである。 https://nextjs.org/ Next.js とは

Slide 5

Slide 5 text

── 過去、フロントエンド開発の環境構築は敷居が高く、誰でもが簡単に環境構築を ゼロから行うことは難しかった。 しかし、今日、Next.js を始めとするモダンな JavaScript フレームワークを利用すれ ば、あまり意識せずともフロントエンド開発のベストプラクティスを開発初期から享 受することができる。 なぜ、Next.js を使うのか

Slide 6

Slide 6 text

Next.js は、以下のような特徴（ベストプラクティス）を持っている。 ● SPA（Single Page Application） ● ゼロコンフィグ ● ファイルベースルーティング ● 事前レンダリング ● 画像やフォントの最適化 …などなど なぜ、Next.js を使うのか

Slide 7

Slide 7 text

以下のような理由で Next.js を選定している。 ● Next.js がフレームワークとしての完成度が高い ○ 車輪の再発明が不要なため、開発・保守工数を減らせる（開発効率⤴） ○ React、TypeScript との親和性も良い ○ デファクトスタンダード化しつつあり、資料が豊富にある ● 旧環境の React の資産が活かしやすい ● 社内的に Next.js の採用事例も増えており、社内でナレッジの共有ができる なぜ、Next.js を使うのか

Slide 8

Slide 8 text

セットアップと開発手順

Slide 9

Slide 9 text

新規でセットアップをする場合、 create-next-app を利用すると自動セットアップが 可能である。 セットアップ - 概要 - 任意のディレクトリに移動して、上記のコマンドを実行する。 コマンドを実行したディレクトリに任意のディレクトリ名（後述の「プロジェクト名」） で Next.js をインストールしたディレクトリが作成される。

Slide 10

Slide 10 text

2. プロジェクト名を訊かれるので、任意のプロジェクト名を入力 セットアップ - 手順 - 1. 下記のように訊かれたら、 y を入力

Slide 11

Slide 11 text

セットアップ - 手順 - 3. 必要なファイルの生成とモジュー ルのインストールが完了する。 左記は作成されたファイル一覧。 . ├── .eslintrc.json ├── .gitignore ├── .next ├── README.md ├── next-env.d.ts ├── next.config.js ├── package-lock.json ├── package.json ├── pages │ ├── _app.tsx │ ├── about.js │ ├── api │ │ └── hello.ts │ └── index.tsx ├── public │ ├── favicon.ico │ └── vercel.svg ├── styles │ ├── Home.module.css │ └── globals.css └── tsconfig.json

Slide 12

Slide 12 text

1. 下記のコマンドを実行すると開発サーバが起動する 基本的な開発手順 この資料での npm run dev 以外のコマンドの説明は割愛

Slide 13

Slide 13 text

基本的な開発手順 2. 開発サーバ起動後、ブラウザで http://localhost:3000 へアクセス しアプリケーションの実行を確認 する 3. 開発サーバ起動中に任意のファイ ルを編集するとライブリロードさ れて内容が反映される localhost:3000へアクセスして表示される画面

Slide 14

Slide 14 text

ファイルベースルーティング

Slide 15

Slide 15 text

├── pages 👈 このディレクトリ │ ├── _app.tsx 👈 特別なファイル │ ├── about.js │ ├── api 👈 APIルート │ │ └── hello.ts │ └── index.tsx Next.js は、pagesディレクトリ内に配置した React コンポーネント（.js, .jsx, .ts, .tsx ファイル）によって、ルーティングが決定する。 （ただし、 pages/api は API ルートと呼ばれておりこの限りではない） ファイルベースルーティング

Slide 16

Slide 16 text

例えば、以下のような React コンポーネントを pages/about.js というファイルで配 置すると、 /about へとアクセスできるようになる。ディレクトリを任意の名称にし て、index を配置する形（ pages/about/index.js ）でも同様の動きになる。 ファイルベースルーティング

Slide 17

Slide 17 text

index というファイルは、ルートとしてルーティングされる。 ファイルベースルーティング - インデックスルート- ファイル パス URL pages/index.jsx / http://localhost:3000 pages/about.jsx pages/about/index.jsx /about http://localhost:3000/about

Slide 18

Slide 18 text

ネストされたディレクトリ構造も同じようにルーティングされる。 ファイルベースルーティング - ネストルート - ファイル パス URL pages/posts/first-post.jsx /posts/first-post http://localhost:3000/posts/firs t-post pages/dashboard/settings/userna me.jsx /dashboard/settings/usernam e http://localhost:3000/dashboa rd/settings/username

Slide 19

Slide 19 text

ブラケット記法で記述した場合、名前をつけたパラメータとマッチして、動的なルー ティングを実現できる。 ファイルベースルーティング - 動的なルートセグメント - ファイル パス URL pages/blog/[slug].jsx /blog/:slug (/blog/hello-world) ※ slug が hello-world の場合 http://localhost:3000/blog/hell o-world pages/[username]/settings.jsx /:username/settings (/foo/settings) ※ username が foo の場合 http://localhost:3000/dashboa rd/settings/username この資料での詳しい説明は割愛

Slide 20

Slide 20 text

事前レンダリング （Pre-rendering）とは

Slide 21

Slide 21 text

事前レンダリングとは、各ページの HTML をクライアントサイドの JavaScript でレ ンダリングするのではなく、サーバサイドの JavaScript で事前に生成しておくことを 指す。 Next.js には、SG（Static Generation）と SSR（Server-side Rendering）の 2 つ の事前レンダリング形式がある。 これらの違いは、ページの HTML を生成するタイミング。 ● SG（Static Generation）: ビルド時に HTML を生成する ● SSR（Server-side Rendering）: リクエストごとに HTML を生成する 事前レンダリングとは

Slide 22

Slide 22 text

事前レンダリングがされない場合、クライアントサイドで HTML を生成する必要があ る。そうなると JavaScript によるレンダリングが完了するまでコンテンツを見ること ができない（当然、JavaScript が無効化された状態だとコンテンツを見ることはでき ない）。 このクライアントサイドで HTML を生成する方式のことを CSR（Client-side Rendering）と呼ぶ。 事前レンダリングなし

Slide 23

Slide 23 text

事前レンダリングなし - 'Pre-rendering - Pre-rendering and Data Fetching | Learn Next.js'より 事前レンダリングなし

Slide 24

Slide 24 text

事前レンダリングの場合、HTML は事前に生成されたものをクライアントサイドはレ ンダリングする。 生成された HTML は JavaScript と関連付けられており、ページが読み込まれた後に JavaScript は実行され、アプリケーションはインタラクティブになる。 このプロセスはハイドレーション（Hydration）と呼ばれる。 事前レンダリングあり

Slide 25

Slide 25 text

事前レンダリングあり - 'Pre-rendering - Pre-rendering and Data Fetching | Learn Next.js'より 事前レンダリングあり

Slide 26

Slide 26 text

SG: Static Generation

Slide 27

Slide 27 text

SG（Static Generation）は、ビルド時に HTML を生成する事前レンダリング方式。 SG: Static Generation Static Generation - 'Pre-rendering - Pre-rendering and Data Fetching | Learn Next.js'より

Slide 28

Slide 28 text

> We recommend using Static Generation (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request. > https://nextjs.org/learn/basics/data-fetching/two-forms Next.js としては、パフォーマンスの観点から可能な限り SG を使用することを推奨し ている。 SG: Static Generation

Slide 29

Slide 29 text

pages ディレクトリ内のコンポーネントで getStaticProps() を利用する。 SG: Static Generation - Next.jsでの利用方法

Slide 30

Slide 30 text

SG: Static Generation - Next.jsでの利用方法 Blogコンポーネントのデータ を SG 時に API 経由でセット するケース。

Slide 31

Slide 31 text

● ページをレンダリングするのに必要なデータが、ビルド時にユーザーのリクエス トよりも先に利用可能である場合 ● データをヘッドレス CMS や API から取得する場合 ● データがユーザー固有のものでなく public にキャッシュできる場合 ● SEO などの理由でページを事前レンダリングする必要があり、かつ非常に高速で なければならない場合 SG: Static Generation - いつ使うべきか

Slide 32

Slide 32 text

SSR: Server-side Rendering

Slide 33

Slide 33 text

SSR（Server-side Rendering）は、リクエストごとに HTML をサーバー側で生成する 事前レンダリング方式。 SSR: Server-side Rendering Static Generation - 'Pre-rendering - Pre-rendering and Data Fetching | Learn Next.js'より

Slide 34

Slide 34 text

pages ディレクトリ内のコンポーネントで getServerSideProps() を利用する。 SSR: Server-side Rendering - Next.jsでの利用方法

Slide 35

Slide 35 text

SSR: Server-side Rendering - Next.jsでの利用方法 Blogコンポーネントのデータ をリクエスト（SSR）時に セットするケース。

Slide 36

Slide 36 text

● リクエストによって最新状態を維持する必要があるページ ○ ユーザー情報やクエリパラメータで動的にデータが変わるページ ● HTTP ヘッダーを必要とするページ SSR: Server-side Rendering - いつ使うべきか

Slide 37

Slide 37 text

まとめ

Slide 38

Slide 38 text

● Next.js を使う理由 ○ 昨今のフロントエンド開発のベストプラクティスを享受するため ● セットアップと開発手順 ○ Next.js は、 create-next-app で簡単に自動セットアップできる ○ サンドボックスとして活用していこう ● ファイルベースルーティング ○ Next.js は、pagesディレクトリに配置したファイルで決定する ● 事前レンダリング ○ Next.js には、2つの事前レンダリング方式がある ○ レンダリング方式（SG と SSR）の特性を理解して使う必要がある まとめ

Slide 39

Slide 39 text

ご清聴ありがとうございました