Slide 1

Slide 1 text

Next.js 研修 2022年4月18日リクルート63期新人BC＿エンジニアコース

Slide 2

Slide 2 text

講師の自己紹介吉井健文 @Takepepe ／フロントエンド関連の記事書いたり所属：横断エンジニアリング部 ASG 2020年10月入社、Next.js を採用したプロジェクトの開発支援を中心に、横断従事

Slide 3

Slide 3 text

Time Table ■【1】MPA と SPA（30m） ■【2】React ハンズオン（75m） ■　昼休憩（12:00 〜 13:00） ■【3】Next.js の基礎と概念（30m） ■【4】静的生成ハンズオン（60m） ■　休憩（14:30 〜 15:00） ■【5】動的生成ハンズオン（30m） ■【6】簡単な CRUD アプリを開発（60m） ■　休憩（16:30 〜 17:00） ■【7】現場での使われ方と最新動向（ 45m）【受講者の想定】TypeScript をある程度かけるが、 React を触るのは初めて ※ かなり詰め込んでいるので、全体的に駆け足気味の構成です

Slide 4

Slide 4 text

Time Table ■【1】MPA と SPA（30m） ■【2】React ハンズオン（75m） ■　昼休憩（12:00 〜 13:00） ■【3】Next.js の基礎と概念（30m） ■【4】静的生成ハンズオン（60m） ■　休憩（14:30 〜 15:00） ■【5】動的生成ハンズオン（30m） ■【6】簡単な CRUD アプリを開発（60m） ■　休憩（16:30 〜 17:00） ■【7】現場での使われ方と最新動向（ 45m） ✏ より理解しやすいよう、解説途中に手を動かすことが多いです

Slide 5

Slide 5 text

Time Table ■【1】MPA と SPA（30m） ■【2】React ハンズオン（75m） ■　昼休憩（12:00 〜 13:00） ■【3】Next.js の基礎と概念（30m） ■【4】静的生成ハンズオン（60m） ■　休憩（14:30 〜 15:00）【スライド中に出るアイコン】 ■ <- 話を聞いて　✏ <- 手を動かして　✅ <- 理解に自信がなければ質問して ■【5】動的生成ハンズオン（30m） ■【6】簡単な CRUD アプリを開発（60m） ■　休憩（16:30 〜 17:00） ■【7】現場での使われ方と最新動向（ 45m）

Slide 6

Slide 6 text

MPA と SPA の比較と、なぜ SPA を採用する機会が増えてきているのか説明します。第１章　MPA と SPA

Slide 7

Slide 7 text

第１章　MPA と SPA WEB 3層構造。WEB アプリケーション構築における標準的なシステム構成。 ■ WEB サーバー ■ APP サーバー ■ DB サーバー

Slide 8

Slide 8 text

第１章　MPA と SPA WEB 3層構造。WEB アプリケーション構築における標準的なシステム構成。 ■ WEB サーバー ■ APP サーバー ■ DB サーバー APP サーバー構築にむけ、様々な言語のフレームワークが存在しますが、近年、フロントエンド SPA（Single Page Application）構築を兼ねるフレームワークが注目を集めています。

Slide 9

Slide 9 text

第１章　MPA と SPA WEB 3層構造。WEB アプリケーション構築における標準的なシステム構成。 ■ WEB サーバー ■ APP サーバー ■ DB サーバー本日の題材である「Next.js」が、そのひとつです。 TypeScript（JavaScript）でコードを書き、Node.js で稼働します。

Slide 10

Slide 10 text

第１章　MPA と SPA MPA（Multi Page Application）とは？ ■ 書き換えの粒度が「ページ単位」 ■ ページリクエストに応じ、サーバーが HTML ページをレスポンス ■ 複数のページで構成され、リクエストとページが１体１の関係 SPA の対義語として用いられることが多く、本日の研修でも対義語として用います。

Slide 11

Slide 11 text

第１章　MPA と SPA MPA（Multi Page Application）とは？ ■ 書き換えの粒度が「ページ単位」 ■ ページリクエストに応じ、サーバーが HTML ページをレスポンス ■ 複数のページで構成され、リクエストとページが１体１の関係オリジンサーバーで処理をするとき、データ取得完了までレスポンス待ちになる。

Slide 12

Slide 12 text

第１章　MPA と SPA SPA（Single Page Application）とは？ ■ 書き換えの粒度が「UIコンポーネント単位」 ■ 骨格となる HTML ページを受け取るところまでは MPA と同じ ■ JavaScript で動的に UIコンポーネントや URL を書き換えるページは表示されたまま「部分的に書き換える」ため、データ取得中も何かしらの情報を提供できる。

Slide 13

Slide 13 text

第１章　MPA と SPA SPA を採用するメリット ■ ユーザー体験が良い：より良い体験が、サービス価値最大化に貢献 ■ オーバーヘッドが少ない：必要に応じて、必要なデータだけを取得 ■ 責務の分離：モノリスな MPA からの脱却

