📝 Next.js 13 Post 시, body 에 접근하기 ( 개인프로젝트 )

10_2pang·2023년 9월 10일
1

⚽️트러블슈팅

목록 보기
90/94
post-thumbnail

👨‍💻 사건


Next Route Handler 를 할시, 나는 항상 Next에서 제공하는 NextApi 타입을 import 하여 타입지정 하였다.

그래서 fetch 할때 넘겨주는 request 의 body 에 접근하기위해

export async function POST(req: NextApiRequest, res: NextApiResponse) {
  const session = req.body;

와 같은 식으로 넘겨 주었다.

그다음 session validate 를 하여, 에러코드를 넘겨주는 방식을 주로 사용했다.

if (!session || !session.user) {
  return res.status(400).json({ error: 'Invalid session' });
}

여기서 두가지의 문제점이 발생했다.

문제점

  1. 일단 session의 정보가 ReadableStream 으로 반환된다.
  2. res.status 가 정상적으로 동작하지 않는다.

✅ 해결


NextApiRequest → Request

개발자 커뮤니티 사이트를 돌아다니면서, 정답을 찾고자 하였다.
그러다 나와 비슷한 개발자가 남긴 코멘트를 보고

const session = req.json();

으로 수정하여 json 파일로 받아보고자 하였다.

그러자 json()에 타입오류가 발생하여 사용이 불가능한 메소드였다. 그래서 또 찾아보니, fetch 의 유틸리티 타입으로 Request 를 사용하면 된다는 정보를 접했다.

export async function POST(req: Request) {
  const session = await req.json();
  console.log('Request Body:', session);

서버에 찍히는 로그도 문제 없이 잘 찍히는 것을 파악할 수 있었다.

res.status → NextResponse

공식문서를 자세히 읽어보니, NextResponse 를 통해 JSON 본문으로 응답을 생성하는 방법을 권장하고 있었다.

if (!data.session || !data.session.user) {
    return NextResponse.json(
      {
        message: 'Invalid session',
      },
      {
        status: 400,
      },
    );
  }

Next.js 13의 레퍼런스가 많이 없다보니, 12버전의 내용을 공부하여 사용하는 경우가 더러있는데 잘 필터링하여 사용해야한다. 공식문서를 잘 해석하자.

💭 개선


  • 계속되는 clientVersion:"5.0.0"name:"PrismaClientValidationError" 오류메시지를 해결해야한다.
profile
주니어 프론트엔드 개발자 이광렬 입니다 🌸

1개의 댓글

comment-user-thumbnail
2024년 8월 31일

감사합니다 사람 하나 살리셨어요...! ㅜㅠㅜㅠㅜ

답글 달기