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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. セットアップと開発手順
   

   View Slide

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

   View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    この資料での詳しい説明は割愛
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. SG: Static Generation
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. SSR: Server-side Rendering
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. まとめ
    

    View Slide

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

    View Slide

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

    View Slide