Slide 14

Slide 14 text

第１章　MPA と SPA SPA を採用するメリット ■ ユーザー体験が良い：より良い体験が、サービス価値最大化に貢献 ■ オーバーヘッドが少ない：必要に応じて、必要なデータだけを取得 ■ 責務の分離：モノリスな MPA からの脱却 ✅ サービス価値最大化貢献と、システム全体最適化貢献が SPA 採用のメリット。 🎥 参考動画 Google I/O：Core Web Vitals によるビジネスインパクト

Slide 15

Slide 15 text

第１章　MPA と SPA SPA を採用するメリット ■ ユーザー体験が良い：より良い体験が、サービス価値最大化に貢献 ■ オーバーヘッドが少ない：必要に応じて、必要なデータだけを取得 ■ 責務の分離：モノリスな MPA からの脱却「Next.js」は APP サーバーを兼ねることが可能な、 SPA 構築フレームワークです。コンポーネントライブラリの「 React」をベースとしています。

Slide 16

Slide 16 text

UIコンポーネントライブラリの「 React」について、基本的な概略を説明、実際に触れていきます。第２章　React ハンズオン

Slide 17

Slide 17 text

第２章　React ハンズオン UIコンポーネントライブラリの「 React」について ■ UIコンポーネントとは、ブラウザで情報を表示・操作するもの（ HTML） ■ UIコンポーネントは、JSX で記述する ■ JSX は JavaScript の拡張構文で、HTML のようなタグ構文に倣っている ■ JavaScript -> JSX、TypeScript -> TSX MPA フレームワークで View を担っていた、テンプレートエンジンと責務は近い。 Next.js 研修に最低限の理解は必要なので、手取り早く試して概念を掴みましょう

Slide 18

Slide 18 text

第２章　React ハンズオン【実技】CodeSandbox で試してみよう ✏ https://codesandbox.io/　にアクセス　・GitHub または Google アカウントでサインイン　・「Create Sandbox」を押下　・「React Typescript」をテンプレートから選択 CodeSandbox は、環境構築不要・ブラウザだけで、すぐに動くコードを試せます。

Slide 19

Slide 19 text

第２章　React ハンズオンはじめに表示される「 App.tsx」のなかに、コードを書いていきます。真ん中がエディタ、右がコンパイル結果です。

Slide 20

Slide 20 text

第２章　React ハンズオン ✏ 「

Hello Codesandbox

」の文字列を編集してみよう ✏ 好きな HTML タグを書き、中括弧に式を書いてみよう

Slide 21

Slide 21 text

第２章　React ハンズオン ✏ タグを書いて、 onClick イベントのハンドラー関数を渡してみよう ✏ onClick ハンドラー関数に、console.log(‘hello’) を仕込んでみよう

Slide 22

Slide 22 text

第２章　React ハンズオン ✏ 書いたタグを Button 関数（コンポーネント）に切り出してみよう ✏ コンポーネントを 3つ並べてみよう

Slide 23

Slide 23 text

第２章　React ハンズオン ✏ コンポーネントに Props（引数）{ value: number } を型注釈してみよう ✏ コンポーネント 3つに、異なる value を渡してみよう

Slide 24

Slide 24 text

✏ 配列を作り、コンポーネント内で出力してみよう（ map 関数を使用） ✏ コンポーネント 3つを、map 関数出力に書き換えてみよう第２章　React ハンズオン

Slide 25

Slide 25 text

✏ コンポーネントをコンポーネントにリネームしよう ✏ コンポーネントに状態を保持し、カウントアップ機能を作り込んでみよう第２章　React ハンズオン

Slide 26

Slide 26 text

✏ を押下して、ニュースデータを取得、コンポーネントに表示してみよう https://hacker-news.firebaseio.com/v0/item/31000386.json 第２章　React ハンズオン

Slide 27

Slide 27 text

React ベースのフレームワークである Next.js の基礎を解説、いくつかの抑えておきたい概念を説明します。第３章　Next.js の基礎と概念

Slide 28

Slide 28 text

第３章　Next.js の基礎と概念 Next.js は、React ベースのフレームワーク ✅ 簡単に SPA 開発が始められる ✅ 素早く SPA 開発が進められる ✅ 高品質な SPA を作れる

Slide 29

Slide 29 text

Slide 30

Slide 30 text

第３章　Next.js の基礎と概念 ✅ 簡単に SPA 開発が始められる ■ Node.js がインストールされていれば、 CLI 一つでプロジェクト作成可能 ■ 過去、整備が大変だった開発環境も、デフォルトで整備済み　・Webpack：バンドラー設定　・TypeScript：トランスパイラ設定　・ESLint：コードリンター設定【実技】create-next-app でプロジェクトを作ってみよう（黄色プロジェクト名は任意） ✏ $ npx create-next-app nextjs-sandbox --typescript --use-npm ✏ $ cd nextjs-sandbox && npm run dev

