Next.js / 앱 라우터의 라우트 핸들러 미니정리

제미나이로 생성한 Next.js 이미지

 

라우트 핸들러는 리액트 프런트엔드인  Next.js를 API 서버처럼 사용하게 해주는 기능이다.

 

라우트 핸들러를 사용하기 위해서는 app 폴더 내에 만들고자 하는 백엔드 API 경로대로 폴더를 만들고

그 안에 route.js 또는 route.ts라는 파일을 만들어서 API와 관련된 코드를 작성하면 된다.

 

* page.js와 동일한 라우트 세그먼트 레벨에 route.js 파일이 존재하면 에러가 발생한다.

 

ex1 ) app/page.js , app/route.js -> 충돌 오류 발생!!!

ex2)  app/api/route.js, app[user]/page.js -> 충돌 X

 

- 만약에 [user]에 동적으로 api가 들어간다면 Next.js는 우선순위를 줘서 정적 경로(api)가 동적 세그먼트보다 우선시 된다.

- 따라서 충돌이 발생하지 않고 app/api/route.js가 실행이 된다. (하지만 필터링을 하거나 해서 막는게 좋다..)

 

// app/api/posts/[postId]/route.ts
 
import{ NextRequest, NextResponse} from 'next/server';
import samplePosts from '@/lib/contants/sampl-posts.json';
 
/*
    타입스크립트의 interface를 사용해 동적인 url 파라미터의 값을 얻기 위해서 선언한다.
    ex) app/api/posts/1
*/
interface RequestPayload {
    params: Promise<{postId: string}>
}
 
export async function GET(request: NextRequest, payload: RequestPayload){
    const {postId} = await payload.params; // 동적인 파라미터 값 받기
 
    const post = samplePosts.find((data) => {
        return data.id === postId; // JSON 데이터의 id값이 파라미터 입력값과 같은지 비교
    });
 
    if(!post){
        return NextResponse.json('Not found', { // 값이 없을때 404 페이지 반환
            status: 404,        
    });
 
    return NextResponse.json(post, {  // 값이 존재할때 200 상태 반환하면서 post값 반환
        status : 200,
    });
  }
}