라우트 핸들러

Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 37번째.

서버 컴포넌트는 이미 서버에서 실행되므로 대부분의 데이터 요청을 처리합니다.하지만 때로는 브라우저가 클릭 후나 검색창 입력이 끝난 후처럼 나중에 데이터를 요청해야 할 때가 있으며, 이를 위해서는 호출할 엔드포인트가 필요합니다.

내부에 route.js가 있는 폴더는 정확히 해당 경로가 됩니다. 페이지와 동일한 라우팅 규칙이 적용되며, 특별한 파일만 다릅니다:

app/
    api/
        dishes/
            route.js     ->  /api/dishes

내부에서 HTTP 메서드의 이름을 딴 함수를 export합니다:

import { dishes } from '../../../lib/dishes.js';

export async function GET() {
    return Response.json(dishes);
}

Response.json(...)은 전체 응답입니다: 값을 직렬화하고 JSON 콘텐츠 유형을 설정합니다. 같은 파일에서 POST, PUT, DELETE도 export할 수 있습니다.

그런 다음 클라이언트 부분은 일반적인 브라우저 코드입니다:

const res = await fetch('/api/dishes');
const data = await res.json();

두 가지를 구별해야 합니다. 폴더에는 page.jsx 또는 route.js 둘 중 하나만 포함될 수 있으며, 둘 다 포함될 수는 없습니다. 두 파일이 동일한 URL을 요청하게 되기 때문입니다. 그리고 route.js는 컴포넌트가 아닙니다. JSX가 아닌 Response를 반환합니다.

브라우저에 필요할 때 데이터를 제공해야 하거나 앱 외부의 무언가가 호출해야 하는 경우 라우트 핸들러를 사용하세요. 서버 컴포넌트가 렌더링하는 동안 데이터를 바로 읽을 수 있다면 그렇게 하도록 두세요.

챌린지

중급

작은 API를 구축하고 브라우저에서 호출하세요.

app/api/dishes/route.js에서, dishes를 JSON으로 반환하는 async function GET을 export하세요.
components/DishLoader.jsx에서, loadDishes를 완성하세요: /api/dishes를 fetch하고, JSON 바디를 읽은 뒤, setNames를 사용해 dish names를 store하세요.

#load-btn을 클릭하면 #dish-list가 4개의 이름으로 모두 채워져야 합니다.

직접 해보기

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}