Slide 31

Slide 31 text

第３章　Next.js の基礎と概念 ✅ 素早く SPA 開発が進められる ■ ファイルシステムベースのルーティング　・フォルダ構成が、そのままページルーティングになる

Slide 32

Slide 32 text

第３章　Next.js の基礎と概念 ✅ 素早く SPA 開発が進められる ■ ファイルシステムベースのルーティング　・フォルダ構成が、そのままページルーティングになる ■ 規定の関数を export すれば、フレームワークのレールに乗れる　・特定ページの表示（レンダリング）方法など

Slide 33

Slide 33 text

第３章　Next.js の基礎と概念 ✅ 素早く SPA 開発が進められる ■ ファイルシステムベースのルーティング　・フォルダ構成が、そのままページルーティングになる ■ 規定の関数を export すれば、フレームワークのレールに乗れる　・特定ページの表示（レンダリング）方法など【実技】ページを増やしてみよう ✏ $ cp pages/index.tsx pages/hello.tsx

Slide 34

Slide 34 text

第３章　Next.js の基礎と概念 ✅ 高品質な SPA を作れる ■ SPA はバンドルサイズの肥大化が課題　・SPA はクライアントサイドの再描画が基本　・初回ロードするファイルが多いほど、ユーザーを待たせてしまう

Slide 35

Slide 35 text

第３章　Next.js の基礎と概念 ✅ 高品質な SPA を作れる ■ SPA はバンドルサイズの肥大化が課題　・SPA はクライアントサイドの再描画が基本　・初回ロードするファイルが多いほど、ユーザーを待たせてしまう ■ Next.js はバンドルサイズの肥大化を避けられる　・ページ単位で、チャンク分割される　・遷移先ページで必要なファイルが、必要なタイミングで読み込まれる Next.js は、サイズ肥大化をあまり意識する必要がない

Slide 36

Slide 36 text

第３章　Next.js の基礎と概念 ✅ 高品質な SPA を作れる ■ APP サーバーへの負荷低減　・ページの性質に応じて、最適な提供方法を選択できる　・可能なページは、事前に HTML を生成しておく、など重要なポイントであり、研修のメインテーマです

Slide 37

Slide 37 text

第３章　Next.js の基礎と概念抑えておきたい、3つの両極 ■ 開発サーバー／本番サーバー ■ ビルドタイム／ランタイム ■ クライアントサイド・レンダリング／サーバーサイド・レンダリング Next.js は、クライアント（ブラウザ）で実行されるコードだけでなく、サーバーで実行されるコードも含みます。

Slide 38

Slide 38 text

第３章　Next.js の基礎と概念開発サーバー／本番サーバー ■ 開発サーバー　・Next.js に備わっている、開発モードのサーバー（ npm run dev） ■ 本番サーバー　・Next.js プロジェクトをビルド（ npm run build）　・ビルド後、起動した本番サーバー（ npm start）

Slide 39

Slide 39 text

第３章　Next.js の基礎と概念ビルドタイム／ランタイム ■ ビルドタイム　・Next.js プロジェクトを、ビルドする時 ■ ランタイム　・アプリの稼働中、コードが実行される時

Slide 40

Slide 40 text

第３章　Next.js の基礎と概念クライアントサイド・レンダリング／サーバーサイド・レンダリング ■ クライアントサイド・レンダリング　・React コードを「ブラウザ」で HTML 化、ページを書き換える ■ サーバーサイド・レンダリング　・React コードを「サーバー」で HTML 化、ブラウザに送る

Slide 41

Slide 41 text

第３章　Next.js の基礎と概念 3種類のレンダリング（ HTML生成） ■ CSR：クライアントサイド・レンダリング（ Client-Side Rendering） ■ SSR：サーバーサイド・レンダリング（ Server-Side Rendering） ■ SSG：静的サイトの生成（ Static Site Generation）ページ単位・コンポーネント単位で、選ぶことができます。なぜ、これほど種類があるのでしょうか？

Slide 42

Slide 42 text

3種類のレンダリング（ HTML生成） ✅ 表示するデータに応じて、使い分ける必要があるから　・ページに表示するデータは、他人と共有できるものか？　・ページに表示するデータは、更新頻度がどれほどか？　・ページは、どの様なデータで構成されているか？第３章　Next.js の基礎と概念

Slide 43

Slide 43 text

第３章　Next.js の基礎と概念レイアウトが全く同じでも、サイトが提供するデータによって、最適なレンダリングは異なります。右の様なレイアウトを例えに、いくつかのページを見てみましょう。

Slide 44

Slide 44 text

例）ニュースサイト・TOPページの場合 ■ A）ヘッドライン ■ B）カテゴリ一覧 ■ C）トピック一覧のリンク全てパブリックデータであり、他人と共有できるものです。 B A C 第３章　Next.js の基礎と概念

