[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にアクセスしていますが、このコードはサーバーコンポーネントではなく、クライアントコンポーネントからアクセスするものです。

おわりに

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