Next.jsのapp routerを利用してNext.jsのAPIをlocalhost上で叩く時にURL parse Errorになるのを防ぐ

背景

Next.js の App Routerを利用して、Next.js(localhost)のapi を叩く際にErrorになったので、issueと対応方法を記載する

TL;DR

fetch method内に環境変数または、next/headersを利用してhostとprotolを渡してfetchを実施すれば良い。
相対パスでのパス指定ではなく絶対指定のパスを利用する。

issues

0. 現状のdirectoryと構成

% tree ./app
├── api
│   └── posts
│       └── route.ts
└── posts
    └── page.tsx

1. URL parse Errorになるfetch

app/posts/page.tsx

import Link from "next/link";

const fetchData = async (host: string) => {
  const res = await fetch(`/api/posts`);
  return res.json();
};

export default async function Home() {
  const data = await fetchData();
    return (
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        smaple
        <Link href={`/`}>top</Link>
      </main>
    )
  }

どうしてダメか？

↓でしかない
https://github.com/vercel/next.js/issues/48344#issuecomment-1507068100

どう解決するか？

Projectの環境変数にapi requestのurlを渡してあげる。
または、next/hostsを利用してhostとprotocolを渡してあげれば良い。

app/pages/posts.tsx

import Link from "next/link";
import { headers } from "next/headers";

const fetchData = async (host: string) => {
  const res = await fetch(`http://${host}/api/posts`);
  return res.json();
};

export default async function Home() {
  const host = headers().get("host");
  const data = await fetchData(host!);
    return (
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        smaple
        <Link href={`/`}>top</Link>
      </main>
    )
  }