Next.js 프로젝트 트러블 슈팅 2

 

• 문제점 : route handlers 이용해서 api 호출하기 중에 데이터를 못가져오는 이슈

 

• 해결방안 : 
• 1번 오류 : 함수 이름을 HTTP method로 정해야 한다. 처음에 내가 api요청 함수 이름을 fetchRotation 이라고 지었는데 그게 잘못이였다. api를 get 하는 함수는 GET으로 이름을 지어야한다. next.js의 규칙이라고 한다.... ㅎㅎ.... 오케이...
• 2번 오류 : api를 불러와서 response의 data를 리턴해줄 때
  const response = await fetch(

        "https://kr.api.riotgames.com/lol/platform/v3/champion-rotations",

        {

          headers: {

            "X-Riot-Token": apiKey,

          },

        }

      );

  
  

      if (!response.ok) {

        throw new Error(`Failed to fetch`);

      }

  
  

      const data = await response.json();

      console.log(data);

      return data;

이렇게 하는게 글러먹음! ㅠㅠ

    return NextResponse.json(data);

 

NextResponse.json(data) 이런식으로 데이터를 리턴해줘야 하는거였음! 이 또한 Next.js의 법.... 프레임워크 쉽지않네....

 

• 느낀점 : 프레임워크를 처음 써보는데 적응하는게 쉽지않다... 아직 뭐가뭔지 하나도 모르겠는데 어쨋든 이렇게 하라니까 해야지ㅜㅜ 그리고 터미널에 에러창 뜨는것도 꼼꼼히 확인하는 습관!!!