Slide 45

Slide 45 text

例）ニュースサイト・TOPページの場合 ■ A）ヘッドライン ■ B）カテゴリ一覧 ■ C）トピック一覧のリンク配信経路上のキャッシュサーバー ※でキャッシュすることが出来ます。この様なページは SSG が適しています。 ※ CDN・nginx など B A C 第３章　Next.js の基礎と概念

Slide 46

Slide 46 text

例）SaaS・ダッシュボードの場合 ■ A）プロジェクトのメトリクス ■ B）サブプロジェクト一覧 ■ C）ユーザーの行動履歴全てパーソナルデータであり、他人と共有することはできません。 B A C 第３章　Next.js の基礎と概念

Slide 47

Slide 47 text

例）SaaS・ダッシュボードの場合 ■ A）プロジェクトのメトリクス ■ B）サブプロジェクト一覧 ■ C）ユーザーの行動履歴配信経路上にキャッシュできないので、オリジンサーバーが応答します。この様なページは SSR が適しています。 B A C 第３章　Next.js の基礎と概念

Slide 48

Slide 48 text

例）旅行・宿泊予約サイトの場合 ■ A）キャンペーンへのリンク ■ B）特集ページへのリンク ■ C）ログインユーザー情報大部分はパブリックデータですが、一部、パーソナルデータです。 B A C 第３章　Next.js の基礎と概念

Slide 49

Slide 49 text

例）旅行・宿泊予約サイトの場合 ■ A）キャンペーンへのリンク ■ B）特集ページへのリンク ■ C）ログインユーザー情報青い部分だけをキャッシュで返し、緑の部分だけを後から書き換えます。この様なエリアは CSR が対応します。 B A C 第３章　Next.js の基礎と概念

Slide 50

Slide 50 text

紹介したようにレイアウトが全く同じでも、プロジェクトによって最適なレンダリングが異なることが分かります。さらには、同じプロジェクトでも「このページはコレ・あのページはアレ」という見極めが必要、ということです。第３章　Next.js の基礎と概念

Slide 51

Slide 51 text

配信経路上のキャッシュを活用すると、高速・低負荷でページを提供できます。しかし、キャッシュできるデータは限られます。どの様にレンダリングするか？という判断は、共有キャッシュ化の判断、とも言い換えられます。第３章　Next.js の基礎と概念

Slide 52

Slide 52 text

「ページ単位・エリア単位」でレンダリングを選択出来れば、配信を最適化することができます。これこそが Next.js の強みであり、 WEB サイト・アプリケーション配信のベストプラクティスです。第３章　Next.js の基礎と概念

Slide 53

Slide 53 text

Next.js の重要な機能のうちのひとつ、静的生成について、手を動かしながら理解を深めます。第４章　静的生成ハンズオン

Slide 54

Slide 54 text

第４章　静的生成ハンズオンページには「データ取得関数」を定義することができます ■ データ取得関数とは？　・Next.js 特有の、規程関数　・ページに必要なデータを、予め取得する関数　・pages フォルダに含まれる「ページファイル」で使う関数　　・pages フォルダ内の .tsx ファイルは基本的に「ページファイル」扱い ✅ データ取得関数は、決まった名前で export する

Slide 55

Slide 55 text

第４章　静的生成ハンズオンページを静的生成するためには「 getStaticProps 関数」を使います ■ getStaticProps 関数とは？　・静的生成に必要なデータを、予め取得する関数　・関数はブラウザで実行されることはなく、 Node.js プロセスで実行される ✅ getStaticProps 関数の有無で「静的生成ページか？」を、 Next.js が自動判断

Slide 56

Slide 56 text

第４章　静的生成ハンズオン【実技】getStaticProps でレンダリングしよう ✏ getStaticProps 関数で時刻を表示しよう　・getStaticProps 関数内で console.log(new Date().toISOString()) 　・npm run devでは、リクエストの度に html レスポンスが変わる　・npm run build && npm startでは、html レスポンスが固定 ✅ 開発サーバー・本番サーバーでは、挙動が異なる ✅ 以降基本的に「本番サーバーで作業するもの」として研修を進めます

Slide 57

Slide 57 text

第４章　静的生成ハンズオン【実技】getStaticProps でレンダリングしよう ✏ getStaticProps 関数でデータを取得しよう　・hacker-news で記事タイトルを取得　・npm run devでは、リクエストの度に取得　・npm run build && npm startでは、ビルド時に取得 ✅ 本番サーバーでは、データ取得の回数が少ない（必要な時のみ） ✅ 結果、ページリクエスト時にデータ取得しなくてよい -> レスポンスが速い ✅ 結果、APIサーバーへの負荷が少ない ❌ データが生成時のものに固定され、固定内容が配信される

Slide 58

