Slide 1

Slide 1 text

基礎から学ぶ Next.js Oracle Cloud Hangout Café – Season8 #2 Kyotaro Nonaka Oracle Corporation Japan

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Copyright © 2023, Oracle and/or its affiliates. 3 野中恭大郎ソリューション・アーキテクト日本オラクル株式会社 • AppDev/Messaging/NoSQL/Frontend • Oracle Cloud Hangout Caféメンバー /Oracle Groundbreakers Advocate • 某パッケージの開発者でした • Oracleにjoinしてもう4年半 • 趣味は釣りとかキャンプとか(最近行けてない) @non_kyon

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

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フロントエンドの歴史黎明期

Slide 7

Slide 7 text

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大フレームワークの登場

Slide 8

Slide 8 text

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の登場

Slide 9

Slide 9 text

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 差分更新レンダリング

Slide 10

Slide 10 text

Copyright © 2024, Oracle and/or its affiliates. 10 クライアント側のパフォーマンス問題 • WebブラウザがWebページとスクリプトのダウンロードとレンダリングを担当するため、負荷が上がる • 特に初回のページ表示でパフォーマンスの問題が起きやすい開発プロセス • 比較的新しい技術(かつトレンドの移り変わりも早い)のため、専門的な知識が必要 • フレームワークやツールの幅が広く、自由度も高い代わりに、コードの追跡が難しくなる SEO対策 • SPAはクライアントからのリクエストに応じてデータをロードするため • URLが変わらず、ページごとに固有のアドレスがない SPAの課題

Slide 11

Slide 11 text

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と組み合わせて利用 *読み込み、インタラクティブ性、視覚的な安定性

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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. プリレンダリング

Slide 14

Slide 14 text

Copyright © 2024, Oracle and/or its affiliates. 14 オープンソースでクロスプラットフォームのJavaScript実行環境 • ECMAScriptに準拠 • Webサーバなどのスケーラブルなネットワークプログラムの記述を意図 • ブラウザ用のJavaScriptを書くフロントエンド開発者が、クライアント側のコードに加えてサーバー側のコードを書くことが可能 NPM • Node.jsのパッケージ管理ツール • Node.jsをインストールすれば利用できる • バージョン管理にはnというツールが便利(Windowsでは利用できないので注意) node.js サーバサイドのJavaScript実行環境

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Copyright © 2024, Oracle and/or its affiliates. 17 Viewを設計するだけで、Reactはデータの変更を検知 • 関連するコンポーネントだけを更新、描画 • 読みやすいコード、容易なデバッグ自分自身の状態を管理するカプセル化されたコンポーネント作成 • コンポーネントをJavaScript/TypeScriptで書く • それらのコンポーネントを組み合わせ、UIを構築 node.jsを使いサーバ上でもレンダリング(SSR可能) React Native を使うことでモバイルアプリケーションの中でも動作 React UI構築のための JavaScript ライブラリ(フレームワークではない！)

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

I Love JSX!

; 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を使わずに記述

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Copyright © 2024, Oracle and/or its affiliates. 26 useで始まる関数は、フック (Hook) と呼ばれる • useStateはReactが提供する組み込みのフック • 他のフックは以下のようなもの • コンテクストフック(useContext): 離れた親要素から情報を取得 • refフック(useRef): レンダリングに用いない情報を保持 • パフォーマンス関連フック • useMemo: 高負荷な計算の結果をキャッシュ • useCallback:関数定義をキャッシュ • 既存のフックを組み合わせて独自のフックを作成することが可能 React座学フック

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Copyright © 2024, Oracle and/or its affiliates. 28 SPAのルーティング「Single Page」なのにルーティング(ページ遷移) ？ • 実際はコンポーネントが置き換わっているだけ • ブラウザ上はURLも変わっているのでルーティングしているように見える • ライブラリやフレームワークの機能で実装 • 中身はJavaScriptのhistory API • ReactであればReact Router • Next.jsはフレームワークに内包

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Copyright © 2024, Oracle and/or its affiliates. 31 • 2016年に初版リリース • UIの構築にReactコンポーネントを利用 • バンドルやコンパイルなどを抽象化 • 個人開発者から大規模なチームまで • 主な機能 • ルーティング • レンダリング • データ取得 • スタイリング • 最適化 • TypeScript対応 Next.js フルスタックのWebアプリケーションを構築するためのReactフレームワーク

Slide 32

Slide 32 text

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のインストールがおすすめ

Slide 33

Slide 33 text

Copyright © 2024, Oracle and/or its affiliates. 33 プロジェクトのルートディレクトリ(今回はmy-app/)でコマンドを実行 3000番ポートで起動 src/app/page.tsxを編集すれば変更が反映される Next.jsを始めてみる開発サーバの起動 npm run dev $ npm run dev > [email protected] dev > next dev ▲ Next.js 14.1.0 - Local: http://localhost:3000

Slide 34

Slide 34 text

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.,

Slide 35

Slide 35 text

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コンポーネントライブラリが対応

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

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' })

Slide 39

Slide 39 text

