Next.js
Fetcher는 server module, route handler, server action, client component에서 사용할 수 있습니다. Request가 어디에서 실행되는지에 따라 prefixUrl을 선택하세요.
서버 API 클라이언트
import { createFetcher } from '@ilokesto/fetcher/openapi';
import type { paths } from '@/generated/openapi';
export const api = createFetcher<paths>({
prefixUrl: process.env.API_ORIGIN,
headers: {
'x-runtime': 'next-server',
},
});Backend가 Next.js app 밖에 있다면 server-side call에는 absolute origin을 사용하세요.
라우트 핸들러 프록시
import { api } from '@/lib/api.server';
export async function GET(_request: Request, { params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
const response = await api.get('/users/{id}', {
params: { path: { id } },
});
return new Response(response.body, {
status: response.status,
headers: response.headers,
});
}클라이언트 요청
Browser component에서는 /api 같은 relative prefixUrl을 사용해서 request가 Next.js route를 거치도록 하는 편이 좋습니다.