Slide 58 text

第４章　静的生成ハンズオン【実技】ISR を体験しよう ✏ revalidate オプションで「秒」を指定してみよう　・指定時間経過前：予め生成された HTML(キャッシュ)が返却される　・指定時間経過後：予め生成された HTML(キャッシュ)が返却される　　・直後は、古い内容が返る　　・裏側で「再生成」が試行される　　・再生成が完了すると、次回以降リクエストは新しい内容が返る ✅ ページ生成後、指定経過時間を超過すると「再生成」が試行される

Slide 59

Slide 59 text

第４章　静的生成ハンズオン【実技】ISR を体験しよう ✏ revalidate オプションを付与すると ISR（Incremental Static Regeneration）となる　・一定期間、古いデータ配信を許容する変わり、パフォーマンスが高まる　・ビルドタイムで HTML が事前生成される場合もある　・オンデマンドで再生成される場合もある ✅ revalidate オプションがあると、本番サーバーでもデータ取得が発生する ✅ revalidate は「一定時間古いデータを返すことを許容」できる要件に適合 ❌ 一定期間古いデータを返すことが許容できない場合、 SSG はそもそも不向き

Slide 60

Slide 60 text

第４章　静的生成ハンズオン【実技】動的ルートを参照してみよう ■ 動的ルートとは？　・path param が参照できる（url path に含まれる変数）ルート　・例えば /users/1 というルートは、ユーザー IDに相当する「1」が参照できる ✏ pages/users/[id].tsx を作ってみよう　・getStaticProps関数に、GetStaticProps型注釈をしてみよう　・引数のctx から、ctx.params.idを参照、console.log しよう

Slide 61

Slide 61 text

第４章　静的生成ハンズオン【実技】getStaticPaths を使ってみよう ■ getStaticPaths とは？　・動的ルートを参照する、 getStaticProps と一緒に利用するもの　・ビルドタイムに「生成する・しない」ページの数を決めるもの　・オンデマンドで「生成する・しない」ページの振る舞いを決めるもの https://nextjs.org/docs/basic-features/data-fetching/get-static-paths

Slide 62

Slide 62 text

第４章　静的生成ハンズオン【実技】getStaticPaths を使ってみよう ■ fallback: false とは？　・「オンデマンドで生成しない」指定　・「paths」に含まれる要素の数だけ、ビルドタイムにページ生成　・「paths」に含まれない path 相当ページは「404」

Slide 63

Slide 63 text

第４章　静的生成ハンズオン【実技】getStaticPaths を使ってみよう ■ fallback: true とは？　・「オンデマンドで生成する」指定　・「paths」に含まれる要素の数だけ、ビルドタイムにページ生成　・「paths」に含まれない path 相当ページは「オンデマンド生成」を試行する

Slide 64

Slide 64 text

第４章　静的生成ハンズオン【実技】getStaticPaths を使ってみよう ✏ fallback: false を試してみよう　・npm run build && npm startを実行、ビルドログを見てみて　・.next/server/pages/users/に生成されている HTML を見てみて　・http://localhost:3000/users/4にアクセスしてみて ✅ paths に対応するページが、ビルドタイムに生成されている ✅ paths に対応しないページは、 404 が返される

Slide 65

Slide 65 text

第４章　静的生成ハンズオン【実技】getStaticPaths を使ってみよう ✏ fallback: true を試してみよう　・npm run build && npm startを実行、ビルドログを見てみて　・.next/server/pages/users/に生成されている HTML を見てみて　・http://localhost:3000/users/4にアクセスしてみて ✅ paths に対応するページが、ビルドタイムに生成されている ✅ paths に対応しないページは、アクセスすることで生成される ※ ページ表示時に必要な XXX.html と、ナビゲーションに必要な XXX.json が同時に生成される

Slide 66

Slide 66 text

第４章　静的生成ハンズオン【実技】静的生成まとめ ■ データはパブリックに共有できるものに限られる ■ リクエストに応じて「オンデマンドで HTML を静的生成」することが Next.js の特徴　・再生成契機となる、経過時間の指定ができる　・動的ルートも、オンデマンド生成があるため対応できる　・事前にすべて生成することもできる ✅ ビルドタイムに全ページ生成する必要がないので、ビルドが速い ✅ 配信データが、少し古くても良いか否かに応じて、細かく制御ができる

Slide 67

Slide 67 text

Next.js の重要な機能のうちのひとつ、動的生成について、手を動かしながら理解を深めます。第５章　動的生成ハンズオン

Slide 68

Slide 68 text

第５章　動的生成ハンズオン Next.js 最大の強みは「ページ単位で」レンダリング（事前生成）を選べることです ■ SSG で、ビルドタイムに事前生成（ getStaticProps） ■ ISR で、オンデマンドに事前生成（getStaticProps） ■ SSR で、リアルタイムに事前生成（ getServerSideProps） ✅ getStaticProps (SSG,ISR) / getServerSideProps (SSR) のいずれか 🗒 SSRは Next.js に限らず、React 単体 + 簡易サーバーでも提供可能な、普遍的機能

