Failed to parse URL from ~

はじめに

fetchを使って、api以下を取得するさいにエラーが起きました。

問題

page

export default async function DDDTestPage() {
    const response = await fetch("/api/users/active", {
        method: "GET"
    });
    const data = await response.json();
    console.log("APIレスポンス:", data);
    return <div>DDD test completed</div>;
}

解決方法

Next.jsを使っているのでサーバサイドでレンダリングする方法を使いました。
next/headersから現状のプロトコルとホストを取得して利用します。

page

import { headers } from 'next/headers';


export default async function DDDTestPage() {
    const headersData = await headers();
    const protocol = headersData.get('x-forwarded-proto') || 'http';
    const host = headersData.get('host');
    const response = await fetch(`${protocol}://${host}/api/users/active`, {
        method: "GET"
    });
    console.log("APIレスポンス:", response);
    return <div>DDD test completed</div>;
}

おわりに

次にいきます

参考文献