[Next.js] 13.4.16에서 api 처리 시 겪은 에러 핸들링

Next.js 12버전을 사용해오다가, 대규모 업데이트가 된 지금 12를 계속 사용하는 것에는 문제가 있다고 판단하여 새로운 프로젝트에서는 13버전을 사용하기로 결정. 아래는 api를 적용하면서 겪었던 문제를 해결한 방법이다.

 

어떤 유튜브 동영상에는 root > pages > api 폴더를 생성하고 파일이름도 route로 하지 않아도 api 자체를 만들 수 있었지만 최신 버전에서는 유효하지 않다. 

우선 app > api > 설정 directory name > route.js 혹은 route.ts 안에 GET, POST, PUT 과 같이 METHOD 별로 함수이름을 정해야지만 서버 개발이 가능

함수 이름을 아무렇게나 해도 작동했었던 것과 달라서 기초적인 것이었지만 찾는데 오래걸렸음

 

front 단에서 post로 data를 보내면 예전에는 다른 조치없이 볼 수 있었는데, formData로 조회해야함

export async function POST(req) {
  const formData = await req.formData();

  const client = await connectDB;
  const db = client.db("sth");
  const title = formData.get("title");
  const description = formData.get("description");
  const content = formData.get("content");

  if (req.method == "POST") {
    let result = await db.collection("content").insertOne({
      title,
      description,
      content,
      uploaded: false,
    });
    return NextResponse.json(result);
  }
}

 

구글에 검색해보니, req.json()를 해서 구조분해할당하면 body를 열람할 수 있다고하는데 개소리 였음. req.json()을 해도 

next.js 13.4.16 error syntaxerror: unexpected token i in json at position 1 라는 에러가 계속 발생해서, 공식문서 뒤졌는데 아래 링크 부분 발견 

 

https://nextjs.org/docs/app/building-your-application/routing/route-handlers#request-body-formdata:~:text=%7D-,Request%20Body%20FormData,-You%20can%20read

공식문서가 짱