인터셉터 오류

한 입 크기로 잘라먹는 Next.js(v15)

해결된 질문

작성

book 페이지의 인터셉터 페이지를 만드는 과정이다.
기존 book 페이지에서 인자값을 받고 있기 때문에 인터셉터 페이지에서도 인자값을 받기 위해서 props로 받았지만 인터셉터 페이지가 정상적으로 작동하지 않는다.

import BookPage from "@/app/book/[id]/page"

export default function Page(props: any) { //기존에 book 페이지에서 받고 있던 프롭스를 그대로 가져와야 해서 any타입으로 받는 것
    return 
   ( <div>
        가로채기 성공
        <BookPage {...props}/>
    </div>)
}

book 페이지의 인자 값은 다음과 같다.

export default async function Page({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const resolvedParams = await params;
  const id = resolvedParams.id;

  return (
    <div className={style.container}>
      <BookDetail bookId={id} />
      <ReviewEditor bookId={id} />
      <ReviewList bookId={id} />
    </div>
  );
}

인터셉터 페이지에서 인자값을 props: any가 아니라 다르게 설정해야 하나요?

react typescript next.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 FullStack 개발자님

이전 질문과 동일하게 먼저 return 문을 확인해보시면 뭔가 잘못되었다는걸 아실 수 있을거에요..! ㅋㅋ

return으로 아무것도 반환되지 않고 있습니다. 소괄호를 윗줄로 올려주셔야 할 것 같아요

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. Full Stack 개발자님.

인터셉터 페이지의 오류와 관련하여 몇 가지 확인해볼 점들을 안내해드리겠습니다. 인터셉터 페이지에서 props를 받고 그대로 BookPage에 전달하는 부분에서 문제가 있을 수 있습니다. 특히 Next.js에서는 props의 타입을 명확히 하는 것이 중요합니다. 여러분이 제시한 코드에서는 props의 타입이 any로 지정되어 있는데, 타입을 명확히 지정하면 문제를 더 쉽게 파악하고 해결할 수 있습니다.

문제 해결 방안

타입 명시:

props의 타입을 정확히 지정하는 것이 좋습니다. 기존 book 페이지에서 필요한 params가 Promise<{ id: string }> 타입이라면, 이를 해체하여 필요한 데이터를 명시적으로 기술할 수 있습니다.

   export default function Page({ params }: { params: Promise<{ id: string }> }) {
     return (
       <div>
         가로채기 성공
         <BookPage params={params} />
       </div>
     );
   }

Promise 처리:

인터셉터 페이지에서 params를 다룰 때, Promise로 전달되는지 확인하고, 이를 비동기 함수에서 처리하여 id 같은 데이터에 접근할 수 있도록 설정해야 합니다.

   export default async function Page({ params }: { params: Promise<{ id: string }> }) {
     const resolvedParams = await params;
     return (
       <div>
         가로채기 성공
         <BookPage params={resolvedParams} />
       </div>
     );
   }

기타 확인 사항:
- 전체 컴포넌트 구조를 점검하여, 중복되거나 불필요한 코드가 없는지 확인하세요.
- BookPage 컴포넌트가 올바르게 params를 수신할 준비가 되어 있는지 확인하세요.

관련 있는 기존 질문과 답변을 참고하여 추가로 정보를 얻기를 원하신다면 아래 링크를 참조하세요:

Next.js의 Promise-based props 처리 방법

UI와 비즈니스 로직이 제대로 백엔드와 통신할 수 있도록 조정을 시도해 보세요. 현재 제출된 정보를 기반으로 제시된 해결 방법이 도움이 되길 바랍니다.

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

Full Stack 개발자

질문자

말씀하신 대로 처리해도 아래와 같이 오류가 발생합니다.
그런데
```
{ params }: { params: Promise<{ id: string }> }
```
이렇게 프롭스에 값을 지정해버리면 컴포넌트로 활용할 수 없지 않나요?

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

인터셉터 오류

문제 해결 방안