Slide 69

Slide 69 text

第５章　動的生成ハンズオン【実技】getServerSideProps を使ってみよう ✏ getServerSideProps でリクエスト毎の実行を確認　・関数内に console.log(new Date().toISOString()) を記述　・ブラウザから該当ページへアクセス　・アクセス時刻が出力されることを確認　・返却内容を Network タブ、Preview/Response 内訳を確認して ✅ リクエストのたび、生成内容が異なる ✅ export されているデータ取得関数で、ページのレンダリング方法が決定される

Slide 70

Slide 70 text

第５章　動的生成ハンズオン【実技】getServerSideProps を使ってみよう ✏ getServerSideProps で header の中を確認　・getServerSideProps関数にGetServerSideProps型を注釈　・引数ctxを、console.log で出力してみて ✅ リクエストの内訳が、確認できる

Slide 71

Slide 71 text

第５章　動的生成ハンズオン【実技】getServerSideProps を使ってみよう ✏ nookies で cookie の値を読み書きしよう　・Next.js で cookie を扱いやすくするライブラリ　・npm i nookiesを実行、インストール　・setCookie、parseCookies で値の読み書きを確認　・cookie 内容を Network タブ、Cookies で確認して ✅ クライアントに紐づいた Cookie の内容が、読み書きできる https://www.npmjs.com/package/nookies

Slide 72

Slide 72 text

第５章　動的生成ハンズオン【実技】API Routes を使ってみよう ■ API Routes とは？　・pages/api に定義することで、Web API 定義ができる　・ページ出力（HTML）ではなく、JSON を返すことが一般的　・GET 以外に POST / PUT / DELETE などのメソッドにも対応　・pages と同様、ファイルシステムに則ったルーティング

Slide 73

Slide 73 text

第５章　動的生成ハンズオン【実技】API Routes を使ってみよう ✏ JSON を返してみよう　・pages/api/hello.ts のファイルを確認　・res.status(200).json({ }) の内容を書き換えてみて ✏ nookies で cookie の値を読み書きしよう　・getServierSideProps でセットした値を読み書きしてみて ✅ getServerSideProps と同じように、req / res を扱える

Slide 74

Slide 74 text

ORM ライブラリの Prisma を利用し DB 接続、簡単な記事投稿 CRUD アプリ開発を体験します。第６章　簡単な CRUD アプリを開発

Slide 75

Slide 75 text

第６章　簡単な CRUD アプリを開発【実技】DBサーバーと接続して、 CRUD アプリを作ってみよう ✏ 以下のリポジトリをクローン　・https://github.com/recruit-tech/bootcamp-2022-nextjs 　・docker-compose up -d で、コンテナを立ち上げる　・PostgreSQL が立ち上がっていることを確認

Slide 76

Slide 76 text

第６章　簡単な CRUD アプリを開発【実技】ORM ライブラリの Prisma を使います ■ Prisma ざっくり概要　・Prisma Schema Language（PSL）でスキーマを書く　・スキーマから、各言語向けの Client が生成できる　・スキーマから、マイグレーションファイルが生成できる　・TypeScript との親和性が高い今日の研修では Prisma 詳説はしません。予め用意したスキーマで開発を進めます。 ※ バリデーション・脆弱性対策に関しては、本日は SKIP

Slide 77

Slide 77 text

第６章　簡単な CRUD アプリを開発【実技】DBサーバーと接続して、 CRUD アプリを作ってみよう ✏ Prisma をセットアップしよう　・npm run db:migrate でマイグレーション、 seeding を実行 ✅ リセットは npm run db:migrate:reset で

Slide 78

Slide 78 text

第６章　簡単な CRUD アプリを開発【実技】DBサーバーと接続して、 CRUD アプリを作ってみよう ✏ Prisma Studio を使ってみよう　・Prisma に標準バンドルされている GUI 　・npm run db:studio で Prisma Studio たちあげ　・http://localhost:5555 にアクセス ✅ ﬁxture が DB に挿入されていることを確認

Slide 79

Slide 79 text

第６章　簡単な CRUD アプリを開発【実技】DBサーバーと接続して、 CRUD アプリを作ってみよう ✏ Prisma Studio でレコードを追加してみよう　・Add record ボタンを押下　・新規内容を入力して　・Save 1 change ボタンを押下 ✅ Prisma Studio で、DB を操作できます

Slide 80

Slide 80 text

第６章　簡単な CRUD アプリを開発【実技】DBサーバーと接続して、 CRUD アプリを作ってみよう ✏ getServerSideProps で PrismaClient を使いユーザー一覧を表示しよう　・npm run dev で開発サーバーを再起動してみて　・http://localhost:3000/users にアクセスしてみて　・pages/users/index.tsx を開いて　・const users = await client.user.findMany() の型推論を確認して ✅ Prisma Client は schema.prisma から生成 ✅ TypeScript の型推論が優れている

