[Next.js] "SyntaxError: Unexpected token < in JSON at position 0" というエラーが発生する時の確認事項

Next.jsでWebサイトを開発中に "SyntaxError: Unexpected token < in JSON at position 0" というエラーが発生しました。このエラーはJSON形式として正しくない時に発生します。

このエラーが発生したコード

APIでデータを取得する時に発生しました。

app/api/ip/route.ts

import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest) {
    const ip = (req.headers.get("x-forwarded-for") ?? "127.0.0.1").split(",")[0];
    return NextResponse.json({ ip });
}

app/page.tsx

const Page = async () => {
    const response = await fetch(`${process.env.NEXT_PUBLIC_URL}/api/ip`);
    if (!response.ok) {
        throw new Error("Failed to fetch data");
    }
    const result = await response.json();
    // ...

サーバーコンポーネントからAPIにアクセスしていますが、このコードはサーバーコンポーネントではなく、クライアントコンポーネントからアクセスするものです。

おわりに

サーバーコンポーネントとクライアントコンポーネントの違いについて把握しておかないと、エラーの原因を特定しにくくなります。しっかり学んでおきたいです。