Next.jsで開発を始める前に知っておくと良さそうなこと

Next.js を業務で触ったことのない人に向けて社内勉強会をしたときの資料。

Transcript

1. 2022年6月24日 ⚫ 7月14日 社内勉強会資料 ZOZOTOWN WEB部 フロントエンド1　菊地 宏之 Next.jsで開発を始める前に 知っておくと良さそうなこと
2. • Next.js とは • なぜ、Next.js を使うのか • セットアップと開発手順 • ファイルベースルーティング • 事前レンダリング • まとめ アジェンダ
3. • この資料の対象者 ◦ これから Next.js に触れようとしている人 ▪ 情報過多にならないようにあえて省いている情報もある • この資料で伝えたいこと ◦ Next.js での開発をスムーズに始められる情報の提供 ▪ プレーンな環境の構築方法（セットアップ） • プロダクトから学びづらい部分を学べる環境 ▪ ページの作り方（ファイルベースルーティング） ▪ 事前レンダリング （モダンフロントエンド開発で知っておくべき情報） まず、はじめに
4. Next.js は、Vercel 社が提供する React フレームワークである。 https://nextjs.org/ Next.js とは
5. ── 過去、フロントエンド開発の環境構築は敷居が高く、誰でもが簡単に環境構築を ゼロから行うことは難しかった。 しかし、今日、Next.js を始めとするモダンな JavaScript フレームワークを利用すれ ば、あまり意識せずともフロントエンド開発のベストプラクティスを開発初期から享 受することができる。 なぜ、Next.js を使うのか
6. Next.js は、以下のような特徴（ベストプラクティス）を持っている。 • SPA（Single Page Application） • ゼロコンフィグ • ファイルベースルーティング • 事前レンダリング • 画像やフォントの最適化 …などなど なぜ、Next.js を使うのか
7. 以下のような理由で Next.js を選定している。 • Next.js がフレームワークとしての完成度が高い ◦ 車輪の再発明が不要なため、開発・保守工数を減らせる（開発効率⤴） ◦ React、TypeScript との親和性も良い ◦ デファクトスタンダード化しつつあり、資料が豊富にある • 旧環境の React の資産が活かしやすい • 社内的に Next.js の採用事例も増えており、社内でナレッジの共有ができる なぜ、Next.js を使うのか
8. セットアップと開発手順
9. 新規でセットアップをする場合、 create-next-app を利用すると自動セットアップが 可能である。 セットアップ - 概要 - 任意のディレクトリに移動して、上記のコマンドを実行する。 コマンドを実行したディレクトリに任意のディレクトリ名（後述の「プロジェクト名」） で Next.js をインストールしたディレクトリが作成される。
10. 2. プロジェクト名を訊かれるので、任意のプロジェクト名を入力 セットアップ - 手順 - 1. 下記のように訊かれたら、 y を入力
11. セットアップ - 手順 - 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
12. 1. 下記のコマンドを実行すると開発サーバが起動する 基本的な開発手順 この資料での npm run dev 以外のコマンドの説明は割愛
13. 基本的な開発手順 2. 開発サーバ起動後、ブラウザで http://localhost:3000 へアクセス しアプリケーションの実行を確認 する 3. 開発サーバ起動中に任意のファイ ルを編集するとライブリロードさ れて内容が反映される localhost:3000へアクセスして表示される画面
14. ファイルベースルーティング
15. ├── pages 👈 このディレクトリ │ ├── _app.tsx 👈 特別なファイル │ ├── about.js │ ├── api 👈 APIルート │ │ └── hello.ts │ └── index.tsx Next.js は、pagesディレクトリ内に配置した React コンポーネント（.js, .jsx, .ts, .tsx ファイル）によって、ルーティングが決定する。 （ただし、 pages/api は API ルートと呼ばれておりこの限りではない） ファイルベースルーティング
16. 例えば、以下のような React コンポーネントを pages/about.js というファイルで配 置すると、 /about へとアクセスできるようになる。ディレクトリを任意の名称にし て、index を配置する形（ pages/about/index.js ）でも同様の動きになる。 ファイルベースルーティング
17. index というファイルは、ルートとしてルーティングされる。 ファイルベースルーティング - インデックスルート- ファイル パス URL pages/index.jsx / http://localhost:3000 pages/about.jsx pages/about/index.jsx /about http://localhost:3000/about
18. ネストされたディレクトリ構造も同じようにルーティングされる。 ファイルベースルーティング - ネストルート - ファイル パス 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
19. ブラケット記法で記述した場合、名前をつけたパラメータとマッチして、動的なルー ティングを実現できる。 ファイルベースルーティング - 動的なルートセグメント - ファイル パス 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 この資料での詳しい説明は割愛
20. 事前レンダリング （Pre-rendering）とは
21. 事前レンダリングとは、各ページの HTML をクライアントサイドの JavaScript でレ ンダリングするのではなく、サーバサイドの JavaScript で事前に生成しておくことを 指す。 Next.js には、SG（Static Generation）と SSR（Server-side Rendering）の 2 つ の事前レンダリング形式がある。 これらの違いは、ページの HTML を生成するタイミング。 • SG（Static Generation）: ビルド時に HTML を生成する • SSR（Server-side Rendering）: リクエストごとに HTML を生成する 事前レンダリングとは
22. 事前レンダリングがされない場合、クライアントサイドで HTML を生成する必要があ る。そうなると JavaScript によるレンダリングが完了するまでコンテンツを見ること ができない（当然、JavaScript が無効化された状態だとコンテンツを見ることはでき ない）。 このクライアントサイドで HTML を生成する方式のことを CSR（Client-side Rendering）と呼ぶ。 事前レンダリングなし
23. 事前レンダリングなし - 'Pre-rendering - Pre-rendering and Data Fetching | Learn Next.js'より 事前レンダリングなし
24. 事前レンダリングの場合、HTML は事前に生成されたものをクライアントサイドはレ ンダリングする。 生成された HTML は JavaScript と関連付けられており、ページが読み込まれた後に JavaScript は実行され、アプリケーションはインタラクティブになる。 このプロセスはハイドレーション（Hydration）と呼ばれる。 事前レンダリングあり
25. 事前レンダリングあり - 'Pre-rendering - Pre-rendering and Data Fetching | Learn Next.js'より 事前レンダリングあり
26. SG: Static Generation
27. SG（Static Generation）は、ビルド時に HTML を生成する事前レンダリング方式。 SG: Static Generation Static Generation - 'Pre-rendering - Pre-rendering and Data Fetching | Learn Next.js'より
28. > 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
29. pages ディレクトリ内のコンポーネントで getStaticProps() を利用する。 SG: Static Generation - Next.jsでの利用方法
30. SG: Static Generation - Next.jsでの利用方法 Blogコンポーネントのデータ を SG 時に API 経由でセット するケース。
31. • ページをレンダリングするのに必要なデータが、ビルド時にユーザーのリクエス トよりも先に利用可能である場合 • データをヘッドレス CMS や API から取得する場合 • データがユーザー固有のものでなく public にキャッシュできる場合 • SEO などの理由でページを事前レンダリングする必要があり、かつ非常に高速で なければならない場合 SG: Static Generation - いつ使うべきか
32. SSR: Server-side Rendering
33. SSR（Server-side Rendering）は、リクエストごとに HTML をサーバー側で生成する 事前レンダリング方式。 SSR: Server-side Rendering Static Generation - 'Pre-rendering - Pre-rendering and Data Fetching | Learn Next.js'より
34. pages ディレクトリ内のコンポーネントで getServerSideProps() を利用する。 SSR: Server-side Rendering - Next.jsでの利用方法
35. SSR: Server-side Rendering - Next.jsでの利用方法 Blogコンポーネントのデータ をリクエスト（SSR）時に セットするケース。
36. • リクエストによって最新状態を維持する必要があるページ ◦ ユーザー情報やクエリパラメータで動的にデータが変わるページ • HTTP ヘッダーを必要とするページ SSR: Server-side Rendering - いつ使うべきか
37. まとめ
38. • Next.js を使う理由 ◦ 昨今のフロントエンド開発のベストプラクティスを享受するため • セットアップと開発手順 ◦ Next.js は、 create-next-app で簡単に自動セットアップできる ◦ サンドボックスとして活用していこう • ファイルベースルーティング ◦ Next.js は、pagesディレクトリに配置したファイルで決定する • 事前レンダリング ◦ Next.js には、2つの事前レンダリング方式がある ◦ レンダリング方式（SG と SSR）の特性を理解して使う必要がある まとめ
39. ご清聴ありがとうございました