Slide 81

Slide 81 text

第６章　簡単な CRUD アプリを開発【実技】DBサーバーと接続して、 CRUD アプリを作ってみよう ✏ getServerSideProps で PrismaClient を使いユーザー詳細を表示しよう　・http://localhost:3000/users/1 にアクセスしてみて　・pages/users/[id]/index.tsx を開いて　・getServerSideProps の引数 ctx から params.id を取得してみて ✏ 課題１：エラー「オブジェクトは 'undefined' である可能性があります」を消すには？

Slide 82

Slide 82 text

第６章　簡単な CRUD アプリを開発【実技】DBサーバーと接続して、 CRUD アプリを作ってみよう ✏ getServerSideProps で PrismaClient を使いユーザー詳細を表示しよう　・id から該当ユーザーレコードを取得してみて　・const user = await client.user.findUnique({ where: { id: +ctx.params.id } }) ✏ 課題２： const user: User | null の型推論を、const user: User にするためには？

Slide 83

Slide 83 text

第６章　簡単な CRUD アプリを開発【実技】DBサーバーと接続して、 CRUD アプリを作ってみよう ✏ getServerSideProps で PrismaClient を使いユーザー詳細を表示しよう　・Page コンポーネントに、ユーザーの名前・ Email を表示してみて　・Page コンポーネントに、現在時刻を表示してみて ✏ 課題３：ユーザー詳細を表示してみて

Slide 84

Slide 84 text

第６章　簡単な CRUD アプリを開発【実技】DBサーバーと接続して、 CRUD アプリを作ってみよう ✏ API Routes で値を受け取り、ユーザーレコードを追加してみよう　・pages/users/new.tsx を開いて　・入力値をどの様に form で送るか、一緒に確認していきます　・pages/api/users/index.ts を開いて　・送られた入力値でどの様にレコード作成するか、一緒に確認していきます ✅ ブラウザ -> DB 更新の一連の流れ ※ バリデーション・脆弱性対策に関しては、本日は SKIP

Slide 85

Slide 85 text

第６章　簡単な CRUD アプリを開発【実技】DBサーバーと接続して、 CRUD アプリを作ってみよう ✏ ① API Routes で値を受け取り、ユーザーレコードを更新してみよう ✏ ② API Routes で値を受け取り、ユーザーレコードを削除してみよう ✏ ③ API Routes で適切なバリデーション、エラーレスポンスを返してみよう ✏ ④ ユーザー画面を参考に、記事投稿の CRUD 画面をつくってみよう ✏ ⑤ ユーザーAPIを参考に、記事投稿の CRUD API をつくってみよう ⏰ 制限時間まで、自由に作り込んでみてください※ ※ Prisma Schema を追加・編集するのもありです

Slide 86

Slide 86 text

Vercel に Next.js アプリを展開する利点を解説しつつ、実際に現場でどの様に使われているか説明します。第７章　現場での使われ方と最新動向

Slide 87

Slide 87 text

第７章　現場での使われ方と最新動向 Next.js 現場での使われ方 ■ Vercel は使いますか？　・あまり積極的に使われていません※ 　・セキュリティ要件がクリアできない　・インフラ構成に適合しない（構成に自由度がない）　・日本法人がない、サポート面が薄い、など ※講師の観測範囲に限ります

Slide 88

Slide 88 text

第７章　現場での使われ方と最新動向 Next.js 現場での使われ方 ■ SSG は使いますか？　・デプロイパイプラインで、 SSG するパターンはあります※ 　・完全に静的な Next.js をビルドするパターンです　・完全に静的な Next.js と API サーバーによる構成 ✅ Full CSR の SPA 構築ツールとして使う ※ Static HTML Export による、完全に静的な出力

Slide 89

Slide 89 text

第７章　現場での使われ方と最新動向 Next.js 現場での使われ方 ■ ISR は使いますか？　・ISR はキャッシュ制御ノウハウが少ないため、利用実績はない（はず）　・SSR + 配信経路キャッシュで、 ISR と同等のことが出来る（※ 1）　　・ISR の仕組みを、積極的に採用する理由がそこまでない ✅ 配信経路キャッシュ＝ Next.js 前段の CDN や nginx などのキャッシュサーバー（※ 2） ※1 細部に違いがあり、考慮すべき点があります／ ※2 プロジェクト毎に構成は異なります

Slide 90

Slide 90 text

