結局、Next.js 14 App Routerが何もわからないから学ぶ
結局、Next.js 14 App Router 何もわからない
概要
皆さんこんにちは。加賀谷です。学習のアウトプットと、情報の整理も兼ねて
Next.js 14 App Routerにおける情報をまとめたいと思っています。
私の理解が足りない点、間違っている点などあると思いますのでその際はご指摘ください。
対象
Next.js 14 App Routerについて調べている人
機能の全体を俯瞰したい人
開発環境
| 名前 | バージョン |
|---|---|
| Next.js | 14.0.3 |
Next.jsとは
一言でいえば、Reactのフレームワークです。フルスタックな機能を有しており、サーバーサイドレンダリング(SSR)アプリケーションの開発を行うことができます。
Reactとは、JavaScriptのライブラリです。シングルページアプリケーション(SPA)の開発を行うことができます。
App Router
Next.jsが提供する開発モデルの一つで、React.jsの最新機能(Server Components,Streaming with Suspense,Server Actions)を用いたアプリケーション開発を行うことができます。
主な機能
記載中。
用語集
用語が分からないとNext.js 14 App Routerの理解に影響すると思うので、ここでまとめます。
Next.js
Next.jsの正式名称。Nextと表記されることもある。
Reactのフレームワークである。
React.js
React.jsの正式名称。Reactと表記されることもある。
JavaScriptのライブラリである
サーバーサイドレンダリング(SSR)
HTTP要求に基づいてクライアントにコンテンツをレンダリングするプロセス。クライアントがリクエストを作成し、サーバーがそれを処理して、レンダリングされたHTMLをクライアントに返す
。
シングルページアプリケーション(SPA)
Webアプリケーションの構成法の一つで、Webブラウザ側でページの移動を行わず、最初に読み込んだWebページ上のスクリプトがサーバとの通信や画面遷移を行う方式。
サーバーコンポーネント
サーバー側でレンダリングが完結するコンポーネント。なるべくこのサーバーコンポーネントにすることで実行速度の向上を受けられる。
非同期処理(async/await)をトップレベルで呼び出すことができるので、通信を行いやすい。
クライアントコンポーネント
サーバー側でプリレンダリングされた状態でクライアント(ブラウザ)側で実行されるコンポーネント。
ReactのHooksなどが利用できる。
サーバーアクション
クライアンドから処理要求をサーバー側に渡し、サーバー側で処理が実行されるようにする機能。
バックエンドリソースにアクセスしたい場合や、クライアンド側での処理を軽減、隠匿させたい場合に利用できる。
参考文献
Discussion