npm run build 했을 때, 북 상세 페이지에서 오류 발생하시는 분들은 아래와 같이 수정해보시길 바랍니다. 3.6)네비게이팅 진행 중, npm run build를 통해 빌드 시, 아래와 같이 타입 오류가 발생 src/app/book/[id]/page.tsx Type error: Type '{ params: { id: string | string[]; }; }' does not satisfy the constraint 'PageProps'. Types of property 'params' are incompatible. Type '{ id: string | string[]; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag] 이유: nextjs 최신 버전에서 params가 promise 형태로 바뀌게 되면서 타입 오류가 발생하는 것으로 추정 아래와 같이 타입을 정의 import ClientComponent from "@/app/components/ClientComponent"; type PageParams = Promise<{ id: string }>; const Page = async ({ params }: { params: PageParams }) => { const { id } = await params; return ( <div> Page {id} <ClientComponent> <></> </ClientComponent> </div> ); }; export default Page;
npm run dev로 실행 시 정상 실행되고있고 npm run build 시 아래와 같이 에러가 발생하고있습니다. 제 소스코드는 아래에서 확인가능합니다 https://github.com/redinbluesky/section02 =========npm run build 시 에러 메시지======== D:\01_Study\01_REACT\02_ONE_BITE_NEXT_JS\02_VsCode_WorkSpace\section02>npm run build > section02@0.1.0 build > next build ▲ Next.js 14.2.18 ./src/components/book-item.tsx ....................................................... ✓ Linting and checking validity of types Creating an optimized production build ... ✓ Compiled successfully ✓ Collecting page data Generating static pages (0/7) [ ]인덱스 페이지 Generating static pages (2/7) [= ]Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=%5Bobject%20Promise%5D for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at Z (D:\01_Study\01_REACT\02_ONE_BITE_NEXT_JS\02_VsCode_WorkSpace\section02\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:490) ........................................................ Error occurred prerendering page "/lib/fetch-bo............................. Error occurred prerendering page "/lib/fetch-rendom-books". Read more: https://nextjs.org/docs/messages/prerender-error ....................................... Error occurred prerendering page "/lib/fetch-one-book". Read more: https://nextjs.org/docs/messages/prerender-error .......................................... ✓ Generating static pages (7/7) > Export encountered errors on following paths: /lib/fetch-books /lib/fetch-one-book /lib/fetch-rendom-books
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 깃허브에 올라온 선생님 코드를 모두 복붙해봐도 없어지지 않는데 무엇이 문제일까요? 선생님 코드와 같은데..
컴포넌트 클라이언트인 ThemeProvider를 최상위 layout의 children을 감싸면 정적인 서버 컴포넌트를 더 이상 활용할 수 없는 제약이 생기지 않나요?? nextjs에서 지향하는 방법인지 잘 모르겠습니다. 이렇게 사용해도 되는것인가요? 아니면 단순 빠른 예제실습을 위해 그렇게 하신건가요?
안녕하세요. 강사님 좋은 강의 감사드립니다. 빌드 기호에 관해 질문있습니다. 영상 19:05초에 App Router의 Static은 Page Router의 SSG와 같다고 하셨는데요. Page Router의 기호 App Router의 기호 보시는 바와 같이 Page Router의 Static과 App Router의 Static 문구가 같습니다. (prerendered as static content) 궁금한것은 1 App Router의 Static이 Page Router의 SSG와 같다면 왜 App Router Static 설명이 Page Router SSG인 (prerendered as static HTML) 설명이 아닌 Page Router의 Static과 동일한걸까요? (prerendered as static content) 즉 App Router의 (Static): prerendered as static HTML이어야 맞는 거 아닌가요? (Static) prerendered as static content 왜 인 걸까요? 헷갈리네요 ㅜㅜ 2. 기존 Page Route의 Static은 어떤 식으로 동작한 건가요? 그냥 정적인 페이지인건가요? 감사합니다!
강의에 나오는 JSON 데이터를 한 눈에 보기 힘드신 분들은 아래 확장 프로그램을 통해 JSON 데이터를 시각적으로 구조화해서 좀 더 보기 좋게 확인하실 수 있습니다. JSON Viewer https://chromewebstore.google.com/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh
안녕하세요! 강의를 쭉 듣고, 배포 단계까지 왔는데 에러가 생겨서 진행이 안되어 문의드립니다! vercel에서 에러는 Failed to compile. src/app/[location]/page.tsx Type error: Type 'Props' does not satisfy the constraint 'PageProps'. Types of property 'params' are incompatible. Type '{ location: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag] Error: Command "npm run build" exited with 1 이며, 그전에도 Route "/[location]" used params.location . params should be awaited before using its properties. Learn more: 위와 같은 에러가 떴고, 이는 경로 및 쿼리 파라미터를 위한 객체에서 런타임 에러가 뜨는걸로 확인했습니다! 강의를 똑같이 따라갔는데, 위와 같은 에러가 나는게 의아하여 한번 문의드립니다! import HomeButton from "../components/HomeButton"; import { getForecast } from "../utils/getForecast"; type Props = { params: { location: string; }; searchParams: { name: string; }; }; export function generateMetadata({ searchParams }: Props) { return { title: `날씨 앱 - ${searchParams.name}`, description: `${searchParams.name} 날씨를 알려드립니다`, }; } export default async function Detail({ params, searchParams }: Props) { const name = searchParams.name; const res = await getForecast(params.location); return ( <> <h1>{name}의 3일 예보</h1> <ul> {res.forecast.forecastday.map((day) => ( <li key={day.date}> {day.date} / {day.day.avgtemp_c} </li> ))} </ul> <HomeButton /> </> ); } 크리스마스 쉬는날 연락드려, 죄송하며 빠른 답변 부탁드립니다!
새 강의도 쿠폰 받아서 잘 구매 하였습니다. 궁금한 것은 기존 강의를 다 듣고 새 강의를 수강해야 하는 것인지 기존 강의의 진도와 새 강의의 진도가 어느 부분인지 어떻게 바뀐 것 인지에 대해 이해가 안 가서 어떻게 해야하는지 알려주는 공지 또는 간단 영상이 필요할 것 같습니다. 기존 강의의 커리큘럼과 비슷하나 좀 바뀐 부분이 있을 것 같아서요. 기존 강의를 다 수강 후 복습 + 새로운 기술을 익힐 겸 새 강의를 수강하는 것이 맞는지, 아니면 기존 강의는 수강을 멈추고 새로운 강의를 다시 수강하면 되는 것인지 알려주시면 감사하겠습니다.
안녕하세요, 수업 잘 듣고 따라가고 있습니다~~!! 다름이 아니라 , 아무래도 graphQL를 이용한것보다 취직하고싶은 회사에서 대부분 REST API를 사용하는거같아 혹시 fetch 또는 axios를 사용하는 방법은 강의에 추가할 계획이 없으실까요? 그리고 nextjs에서는 axios를 사용하는 대신에 fetch를 사용하는것이 맞을까요?
안녕하세요. 프로젝트에서 error.tsx 를 띄우는 예시로, 백엔드 서버를 종료하여 데이터를 받아오지 못하게 함으로써 error.tsx 가 표시되는 경우를 다루셨습니다. 이때, "백엔드 서버를 종료해서 데이터를 받아오지 못하게 함"을 "페이지가 렌더링되지 못하게 함"으로 이해해도 괜찮은지 궁금합니다. 이 질문을 드리게 된 이유는, 프로젝트에서 에러를 처리할 때 error.tsx 나 에러 페이지를 띄우는 것 외에도 다양한 방식으로 에러를 처리할 수 있기 때문입니다. 예를 들어, 에러 모달을 띄운다거나, 다른 페이지로 이동시키는 등의 방법도 있습니다. 그래서 error.tsx 가 어떤 종류의 에러에 대한 대비책인지 명확히 이해하고 싶습니다. 저는 error.tsx 가 예상치 못한 500번대 서버 에러와 같은 페이지나 컴포넌트 렌더링 실패 를 처리하는 페이지라고 이해하고 있는데, 제 이해가 맞는지 궁금합니다.