Copyright © 2024, Oracle and/or its affiliates. 39 配列で受け取ったAPIのレスポンスを表示するためのコンポーネントを作成 Next.jsでアプリケーションを作ってみるスタイリング – React Component UIライブラリにNextUIを利用配列をmap()で回してコンポーネント作成関数で出来上がったコンポーネントを配置 ■components/ProdTable.tsx

Slide 40

Slide 40 text

Copyright © 2024, Oracle and/or its affiliates. 40 クライアント・コンポーネント • クライアント側でレンダリングされるコンポーネント • これまでのReactコンポーネントは全てこれ • “use client” ディレクティブはサーバ/クライアント・コンポーネントの「境界線」 • use clientが付いたコンポーネントの子コンポーネントは全てクライアント・コンポーネントになるためサーバ・コンポーネント(React Server Component/RSC) • サーバー側でレンダリングされる • Next.js(のApp Routerを使う場合)ではデフォルトがこのサーバ・コンポーネント • 初期表示のためのデータをAPIサーバから受け取ってサーバ側でレンダリングしておくことができる Next.jsでアプリケーションを作ってみるレンダリング – クライアント・コンポーネントとサーバ・コンポーネント

Slide 41

Slide 41 text

Copyright © 2024, Oracle and/or its affiliates. 41 Next.jsでアプリケーションを作ってみるコンポーネント間のデータ共有 ■components/ProdTable.tsx ■pages.tsx 引数でデータを受け取れるようにpropsを定義子要素となっているProdTableにAPIから取得したデータを受け渡す . ├── components │ └── ProdTable.tsx └── page.tsx ■ページの階層

Slide 42

Slide 42 text

Copyright © 2024, Oracle and/or its affiliates. 42 静的レンダリング (≒ SSG + RSC) →デフォルトはこちら • ルートやページはビルド時にレンダリングされるか、データの再検証後にバックグラウンドでレンダリング • レンダリングの結果はキャッシュされ、CDNに配置可能 • ブログ記事や製品ページなど、ルートがユーザーにパーソナライズされておらず、ビルド時に知ることができるデータを持つ場合に便利動的レンダリング(≒ SSR + RSC) • ルートやページはリクエスト時にユーザーごとにレンダリング • ルートやページがユーザーにパーソナライズされたデータを持つ場合や、CookieやURLの検索パラメータなどリクエスト時にしかわからない情報を持つ場合に便利 • Cookie、Headerなどの動的な機能群を利用する場合に自動的に行われる静的レンダリングと動的レンダリング App Router利用時におけるSSGとSSR

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Copyright © 2024, Oracle and/or its affiliates. 44 利用する関数によってビルド時に自動的にSSR/SSGが切り替わるようなイメージ • デフォルトはSSG • 関数とは、外部データをどのタイミングで取得するかを決める関数 getSeverSideProps() • この関数でデータを取得すると、リクエストごとに関数が実行される • つまり、リクエストごとにAPIなどからデータを取得し、レンダリングを行う処理が記述できる getStaticProps() • この関数でデータを取得すると、ビルド時に関数が実行される • ビルド時にAPIなどからデータを取得し、ページに表示 Pages Routerを利用したSSR/SSG

Slide 45

Slide 45 text

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アプリをデプロイ

Slide 46

Slide 46 text

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 . 7. docker run –p 3000:3000 Next.jsでコンテナ化 ■Dockerfile

Slide 47

Slide 47 text

Slide 48

Slide 48 text

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フレームワーク

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Copyright © 2024, Oracle and/or its affiliates. 50 SPA • 単一のHTMLファイルのみを読み込む • サーバ側で画面のレンダリングを行わなず、別な内容を表示する際にはコンポーネントを差分更新 • 業務アプリによく利用される SSR • Web Serverがレンダリングと初回データロードを担当 • 同じ言語で、同じ宣言型の、コンポーネント指向のメンタルモデルを使って、アプリケーション全体を開発 • 検索エンジンクローラーが完全にレンダーされたページを直接見る SSG • あらかじめWebページのプリレンダリング(ビルド)を行い、静的なHTMLファイルとして生成・提供 • 出力内容が静的なHTMLとアセットであるため、低コストで簡単なデプロイが可能 • ビルド時に既に内容が分かっているデータを使用するページにのみ適用 SPA/SSR/SSG おさらい

Slide 51

Slide 51 text

Copyright © 2024, Oracle and/or its affiliates. 51 React • UI構築のためのJavaScriptライブラリ • コンポーネント単位の実装とコンポーネント単位の描画 • バインディング/条件分岐レンダリング/配列レンダリング/イベントハンドラ/state/コンポーネント間データ共有 Next.js • フルスタックでReactベースのフロントエンド構築フレームワーク • これまで利用されてきたPages Routerとこれからの推奨のApp Router • クライアントでレンダリングされるクライアント・コンポーネントと、サーバでレンダリングされるサーバ・コンポーネント • 動的/静的レンダリングによる、要件に合わせたレンダリングの戦略を決められる柔軟性 React/Next.js おさらい

Slide 52

Slide 52 text

No content