第７章　現場での使われ方と最新動向【実技】SSR + nginx プロキシキャッシュで、 ISR の再現をしよう ■ nginx は、先ほどの CRUD アプリに組み込み済みです　・http://localhost:3000で、Next.js 本番サーバーが起動していることを確認　・http://localhost:3001で、nginx が起動していることを確認　・nginx -> WEB ／ Next.js -> APP ／ PostgreSQL -> DB ✅ 先ほどの CRUD アプリは、簡素な WEB 3層構造 ✅ nginx が Next.js の前段にたっている状態

Slide 91

Slide 91 text

第７章　現場での使われ方と最新動向【実技】SSR + nginx プロキシキャッシュで、 ISR の再現をしよう ✏ Cache-Control ヘッダーを設定してみよう（ getServerSideProps 編）　・pages/users/index.tsx の getServerSideProps 関数を開いて　・関数内に await new Promise(resolve => { setTimeout(resolve, 1000) }) を記述※ 　・関数内に res.setHeader('Cache-Control', 'max-age=10') を記述　・npm run build && npm startで本番サーバーを再起動してみて　・http://localhost:3000/usersとhttp://localhost:3001/usersを比較してみて 🗒 開発サーバーでは Cache-Control が強制上書きされてしまうので注意 ※ 重いクエリが実行されていることをエミュレートするための遅延関数

Slide 92

Slide 92 text

第７章　現場での使われ方と最新動向【実技】SSR + nginx プロキシキャッシュで、 ISR の再現をしよう ✏ Cache-Control ヘッダーを設定してみよう（ getServerSideProps 編）　✅ nginx からレスポンスが返ってきている事を確認

Slide 93

Slide 93 text

第７章　現場での使われ方と最新動向【実技】SSR + nginx プロキシキャッシュで、 ISR の再現をしよう ✏ Cache-Control ヘッダーを設定してみよう（ getServerSideProps 編）　✅ キャッシュヒットした時、 TTFB が速い

Slide 94

Slide 94 text

第７章　現場での使われ方と最新動向【実技】SSR + nginx プロキシキャッシュで、 ISR の再現をしよう ✏ Cache-Control ヘッダーを設定してみよう（ API Routes 編）　・pages/api/hello.ts の handler 関数を開いて　・関数内に await new Promise(resolve => { setTimeout(resolve, 1000) }) を記述　・関数内に res.setHeader('Cache-Control', 'max-age=10') を記述　・npm run build && npm startで本番サーバーを再起動してみて　・http://localhost:3001/api/helloとhttp://localhost:3001/api/helloを比較してみて 🗒 開発サーバーでは Cache-Control が上書きされてしまうので注意 ※ S3バケットに配備した、マスタデータへのアクセス数を間引くようなケースで有効

Slide 95

Slide 95 text

第７章　現場での使われ方と最新動向【実技】SSR + nginx プロキシキャッシュで、 ISR の再現をしよう ✏ Cache-Control ヘッダーを設定してみよう（ API Routes 編）　✅ nginx からレスポンスが返ってきている事を確認

Slide 96

Slide 96 text

第７章　現場での使われ方と最新動向【実技】SSR + nginx プロキシキャッシュで、 ISR の再現をしよう ✏ Cache-Control ヘッダーを設定してみよう（ API Routes 編）　✅ キャッシュが返ってきた時、 TTFB が速い

Slide 97

Slide 97 text

第７章　現場での使われ方と最新動向【実技】SSR + nginx プロキシキャッシュで、 ISR の再現をしよう ✏ Cache-Control ヘッダーを設定してみよう ✅ nginx プロキシキャッシュが返り、オリジンサーバーに到達していない ✅ 一定期間キャッシュを返す挙動が、 ISR の revalidate オプションに近い ※ 実際は必要に応じてキャッシュをパージするフローも必要

Slide 98

Slide 98 text

第７章　現場での使われ方と最新動向 CDN・プロキシキャッシュは、 Next.js 特有のものではない ■ Cache-Control ヘッダーは構成をみて適切に　・利用する CDN によって、ディレクティブが微妙に異なる　・キャッシュしてはいけないデータに要注意　・「キャッシュ事故」で検索すると、これにまつわる記事を参照できる ✅ 配信経路上にキャッシュして良いデータか、十分注意する

Slide 99

Slide 99 text

第７章　現場での使われ方と最新動向 Vercel + ISR は何が利点？ ■ getStaticProps では、req がそもそも参照できない　・キャッシュ事故のリスクヘッジになる ■ 配信経路上のキャッシュ（インフラ構成）を考えなくて済む　・配信最適化のノウハウが、 APPコードに隠蔽されている　・Edge Computing など、最新のインフラ構成もすぐに試せる ✅ アカウント一つで、すぐに試すことができる ✅ Vercel が使えなくとも、配信構成の参考として役立つ

Slide 100

Slide 100 text

第７章　現場での使われ方と最新動向残りの時間で、Next,js 最新の動向を、別資料で紹介します。【おさらい：Next.js 公式の学習コンテンツもお勧めです】 https://nextjs.org/learn/foundations/about-nextjs