1. Next.jsのappディレクトリとは何か

Next.jsのappディレクトリは、App Router専用のフォルダです。Webサイトの画面や構成を、フォルダとファイルの配置だけで管理できるのが大きな特徴です。プログラミング未経験の人でも、パソコンのフォルダ整理と同じ感覚で理解できます。例えば、書類を入れるフォルダを作ると中身が分かれるように、appの中にフォルダを作ると画面も分かれます。

2. App Routerとappディレクトリの関係

App Routerとは、Next.jsで画面遷移を管理する新しい仕組みです。その中心になるのがappディレクトリです。以前のpagesフォルダとは違い、appでは「どのフォルダがどのURLか」がとても分かりやすくなっています。住所と地図が一致しているような感覚で、初心者でも迷いにくい設計です。

3. page.jsの役割と基本構造

appディレクトリの中で特に重要なのがpage.jsです。このファイルが「実際に表示される画面」になります。フォルダの中にpage.jsを置くと、そのフォルダ名がURLになります。


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

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

4. フォルダ構成とURLのつながり

appディレクトリでは、フォルダ名がそのままURLになります。例えば、app/about/page.jsを作ると、/aboutというURLで表示されます。これは、引き出しにラベルを貼ると中身がすぐ分かるのと同じ考え方です。


export default function AboutPage() {
  return <p>このサイトについての説明です。</p>;
}

（/aboutにアクセスすると説明文が表示されます）

5. layout.jsで共通デザインを管理する

layout.jsは、すべてのページに共通する見た目をまとめるためのファイルです。ヘッダーやフッターなど、毎回同じ内容を書く必要がなくなります。一度決めた枠組みの中に、各ページの内容を差し込むイメージです。


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

（すべてのページで共通ヘッダーが表示されます）

6. serverとclientの考え方

appディレクトリでは、サーバーで動く処理と、ブラウザで動く処理を分けて考えます。何も指定しなければサーバー側で動き、画面の操作が必要な場合だけ特別な指定をします。これは、裏方の作業と接客を分けるような考え方です。


"use client";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>回数: {count}</button>;
}

（ボタンを押すたびに数字が増えます）