Next.jsの全体像をつかむ

Reactの上に、アプリを作る仕組みが載る

Reactは画面をコンポーネントとして組み立てるためのライブラリ。Next.jsはReactを使ったアプリのためのフレームワークです。Reactでボタンや記事カードを作り、Next.jsでURL、ページ表示、サーバー処理、ビルドをまとめます。ReactとNext.jsは二者択一ではありません。

「表示する」より広い仕事を扱う

画面が見えるまでには、URLを解釈し、データを取得し、HTMLやJavaScriptを届ける工程があります。Next.jsはこれらを一つのプロジェクトで扱いやすくします。学ぶ中心は「何を書くか」に加え「どこで・いつ動かすか」です。

• 画面の部品：Reactのコンポーネント、props、state
• ページの構造：Next.jsのルート、レイアウト、ナビゲーション
• 運用の仕組み：レンダリング、キャッシュ、画像、公開

便利さと、増える設計判断

記事サイト、商品ページ、ログインがあるサービスなどで共通の仕組みを活用できます。一方、サーバーとブラウザーの境界、更新の反映、実行環境の理解が必要です。小さなUI部品だけならReact単体の構成も選択肢。必要な機能から選びましょう。

苦手になりやすい場面を知る

既存ページへ一つのウィジェットを足すだけなら、Reactを部分導入する方が変更範囲を小さくできる場合があります。別のバックエンドがあり、ブラウザー中心で動くアプリでは、Next.jsのサーバー機能を使う利点が小さいことも。作れないのではなく、使う機能に対して規約や運用の負担が釣り合うかで判断します。

• 静的exportではServer Actionsなどサーバー依存の機能に制約がある
• DB、リアルタイム通信、長時間のバックグラウンド処理は、公開環境や別サービスを含めて設計する

同じ部品をNext.jsのページで使う

function TopicCard({ title }) {
  return <article><h2>{title}</h2></article>
}

export default function Page() {
  return (
    <main>
      <h1>学習ノート</h1>
      <TopicCard title="Reactの基礎" />
    </main>
  )
}

TopicCardはReactの部品。app/page.jsxという配置がNext.jsのページを作ります。