1. Next.jsとは何かを超かんたんに理解しよう

Next.js（ネクストジェイエス）とは、WebサイトやWebアプリを作るための道具です。普通のHTMLだけでは、画面を切り替えたり、データを表示したりするのが大変ですが、 Next.jsを使うと、それらを効率よく作れます。

特にNext.jsは「ページ表示が速い」「検索エンジンに見つかりやすい」「大きなサイトでも管理しやすい」といった特徴があり、初心者からプロまで幅広く使われています。

2. App Routerとは？新しいページ構成の考え方

App Router（アップルーター）とは、Next.js 13以降で標準になったページの作り方です。フォルダの構成がそのまま画面の構成になる、というとても分かりやすい仕組みです。

たとえば、appフォルダの中に「page.js」というファイルを作ると、それがそのままWebページになります。フォルダ＝道、ファイル＝家、というイメージをすると理解しやすいです。

3. appフォルダとpage.jsの基本ルール

App Routerでは、必ず「app」フォルダを使います。その中にある「page.js」が画面として表示されます。


export default function Page() {
  return <h1>はじめてのNext.js App Router</h1>;
}

（画面に「はじめてのNext.js App Router」と表示されます）

このように、とてもシンプルな書き方でページが作れます。難しい設定をしなくても、表示できるのがApp Routerの魅力です。

4. レイアウト機能で共通デザインを作る

App Routerでは「layout.js」を使うことで、ヘッダーやフッターなどの共通部分をまとめて管理できます。これは、毎回同じHTMLを書く手間を減らすための仕組みです。


export default function Layout({ children }) {
  return (
    <div>
      <header>共通ヘッダー</header>
      {children}
      <footer>共通フッター</footer>
    </div>
  );
}

（すべてのページでヘッダーとフッターが表示されます）

5. Server Componentという考え方

App Routerでは、画面を表示する処理の多くをサーバー側で行います。これをServer Component（サーバーコンポーネント）と呼びます。

サーバー側で処理することで、画面表示が速くなり、ユーザーのパソコンへの負担も軽くなります。特別な設定をしなくても、これが自動で使われる点が特徴です。

6. Client Componentが必要な場面

ボタンをクリックしたときに画面が変わるなど、ユーザー操作が必要な場合はClient Component（クライアントコンポーネント）を使います。


"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count} 回クリック
    </button>
  );
}

（ボタンを押すたびに数字が増えて表示されます）