基礎から学ぶNext.js

OCHaCafe Season8 #2の資料です。
https://ochacafe.connpass.com/event/308830/

セッションアーカイブ動画：https://youtu.be/Ywd2J3GZ8wQ

Transcript

1. 基礎から学ぶ Next.js Oracle Cloud Hangout Café – Season8 #2 Kyotaro Nonaka Oracle Corporation Japan
2. Copyright © 2024, Oracle and/or its affiliates. 2 1.はじめに 2.キホンの「キ」 3.ReactでSPA 4.Next.jsでSSR/SSG 5.まとめ Agenda
3. Copyright © 2023, Oracle and/or its affiliates. 3 野中 恭大郎 ソリューション・アーキテクト 日本オラクル株式会社 • AppDev/Messaging/NoSQL/Frontend • Oracle Cloud Hangout Caféメンバー /Oracle Groundbreakers Advocate • 某パッケージの開発者でした • Oracleにjoinしてもう4年半 • 趣味は釣りとかキャンプとか(最近行けてない) @non_kyon
4. Copyright © 2024, Oracle and/or its affiliates. 4 Next.jsを使ったことがない！という人でも、 アプリを作るための知識ややり方が身につく を目指します 本日のゴール
5. Copyright © 2023, Oracle and/or its affiliates. 5 キホンの「キ」 まずはキーワードを理解しよう
6. Copyright © 2024, Oracle and/or its affiliates. 6 1995年 JavaScript誕生 • Webブラウザ(Netscape)を操作するための言語 • ブラウザ間の非互換問題多発 • 1997年よりECMAScriptとして標準化が始まる 2006年 jQueryの登場 • ブラウザに依存しないDOM操作 • DOM(Document Object Model): ウェブページ(HTML)とスクリプトやプログラミング言語を接続するもの • Ajax • ブラウザとサーバーサイド間の非同期通信を実現 • 画面遷移を伴わない動的Webアプリケーション 2009年 Node.jsの登場 • サーバーサイドのJavaScript実行環境 JavaScriptフロントエンドの歴史 黎明期
7. Copyright © 2024, Oracle and/or its affiliates. 7 2012年 AngularJS 1.0.0 のリリース(初版は2009年) • シングルページアプリケーション(SPA)の実現 • MVCモデルによる記述 • フルスタックフレームワーク 2013年 Reactの登場 • 仮想DOMによるレンダリングの高速化/効率化 • 1方向データフロー • JSX(後述) 2014年 Vue.jsの登場 • コンポーネント・セントリック • ルーティングや状態管理はあくまでもサブ JavaScriptフロントエンドの歴史 3大フレームワークの登場
8. Copyright © 2024, Oracle and/or its affiliates. 8 2016年 Next.jsの登場 • ReactベースのServer Side Renderingを実現 同年 Nuxt.jsの登場 • Vue.jsベースのServer Side Renderingを実現 2020年 SSGの登場 • Next.jsがStatic Site Generationをサポート • Nuxt.jsがStatic Site Generationをサポート JavaScriptフロントエンドの歴史 SSR/SSGの登場
9. Copyright © 2024, Oracle and/or its affiliates. 9 ウェブアプリの実装の一種 • 単一のHTMLファイルのみを読み込む • サーバ側で画面のレンダリングを行わない • CSR(Client Server Rendering)とも呼ばれる • 別な内容を表示する際にはコンポーネントを差分更新 • XMLHttpRequest • Fetch • Ajax 業務アプリによく利用される • データの送受信量を削減 • クライアントとサーバで処理量を分散 • より動的な画面の構築 Single Page Application(SPA) Client Server GET HTMLJS API(Ajax) JSON 差分更新 レンダリング
10. Copyright © 2024, Oracle and/or its affiliates. 10 クライアント側のパフォーマンス問題 • WebブラウザがWebページとスクリプトのダウンロードとレンダリングを担当するため、負荷が上がる • 特に初回のページ表示でパフォーマンスの問題が起きやすい 開発プロセス • 比較的新しい技術(かつトレンドの移り変わりも早い)のため、専門的な知識が必要 • フレームワークやツールの幅が広く、自由度も高い代わりに、コードの追跡が難しくなる SEO対策 • SPAはクライアントからのリクエストに応じてデータをロードするため • URLが変わらず、ページごとに固有のアドレスがない SPAの課題
11. Copyright © 2024, Oracle and/or its affiliates. 11 コンテンツ表示速度の高速化 • Web Serverがレンダリングと初回データロードを担当 • JavaScriptのダウンロードと実行が完了するまで表示されるのを待つ 必要がない • ユーザーはより早く、完全にレンダリングされたページを見ることが可能 • Core Web Vitals*メトリクスが向上し、ユーザー体験が改善 統一されたメンタルモデル • 同じ言語で、同じ宣言型の、コンポーネント指向のメンタルモデ ルを使って、アプリケーション全体を開発 SEO 向上 • 検索エンジンクローラーが完全にレンダーされたページを直接見る Server Side Rendering(SSR)の登場 Client Web Server 1. Request 4. HTMLファイル 5. API(Ajax) 6. JSON API Server 2. GET 3. レンダリング 7. 差分更新 ▪SPAと組み合わせて利用 *読み込み、インタラクティブ性、視覚的な安定性
12. Copyright © 2024, Oracle and/or its affiliates. 12 Web Serverを持つ必要がある • ブラウザの代わりにレンダリングを行うサーバ運用の考慮が必要 2段階のレンダリングの考慮 • SPAの差分更新と組み合わせるパターンがほとんどなので、設計と実装に考慮が必要 Server Side Rendering(SSR)の課題
13. Copyright © 2024, Oracle and/or its affiliates. 13 プリレンダリング • あらかじめWebページのレンダリング(ビルド)を行う • プリレンダリングされたページは、静的なHTMLファイルとして生成・提供 • リクエストが来るたびのレンダリングを行わない 優れたコンテンツ表示速度 • 出力内容が静的なHTMLとアセットであるため、低コストで簡単なデプ ロイが可能 • ビルド時に既に内容が分かっているデータを使用するページにのみ適用 • ドキュメント • ブログ • カタログ • データが変更される場合は、新しいデプロイが必要 Static Site Generation(SSG)の登場 Client Server etc. 1. Request 2. HTMLファイル Build Server 2. 配置 1. プリレンダリング
14. Copyright © 2024, Oracle and/or its affiliates. 14 オープンソースでクロスプラットフォームのJavaScript実行環境 • ECMAScriptに準拠 • Webサーバなどのスケーラブルなネットワークプログラムの記述を意図 • ブラウザ用のJavaScriptを書くフロントエンド開発者が、クライアント側の コードに加えてサーバー側のコードを書くことが可能 NPM • Node.jsのパッケージ管理ツール • Node.jsをインストールすれば利用できる • バージョン管理にはnというツールが便利(Windowsでは利用できないので注意) node.js サーバサイドのJavaScript実行環境
15. Copyright © 2023, Oracle and/or its affiliates. 15 ReactでSPA体験 Reactを使って、実際にSPA(Single Page Application)に触れてみよう
16. Copyright © 2024, Oracle and/or its affiliates. 16 bit.ly/ocha8-2-sample 本日のサンプルコード
17. Copyright © 2024, Oracle and/or its affiliates. 17 Viewを設計するだけで、Reactはデータの変更を検知 • 関連するコンポーネントだけを更新、描画 • 読みやすいコード、容易なデバッグ 自分自身の状態を管理するカプセル化されたコンポーネント作成 • コンポーネントをJavaScript/TypeScriptで書く • それらのコンポーネントを組み合わせ、UIを構築 node.jsを使いサーバ上でもレンダリング(SSR可能) React Native を使うことでモバイルアプリケーションの中でも動作 React UI構築のための JavaScript ライブラリ(フレームワークではない！)
18. Copyright © 2024, Oracle and/or its affiliates. 18 公式のSandboxをダウンロード • react.js • React本体 • react-dom.js • ReactのDOM操作を司る • babel.js • ビルド Reactを始めてみる Quickstart
19. Copyright © 2024, Oracle and/or its affiliates. 19 React座学 コンポーネントの追加 Buttonコンポーネントを定義 ・ MyAppコンポーネントを定義 ・ Buttonをコンポーネントを追加 MyAppコンポーネントをレンダー ▪sandbox.html
20. Copyright © 2024, Oracle and/or its affiliates. 20 JSXを使用することで、React上で簡単にHTMLを記述することが可能 • 仕様は任意 • 便利さゆえにReactプロジェクトのデファクトになる • HTML to JSXのコンバートツール React座学 JSX(JavaScript XML) const myElement = <h1>I Love JSX!</h1>; const root = ReactDOM.createRoot( document.getElementById('root’) ); root.render(myElement); ▪JSXで記述 const myElement = React.createElement( 'h1', {}, 'I do not use JSX!’ ); const root = ReactDOM.createRoot( document.getElementById('root’) ); root.render(myElement); ▪JSXを使わずに記述
21. Copyright © 2024, Oracle and/or its affiliates. 21 • 波括弧を使うことで、JSXからJavaScript に「戻る」ことが可能 • コード内の変数を埋め込んでUIに表示 React座学 データの表示(バインディング) userオブジェクトを定義 {}でuserのプロパティを表示 {}はJSXのAttributeにも使える ▪sandbox.html
22. Copyright © 2024, Oracle and/or its affiliates. 22 if文でJSXの条件分岐が可能 React座学 レンダリングの条件分岐 ?演算子の利用(JSX内で動 作) &&演算子の利用(JSX内で動 作)
23. Copyright © 2024, Oracle and/or its affiliates. 23 map()関数やfor文を使った配列のレンダーが可能 React座学 配列のレンダリング ▪配列の定義 ▪map()関数とJSXコンポーネント ▪parentに配置
24. Copyright © 2024, Oracle and/or its affiliates. 24 コンポーネントの中でイベントハンドラ関数を宣言することで、イベントに応答 React座学 イベントハンドラ
25. Copyright © 2024, Oracle and/or its affiliates. 25 コンポーネントに情報を「記憶」させて表示したいときは、コンポーネントにstateを追加 React座学 コンポーネントの情報管理 useStateのインポート 現在のstate state更新用の関数名 初期値
26. Copyright © 2024, Oracle and/or its affiliates. 26 useで始まる関数は、フック (Hook) と呼ばれる • useStateはReactが提供する組み込みのフック • 他のフックは以下のようなもの • コンテクストフック(useContext): 離れた親要素から情報を取得 • refフック(useRef): レンダリングに用いない情報を保持 • パフォーマンス関連フック • useMemo: 高負荷な計算の結果をキャッシュ • useCallback:関数定義をキャッシュ • 既存のフックを組み合わせて独自のフックを作成することが可能 React座学 フック
27. Copyright © 2024, Oracle and/or its affiliates. 27 React座学 コンポーネント間のデータ共有
28. Copyright © 2024, Oracle and/or its affiliates. 28 SPAのルーティング 「Single Page」なのにルーティング(ページ遷移) ？ • 実際はコンポーネントが置き換わっているだけ • ブラウザ上はURLも変わっているのでルーティングしているように見える • ライブラリやフレームワークの機能で実装 • 中身はJavaScriptのhistory API • ReactであればReact Router • Next.jsはフレームワークに内包
29. Copyright © 2024, Oracle and/or its affiliates. 29 Demo: ReactのSPAを眺める • コンポーネント • JSX • データ表示(バインディング) • 条件分岐レンダリング • 配列レンダリング • イベントハンドラ • state
30. Copyright © 2023, Oracle and/or its affiliates. 30 Next.jsでSSR/SSG体験 Next.jsを使って、SSR(Server-Side Rendering)/SSG(Static Site Generation)に触れてみよう
31. Copyright © 2024, Oracle and/or its affiliates. 31 • 2016年に初版リリース • UIの構築にReactコンポーネントを利用 • バンドルやコンパイルなどを抽象化 • 個人開発者から大規模なチームまで • 主な機能 • ルーティング • レンダリング • データ取得 • スタイリング • 最適化 • TypeScript対応 Next.js フルスタックのWebアプリケーションを構築するためのReactフレームワーク
32. Copyright © 2024, Oracle and/or its affiliates. 32 create-next-app の利用がおすすめ • Interactive/Non-interactive • npx(npmの同梱コマンド)/yarn/pnpm/bunx npxで実行 Interactiveモードでプロジェクトを作成(中身については後述) • src/ディレクトリのデフォルト選択肢はNoなので、最初はそこに注意 Next.jsを始めてみる Next.jsプロジェクトの作成 npx create-next-app@latest ※VSCodeでコーディングする際にはnext.js Extensionのインストールがおすすめ
33. Copyright © 2024, Oracle and/or its affiliates. 33 プロジェクトのルートディレクトリ(今回はmy-app/)でコマンドを実行 3000番ポートで起動 src/app/page.tsxを編集すれば変更が反映される Next.jsを始めてみる 開発サーバの起動 npm run dev $ npm run dev > my-app@0.1.0 dev > next dev ▲ Next.js 14.1.0 - Local: http://localhost:3000
34. Copyright © 2024, Oracle and/or its affiliates. 34 app App Router pages Pages Router public 静的アセット() next.config.js Next.jsのコンフィグ package.json プロジェクトの依存ライブラリとスクリプト instrumentation.ts OpenTelemetryのインストルメント(設定値) middleware.ts Middlewareの記述 .env 環境変数 .env.local ローカル環境の環境変数 .env.production 本番環境の環境変数 .env.development 開発環境の環境変数 .eslintrc.json ESLintのコンフィグ next-env.d.ts TypeScriptの宣言ファイル tsconfig.json TypeScriptのコンフィグ jsconfig.json JavaScriptのコンフィグ Next.js座学 Next.jsプロジェクトの構造 – Top-level ディレクトリ&ファイル Middleware : • クライアントとサーバーの間で動作 • 認証 • バリデーション • データ整形 • セキュリティチェック • etc.,
35. Copyright © 2024, Oracle and/or its affiliates. 35 Next.js座学 App Router / Pages Router Next.jsでルーティングを実装する方法は2つ • App Router (今回はこちらをベースにお話し) • 2023年にリリース • 公式はこのApp Routerを推奨 • Pages Router • 元々のルーティング実装方法 • 歴史が古く、多くのUIコンポーネントライブラリが対応
36. Copyright © 2024, Oracle and/or its affiliates. 36 カート画面/購入画面/購入完了画面の3つの画面遷移を実装 • cart/order/confディレクトリを作成し、それぞれpages.tsxを作成 • 各ページへのルーティングは<Link>タグを使って記述 Next.jsでアプリケーションを作ってみる ルーティングの実装
37. Copyright © 2024, Oracle and/or its affiliates. 37 商品一覧を取得できるAPIを準備し、カート画面で表示するデータのFetch Next.jsでアプリケーションを作ってみる データの取得
38. Copyright © 2024, Oracle and/or its affiliates. 38 Next.jsで外部データを取得するFetch()は結果をキャッシュ可能 • デフォルトでは結果をキャッシュする • 明示的に記述する場合は以下のようになる • ビルドごとにキャッシュをクリアするわけではないので、初学者は注意が必要 • キャッシュしたくない場合は以下のように記述 関数はビルド時とリクエスト時の両方で実行されるが、キャッシュがあればそれを利用する(App Router) 関数をビルド時に実行するかリクエスト時に実行するかを選べる(Pages Router) ※後述 Next.jsでアプリケーションを作ってみる Fetchしたデータのキャッシュ fetch('https://...', { cache: 'no-store' }) fetch('https://...', { cache: ‘force-cache' })
39. Copyright © 2024, Oracle and/or its affiliates. 39 配列で受け取ったAPIのレスポンスを表示す るためのコンポーネントを作成 Next.jsでアプリケーションを作ってみる スタイリング – React Component UIライブラリにNextUIを利用 配列をmap()で回してコンポーネント作成 関数で出来上がったコンポーネントを配置 ▪components/ProdTable.tsx
40. Copyright © 2024, Oracle and/or its affiliates. 40 クライアント・コンポーネント • クライアント側でレンダリングされるコンポーネント • これまでのReactコンポーネントは全てこれ • “use client” ディレクティブはサーバ/クライアント・コンポーネントの「境界線」 • use clientが付いたコンポーネントの子コンポーネントは全てクライアント・コンポーネントになるため サーバ・コンポーネント(React Server Component/RSC) • サーバー側でレンダリングされる • Next.js(のApp Routerを使う場合)ではデフォルトがこのサーバ・コンポーネント • 初期表示のためのデータをAPIサーバから受け取ってサーバ側でレンダリングしておくことができる Next.jsでアプリケーションを作ってみる レンダリング – クライアント・コンポーネントとサーバ・コンポーネント
41. Copyright © 2024, Oracle and/or its affiliates. 41 Next.jsでアプリケーションを作ってみる コンポーネント間のデータ共有 ▪components/ProdTable.tsx ▪pages.tsx 引数でデータを受け取れるようにpropsを定義 子要素となっているProdTableにAPIから取得したデータを受け渡す . ├── components │ └── ProdTable.tsx └── page.tsx ▪ページの階層
42. Copyright © 2024, Oracle and/or its affiliates. 42 静的レンダリング (≒ SSG + RSC) →デフォルトはこちら • ルートやページはビルド時にレンダリングされるか、データの再検証後にバックグラウンドでレンダリング • レンダリングの結果はキャッシュされ、CDNに配置可能 • ブログ記事や製品ページなど、ルートがユーザーにパーソナライズされておらず、ビルド時に知ることができる データを持つ場合に便利 動的レンダリング(≒ SSR + RSC) • ルートやページはリクエスト時にユーザーごとにレンダリング • ルートやページがユーザーにパーソナライズされたデータを持つ場合や、CookieやURLの検索パラメータなど リクエスト時にしかわからない情報を持つ場合に便利 • Cookie、Headerなどの動的な機能群を利用する場合に自動的に行われる 静的レンダリングと動的レンダリング App Router利用時におけるSSGとSSR
43. Copyright © 2024, Oracle and/or its affiliates. 43 • Client Side Rendering(SPA)がすべての始まり • クライアント側のパフォーマンス問題やSEO問題を解決するためにServer Side Renderingが登場 • 静的なアセットで構成されたページのパフォーマンスをより向上させるためのSSGが登場 • UI/UXの設計と実装をより高パフォーマンスにするため、SSR/SSGとRSCを組み合わせるパターンが登場 頭の整理 Client Side Rendering (CSR/SPA) Server Side Rendering (SSR) Server Component (RSC) Static Site Generation (SSG) 2012 2024 2016
44. Copyright © 2024, Oracle and/or its affiliates. 44 利用する関数によってビルド時に自動的にSSR/SSGが切り替わるようなイメージ • デフォルトはSSG • 関数とは、外部データをどのタイミングで取得するかを決める関数 getSeverSideProps() • この関数でデータを取得すると、リクエストごとに関数が実行される • つまり、リクエストごとにAPIなどからデータを取得し、レンダリングを行う処理が記述できる getStaticProps() • この関数でデータを取得すると、ビルド時に関数が実行される • ビルド時にAPIなどからデータを取得し、ページに表示 Pages Routerを利用したSSR/SSG
45. Copyright © 2024, Oracle and/or its affiliates. 45 Node.jsサーバ • Node.jsが実行可能なサーバ上で実行する場合 • 使い方は以下 • package.json に「build」スクリプトと「start」スクリプトが含まれていることを確認 • 次に、npm run build を実行してアプリケーションをビルド • 最後に、npm run start を実行して Node.js サーバーを起動 Dockerコンテナー • Kubernetesやクラウド プロバイダーのコンテナー内で実行する場合 静的HTMLエクスポート • HTML/CSS/JS 静的アセットを提供できる任意のWebサーバなどで実行する場合 • 静的エクスポートとして実行すると、サーバーを必要とする Next.js 機能が未サポート(動的ルーティングなど) Next.jsアプリをデプロイ
46. Copyright © 2024, Oracle and/or its affiliates. 46 公式サンプルはここから取得 • そのままでは動かせないので編集が必要 1. Dockerfileをアプリのルートディレクトリに準備 2. npm、yarnなどの条件分岐があるので削除(optional) 3. RUN npm ci をruntimeのステージに追加(L:15) 4. .next以下を全てCOPY (L:22) 5. CMDをnpm startに変更 (L:27) 6. docker build –t <name> . 7. docker run –p 3000:3000 <name> Next.jsでコンテナ化 ▪Dockerfile
47. Copyright © 2024, Oracle and/or its affiliates. 47 Demo: Next.jsのアプリを眺める
48. Copyright © 2024, Oracle and/or its affiliates. 48 SSRフレームワーク • Nuxt.js • Vue.jsベースのフルスタックフレームワーク • Next.jsを参考に作られた • Server Componentsも対応(※開発途中) SSGフレームワーク • Jekyll • Ruby製のSSGフレームワーク • 何を隠そうocitutorialsは今のところJekyllベース(githubのDockerfile見れば一目瞭然) • Gatsby • ReactベースのSSGフレームワーク 他のSSR/SSGフレームワーク
49. Copyright © 2023, Oracle and/or its affiliates. 49 まとめ
50. Copyright © 2024, Oracle and/or its affiliates. 50 SPA • 単一のHTMLファイルのみを読み込む • サーバ側で画面のレンダリングを行わなず、別な内容を表示する際にはコンポーネントを差分更新 • 業務アプリによく利用される SSR • Web Serverがレンダリングと初回データロードを担当 • 同じ言語で、同じ宣言型の、コンポーネント指向のメンタルモデルを使って、アプリケーション全体を開発 • 検索エンジンクローラーが完全にレンダーされたページを直接見る SSG • あらかじめWebページのプリレンダリング(ビルド)を行い、静的なHTMLファイルとして生成・提供 • 出力内容が静的なHTMLとアセットであるため、低コストで簡単なデプロイが可能 • ビルド時に既に内容が分かっているデータを使用するページにのみ適用 SPA/SSR/SSG おさらい
51. Copyright © 2024, Oracle and/or its affiliates. 51 React • UI構築のためのJavaScriptライブラリ • コンポーネント単位の実装とコンポーネント単位の描画 • バインディング/条件分岐レンダリング/配列レンダリング/イベントハンドラ/state/コンポーネント間データ共有 Next.js • フルスタックでReactベースのフロントエンド構築フレームワーク • これまで利用されてきたPages Routerとこれからの推奨のApp Router • クライアントでレンダリングされるクライアント・コンポーネントと、サーバでレンダリングされるサーバ・コンポーネント • 動的/静的レンダリングによる、要件に合わせたレンダリングの戦略を決められる柔軟性 React/Next.js おさらい