인프런 커뮤니티 질문&답변

아래 AI 댓글에 답변을 달았네요 ㅠㅠ 다시 답변에 달겠습니다!

안녕하세요!
아마 이번에 nextjs 를 설치하고 따라오셨다면 15 버전이 설치되셨을거에요!

15버전부터는 params 가 async 로 바뀌어서 해당 부분에 대한 처리를 하셔야합니다!

새소식에 적어 놓긴 했는데 다시 한번 안내해드릴게요!!

아래와 같이 수정하시면 잘 되실겁니다

route.ts

import { NextResponse } from "next/server";

// params 는 async 이기 때문에 Promise 로 감싸서 타이핑
type Params = Promise<{ testId: string }>;

export async function POST(request: Request, segmentData: { params: Params }) {
  const userData = await request.json();
  // params을 사용할 때 역시 await를 붙여주시면 됩니다.
  const params = await segmentData.params;
  console.log("server user data", userData);
  console.log("server params", params.testId);
  return NextResponse.json(
    { message: "성공적으로 생성하였습니다." },
    { status: 201 }
  );
}

page.tsx

import { use } from "react";

// page 역시도 params 부분은 Promise로 감싸줍니다.
type Params = Promise<{ testId: string }>;

export default function TestDetailPage(props: { params: Params }) {
  // client page 에서는 await를 사용할 수 없으므로 react에서 새로 추가된 use hook으로 받아주시면 됩니다.
  const { testId } = use(props.params);

  const handleSubmit = async () => {
    const response = await fetch("/api/test/1234", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ name: "test name", email: "test email" }),
    });

    const data = await response.json();

    console.log("client data", data);
  };
  return (
    <>
      테스트 디테일 페이지: {testId}
      <button type="submit" onClick={handleSubmit}>
        전송
      </button>
    </>
  );
}

바뀐 부분에 대해서는 아래 링크를 참고해주세요!

https://nextjs.org/docs/app/building-your-application/upgrading/version-15#asynchronous-page

안녕하세요, 인프런 AI 인턴입니다. 수하님.
Next.js에서 비동기적 데이터 처리와 관련하여 발생하는 문제에 대해 질문해주셨습니다. 발생한 에러는 params 객체를 비동기적으로 처리해야 한다는 내용입니다. 이 문제를 해결하기 위해 몇 가지 설명과 함께 도움이 될 수 있는 링크를 제공드리겠습니다.

문제의 원인

문제는 Route Handler가 비동기적으로 데이터를 받아와야 한다는 것입니다. React에서는 클라이언트 사이드에서 데이터를 가져올 때 비동기적인 처리를 기본으로 하여 이루어지므로, 서버 사이드에서도 동일한 방식으로 데이터를 처리해야 합니다.

주요 내용 요약

• params 객체를 사용할 때는 그 값을 사용하기 전에 반드시 데이터를 가져와야 합니다.
  
• 이는 특히 dynamic route에서 중요하며, 데이터를 가져오기 전에 params를 사용하는 경우 에러가 발생합니다.
  

참고자료

1. 공식 문서: Handling Dynamic Routes in API Routes

   • 이 문서에서는 dynamic API 라우트를 처리하는 방법에 대해 설명하고 있습니다. 위 에러 메시지에서 안내하는 링크로, 정확한 비동기 처리 방법을 이해하는데 도움이 될 것입니다.
     

2. Next.js 비동기 처리 관련 공식 가이드: API Routes with Next.js

   • API 라우트를 구현하는 기본적인 방법과 이를 비동기적으로 다루는 방법에 대해 설명하고 있습니다.
     

3. 다음과 같이 params를 처리하는 것을 고려할 수 있습니다:

   export async function POST(request: Request, {params}: {params: {testId: string}}){
       const userData = await request.json();
       console.log("server user data", userData);
   
   
       // Safely access params after ensuring they are fully available
       if(params && params.testId){
           console.log("server param", params.testId);
       }
   
   
       return NextResponse.json({message: "사용자가 성공적으로 생성되었습니다."});
   }
   

기본적으로 params가 비동기적으로 로드되기를 기다리고, 이후에 이를 이용하도록 코드를 개선하는 것이 좋습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.