API Route Handler + Supabase

8.7

라우트 핸들러란?

라우트 핸들러가 왜 필요한가?

사용법

API 라우트 생성

src
  app
    api
      route.ts

위와 같은 구조로 파일을 만들고 이름은 route.ts 또는 .js여야만 한다.

 

기본 사용법은 위와 같으나, 본인은 사용자 정보를 가져오는 동적 라우팅에서 사용할 동적인 라우트 핸들러를 만들어보겠다.

src
  app
    api
      users
        [id]
          route.ts

// app/api/users/[id]/route.ts

import { NextResponse } from 'next/server';
import { supabase } from '@/lib/supabaseClient';

export async function GET(request, { params }) {
  const { id } = params;

  const { data, error } = await supabase
    .from('users')
    .select('*')
    .eq('id', id)
    .single();

  if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }

  return NextResponse.json(data, { status: 200 });
}

클라이언트 컴포넌트에서 API 호출

import BuddyTemperature from '@/components/atoms/profile/BuddyTemperature';
import MyTrips from '@/components/atoms/profile/MyTrips';
import BuddyFollow from '@/components/molecules/profile/BuddyFollow';
import BuddyProfile from '@/components/molecules/profile/BuddyProfile';
import { ProfilePageProps, BuddyProfileProps } from '@/types';

async function fetchUser(id: string) {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) {
    throw new Error('Failed to fetch user');
  }
  return res.json();
}

export default async function ProfilePage({ params }: ProfilePageProps) {
  const user = await fetchUser(params.id);

  return (
    <>
      <section>유저 아이디 {params.id}</section>
      <section className="flex flex-col items-center justify-center w-full h-full">
        <BuddyProfile id={params.id} user={user} />
      </section>
      <section className="w-full h-full">
        <BuddyFollow id={params.id} />
      </section>
      <section>
        <BuddyTemperature id={params.id} />
      </section>
      <section className="mt-16 mx-8">
        <MyTrips id={params.id} />
      </section>
    </>
  );
}

페이지 컴포넌트(클라이언트 컴포넌트) 에서 페칭한 데이터를 하위 컴포넌트에서는 아래와 같이 사용하면 된다.

// types.ts

export type Params = {
  id: string;
};

export type ProfilePageProps = {
  params: Params;
};

export type BuddyProfileProps = {
  id: string;
  user: {
    name: string;
    email: string;
  };
};

import { BuddyProfileProps } from '@/types';

function BuddyProfile({ id, user }: BuddyProfileProps) {
  return (
    <div>
      <h1>Buddy Profile for user {id}</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default BuddyProfile;