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にアクセスしていますが、このコードはサーバーコンポーネントではなく、クライアントコンポーネントからアクセスするものです。
おわりに
サーバーコンポーネントとクライアントコンポーネントの違いについて把握しておかないと、エラーの原因を特定しにくくなります。しっかり学んでおきたいです。