Next.js 学習 : 基礎 (Foundations)

Next.js の公式サイトでの学習。このページの内容は古く、Next.js 学習 : 基礎 (Foundations) 2025-04 の内容の方が新しい。

Next.js は React (JS) のフレームワーク

React (JS) は UI 構築のための JavaScript のライブラリ

DOM は HTML 要素のオブジェクト表現

コードと UI の橋渡し

React (JS) は宣言的な UI ライブラリ

ブラウザは JSX をそのままは解釈できないので、Babel のような JavaScript コンパイラが必要

React (JS) を学ぶためには JavaScript の次の内容を把握しておくとよい

Functions and Arrow Functions

Objects

Arrays and array methods

ES Modules and Import / Export Syntax → ECMAScript のモジュール

環境 : 開発または本番

Next.js は開発段階 (development stage) と本番段階 (production stage) の 2 つの段階を提供

開発段階 : 開発者体験 (Developer Experience) を向上させることを目指した機能

TypeScript や ESLint の統合、Fast Refresh、などなど

本番段階では、エンドユーザーへの最適化を目指す

例えば、アプリケーションコードはコンパイルやバンドル、minify 、コード分割などされる必要がある

Next.js のコード変換 : Rust と SWC による

Next.js ではデフォルトで JavaScript と CSS の minify が行われる

Next.js では pages ディレクトリ配下の各ページ向けにコード分割が行われる

時機 : ビルド時 (Build time) と実行時 (Runtime)

場所 : クライアントとサーバー

React のコードを HTML 表現に変換することをレンダリングという

Next.js では 3 種類のレンダリング

Pre-Rendering

Server-Side Rendering (SSR) : 各リクエストで HTML が生成される

Next.js では、アプリケーションコードを以下の場所から配信できる

オリジンサーバー (origin server)

エッジサーバー : CDN での配信もエッジサーバーの一部とみなせるが、CDN と違ってコードの実行も可能なものもある