해결된 질문2025-01-16T12:07:04.241Z

Full Stack 개발자

작성한 질문수 39

0

안녕하세요 FullStack 개발자님

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

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

0

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

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

문제 해결 방안

1. 타입 명시:
   

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

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

2. Promise 처리:
   

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

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

3. 기타 확인 사항:

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

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

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

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

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