はじめに

ここでは、Next.js を用いて作成されたトップページコンポーネントのコードを解説します。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

主に、FastAPI バックエンドと連携しつつ、ユーザー登録やログインページへのリンクを提供する構成になっています。

コード全体の概要

このコンポーネントは以下の要素で構成されています：

FastAPI サーバーからのメッセージ取得
取得したメッセージの表示
一般ユーザー登録・管理者登録・ログイン画面へのリンク
Tailwind CSS を用いたスタイリング

クライアントコンポーネント指定

"use client";

Next.js の App Router 機能を使う際、コンポーネントがクライアントサイドで動作することを明示するために必要な宣言です。

インポート文

import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";

useEffect と useState は React の基本的なフックです。
Image は未使用ですが、Next.js の画像最適化コンポーネントです。
Link はページ遷移に使用する Next.js 固有のコンポーネントです。

ステートと副作用

const [message, setMessage] = useState("Loading...");

useEffect(() => {
  fetch("http://localhost:8000/")
    .then((res) => res.json())
    .then((data) => setMessage(data.message))
    .catch(() => setMessage("Error fetching message from FastAPI."));
}, []);

初期状態は "Loading..."。
コンポーネントの初回レンダリング時に FastAPI サーバーへリクエスト。
レスポンスの message プロパティをステートに反映。
エラー時はエラーメッセージを表示。

JSX 構成とスタイリング

<main className="flex flex-col items-center justify-center min-h-screen bg-[#0a0a0a] text-white p-8 gap-10">

縦方向に並べて中央配置
背景は黒、文字は白

タイトル

<h1 className="text-3xl font-bold bg-gray-200 text-black px-10 py-4 rounded">
  さぶちゃん日記
</h1>

太字の大きな見出し
白背景・黒文字・角丸

メッセージ表示

<p className="text-blue-400 font-semibold">{message}</p>

FastAPI から取得したメッセージを青色で表示

リンク群

<Link href="/register" className="...">一般ユーザー登録</Link>
<Link href="/admin-register" className="...">管理者登録</Link>
<Link href="/login" className="...">ログイン</Link>

各ページへのリンク
マウスホバー時に背景色が変わるなど、ユーザーインタラクションあり

補足

Image のインポートは現時点で使用されていません。
本番環境では fetch("http://localhost:8000/") を環境変数に置き換えるのが推奨されます。

まとめ

この Home コンポーネントは、Next.js を使って Web アプリのトップページを実装する際に最低限必要な構成が詰まっていると感じました。

API との連携やルーティング処理がシンプルにまとまっていて、プロトタイプ作成や基本的な動作確認にも使いやすと思っています...！