Next.js構築 その④

プロジェクト構造の理解（App Router版）
トップページの成り立ち

プロジェクト構造の理解（App Router版）

主なフォルダとファイル

app/: ルート構造を管理するディレクトリ。
- 各サブフォルダがルート（ページ）になります。
- フォルダ内のpage.jsが、そのルートのコンポーネントを定義します。
public/: 静的ファイルを配置する場所（例：画像やフォント）。
package.json: プロジェクトの依存関係やスクリプトが記載されています。

my-next-app/
├── app/
│   ├── page.js      # ルートページのコンポーネント
│   └── layout.js    # 共通のレイアウト（ヘッダーやフッターなど）
│   └── favicon.ico  # サイトのアイコン
│   ├── globals.css  # グローバルスタイル
├── public/           # 画像
├── package.json

実際にpage.jsとlayout.jsの中身を見てみましょう。

app\page.js

簡単に説明すると上から、

importを使って他のディレクトリからコンポーネントと呼ばれるものを呼び出しています。
（ここではImageコンポーネントをnext/imageから呼び出しています。）

import Image from "next/image";

関数定義のように見える下の箇所はコンポーネントを定義しています。

export default function Home() {
...
}

return内でこのコンポーネントの戻り値を記述しています。HTMLのように見えますが、

JSX

と呼ばれるReactの記述です。ここで出力するHTMLを記述しています。

return(
...
);

JSX自体はほぼHTMLと記法が変わりありませんが異なる点として、

「class」が「className」になっています。

 <div className="...">

classの代わりにこう書くと覚えておいて下さい。

またimgタグが「<Image>」になっています。

<Image
          className="dark:invert"
          src="/next.svg"
          alt="Next.js logo"
          width={180}
          height={38}
          priority
        />

これはファイルの冒頭でインポートしたImageコンポーネントを利用するため、このような記述になっています。<img>タグでも動作します。

app\layout.js

冒頭では使用するフォント設定とCSSを呼び出しています。

import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

中盤の部分でフォントとmeta情報に関する定数が設定されています。

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

最後にJSXを戻り値とするコンポーネントが設定されています。

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

layouts.jsのこのような構成はReactではよく見られる構成です。

importで必要なコンポーネントやファイルを読み込む。
使用する関数や定数を設定する。
JSXを返すコンポーネントを記述する。

トップページの成り立ち

ターミナルで下記入力をし、開発サーバーを起動します。

npm run dev

そのうえで http://localhost:3000 にアクセスすると下記画面が表示されます。

これはNext.jsデフォルトのトップページです。
このトップページはこれまで見てきた、

page.js
layout.js

により構成されています。
具体的にはそれぞれのファイルで定義されているコンポーネントが入れ子構造なっており、それをNext.jsが内部的に処理してHTMLを出力（レンダリング）しています。

コンポーネントはそれぞれ下記のことです。

・page.js

export default function Home() {
  return (
...
);
]

・layout.js

export default function RootLayout({ children }) {
  return (
...
);
}

次章ではこのコンポーネントについて詳しく解説します。