Next.js 学習 : 基礎 (Foundations) 2025-04
https://nextjs.org/learn を読んで Next.js を学ぶ (2025 年 4 月ごろの情報)
関連: Next.js 学習 : 基礎 (Foundations)
React Foundations
https://nextjs.org/learn/react-foundations
1 章 About React and Next.js
https://nextjs.org/learn/react-foundations/what-is-react-and-nextjs
Next.js は React (JS) のフレームワーク
Web アプリケーションの構成要素
React (JS)
2 章 Rendering User Interfaces (UI)
https://nextjs.org/learn/react-foundations/rendering-ui
DOM (Document Object Model)
3 章 Updating UI with Javascript
https://nextjs.org/learn/react-foundations/updating-ui-with-javascript
HTML は初期のページ内容を表しており、DOM は更新されたページ内容を表す
素の JavaScript (JS) で DOM を更新するのはとてもパワフルだが記述量が多くなる
命令的プログラミング (Imperative programming) と宣言的プログラミング (declarative programming)
React は UI 構築に使える流行りの宣言的ライブラリである
4 章 Getting Started with React
https://nextjs.org/learn/react-foundations/getting-started-with-react
ブラウザは JSX をそのままは解釈できないので、Babel のような JavaScript コンパイラを導入する必要がある
5 章 Building UI with Components
https://nextjs.org/learn/react-foundations/building-ui-with-components
React を使っていくうえで重要な 3 つの概念
コンポーネント (Components)
プロップ (Props)
状態 (State)
6 章 Displaying Data with Props
https://nextjs.org/learn/react-foundations/displaying-data-with-props
7 章 Adding Interactivity with State
https://nextjs.org/learn/react-foundations/updating-state
フック (hooks)
https://react.dev/learn/adding-interactivity や https://react.dev/learn/managing-state も読むのをおすすめ
8 章 From React to Next.js
https://nextjs.org/learn/react-foundations/from-react-to-nextjs
9 章 Installing Next.js
https://nextjs.org/learn/react-foundations/installation
Next.js はファイルシステムルーティングを採用している
開発サーバー (development server) を動かすには next dev コマンドを使う
Next.js はデフォルトで React サーバーコンポーネント (React Server Component) を使う
app/layout.js ファイルはアプリケーションの主たるレイアウト
10 章 Server and Client Components
https://nextjs.org/learn/react-foundations/server-and-client-components
React では、コンポーネント木の中で、ネットワーク境界をどこに置くかをあなたが選択する
コンポーネントは 2 つのモジュールグラフに分けられる
サーバーモジュールグラフ (server module graph) (or tree)
クライアントモジュールグラフ (client module graph) (or tree)
サーバーコンポーネントがレンダリングされたあと、React Server Component Payload (RSC Payload) と呼ばれる特別なデータフォーマットがクライアントに送信される
含まれるもの
React サーバーコンポーネントのレンダリング結果
React クライアントコンポーネントをレンダリングするためのプレイスホルダとそれらの JS ファイルへの参照
Fast Refresh
11 章 Next Steps
https://nextjs.org/learn/react-foundations/next-steps
https://react.dev/ のドキュメント
https://nextjs.org/learn/dashboard-app