Next.js13 API route에서 GET 방식 사용해서 키워드 전달하기

Next.js13 API route를 사용하여 데이터를 받아오는 로직을 작성하고 있었는데, 특정 키워드를 전달해서 그 키워드를 기반으로 데이터를 받아와야 했는데, GET 방식에서는 body를 전달할 수 없어서 에러가 발생했다.

이것을 해결하기 위한 방식으로 POST로 바꾸어 사용하는 방식이 있고, 그렇게 해도 작동하지만, 그 방식의 접근은 적절하기 않다고 느껴서 더 찾아보기로 했다.

오류가 발생한 코드. method를 POST로 바꿔도 해결이 가능하다.

const response = await fetch(
	'/api/dictionary',
	{
		method: "GET",
		body: JSON.stringify({data})
	}
);

최종 결과

API route에 접근할 때, params를 전달하는 방법으로 바꾸었다. Next.js에는 searchParams가 존재한다. 이 메서드는 현재 URL의 매개변수에 접근할 수 있도록 해 준다.

1. 현재 요청의 URL 객체를 생성하고
   new URL(request.url)
2. 생성된 URL에서 클라이언트 단에서 전달받은 쿼리를 받아온다.
   searchParams.get("word")

메서드도 목적에 맞게 GET 방식을 사용할 수 있게 되었다.

클라이언트

    const response = await fetch(
      `/api/dictionary?word=${inputRef?.current.value}`,
      {
        method: "GET",
      }
    );

route.ts

  const { searchParams } = new URL(request.url);
  const word = searchParams.get("word");

키워드는 위 방식을 통해 접근하여 받아올 수 있다.