Next.js 13(App Router) API Routes - 405, 500 Error 해결

📒 오늘의 공부

1. Next.js 13(App Router) API Routes Test

405(Method Not Allowed), 500(Internal Server Error) 해결

1. Next.js API Routes Test 배경

• Next.js를 이용한 프로젝트에서 GPT AI를 연동하기 전, API Routes가 정상 작동하는지 test를 했다.

API Routes code

• 👉🏻 Next.js API Routes 공식문서
  

• 공식문서에서는 경로가 pages/api로 되어 있는데 Next.js 13에서는 pages 폴더를 사용하지 않기 때문에 경로는 아래와 같이 변경했다.

  • testApi 경로 -> src/app/api/testApi/route.ts
    

---

💡 Next.js 13 API Routes 경로

• api폴더 안에 api이름으로 된 폴더 및 하위 route.ts파일을 만들지 않고 바로 testTwo.ts와 같은 파일을 만들 경우 404 error 발생
  

  

---

• Client에서는 api 폴더 이름을 url의 endpoint로 보고 접근하면 된다.
  ex. const response = await fetch('/api/testApi');

Client code

• src/app/page.tsx
• 버튼을 만들어 api를 call하는 handleApiTest 함수를 연결했다.
  

2. 405 (Method Not Allowed) 발생

• api call 함수와 연결 된 버튼 클릭 시 405 Error 발생
  

---

💡 405 (Method Not Allowed)

• 405 Error는 클라이언트가 특정 URL에 대해 허용되지 않는 HTTP 메소드를 사용했을 때, 서버 측에서 해당 요청 방법을 허용하지 않는 경우에 발생한다.

• 405 Error가 발생하는 이유

  • 서버 측 코드 오류 / CORS (Cross-Origin Resource Sharing) 문제 / 라우트 및 메소드 일치
  • 라우트 및 메소드 일치의 경우 -> Next.js API Routes에서는 함수의 이름이 해당 엔드포인트의 HTTP 메소드를 나타낸다. 함수 이름이 잘못된 경우 405 Error가 발생할 수 있다.

---

• 해결 과정

  • 일반적으로 Next.js API 라우트에서 사용되는 규칙은 함수 이름이 HTTP 메소드와 일치해야 한다는 것 => api 내에서 함수의 이름을 GET으로 변경
  • 일반적으로 API Routes에서는 export dafult 함수가 아니라 export 함수 를 사용한다 => default를 지우고 export async function GET으로 변경

• 코드 수정 결과

  • 405 Error가 발생하던 code
    

  • 405 Error가 발생하지 않는 code
    

3. 500(Internal Sever Error) 발생

• 405 Error는 해결되었지만 바로 500 Error가 발생했다.
  

---

💡 500(Internal Sever Error)

• 서버 측에서 오류가 발생하여 요청을 처리할 수 없는 상태임을 나타내는 HTTP 상태 코드로 클라이언트 요청을 처리하는 동안 서버에서 예상치 못한 문제가 발생했음을 나타낸다.

• 500 Error가 발생하는 이유

  • 서버 측 코드 오류 / 서버 자원 부족 / 외부 서비스 오류 / 권한 문제
  • 서버 측 코드 오류의 경우 -> 서버 측 어플리케이션 또는 스크립트에서 오류가 발생한 경우. 이는 코드의 버그, 잘못된 구현, 라이브러리 오류 등으로 인해 발생할 수 있다.

---

4. 모든 문제의 최초 원인 발견

• Next.js 공식 사이트에서는 pages router를 사용할 때 / app router 사용할 때를 구분해서 공식문서 내용을 확인할 수 있다.
  
  • 현재 Next.js를 이용한 프로젝트는 App Router를 사용중인데 공식문서는 Pages Router에 대한 부분을 참고했기 때문에 계속 오류가 발생했던 것
  • App Router 공식문서를 참고하여 코드를 수정했다.
  • 👉🏻 App Router - Route Handlers 공식문서
    
  • 👉🏻 App Router - NextResponse 공식문서
    

5. API Routes Test 정상 작동하는 전체코드

• Api code

  // src/app/api/testApi/route.ts
  import { NextResponse } from "next/server";
  
  export async function GET(request: Request) {
    return NextResponse.json({ message: 'Hello from Next.js!' })
  }

• Client code

  // src/app/page.tsx
  
  // api test
  const handleApiTest = async () => {
    try {
      const response = await fetch('/api/testApi');
  
      if (response.ok) {
        const data = await response.json();
        console.log('Response status:', response.status);
        console.log('Response message:', data.message);
      } else {
        console.log('API 요청 실패');
      }
    } catch (error) {
      console.error('API 요청 오류:', error);
    }
  };
  
  		...
    
  {/* api Test button */}
  <Button onClick={handleApiTest}>Api test</Button>

---

---

배운 것

• 바로 눈 앞의 문제를 해결해야 한다는 생각에 시야가 더 좁아지는 것을 경험했다.
  • ex. 405 Error 해결 후 생긴 500 Error 해결에만 집중
  • 필요한 것은 처음에 왜 이 문제가 발생했는지 더 상위 수준의 접근
  • 특히 Next.js 처럼 Pages Router, App Router 등으로 버전이 달라지는 경우 공식문서를 참고할 때도 올바른 버전의 공식문서를 보고 있는지도 한 번 더 확인해야 할 필요가 있다는 것을 배웠다.