초반부 pnpm dev 후 발생하는 에러

Question

초기에 pnpm으로 example 다운받고 pnpm dev로 실행 후 기능을 사용해보면, 블로그의 글을 클릭하면 아래처럼 에러가 나오는데 이유와 해결방법이 어떻게 되나요? 아래는 명령창에 나오는 에러입니다. Error: Route "/blog/[slug]" used `params.slug`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at eval (app\blog\[slug]\page.tsx:55:70) at Array.find () at Blog (app\blog\[slug]\page.tsx:55:34) 53 | 54 | export default async function Blog({ params }) { > 55 | let post = await getBlogPosts().find((post) => post.slug === params.slug); | ^ 56 | if (!post) { 57 | notFound(); // ?룷?뒪?듃媛� ?뾾?쑝硫? 404 ?럹?씠吏�瑜? 諛섑솚 58 | } 殊? [Error: A React Element from an older version of React was rendered. This is not supported. It can happen if: - Multiple copies of the "react" package is used. - A library pre-bundled an old copy of "react" or "react/jsx-runtime". - A compiler tries to "inline" JSX instead of using the runtime.] { digest: '685037146' } Error: Route "/blog/[slug]" used `params.slug`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at eval (app\blog\[slug]\page.tsx:15:64) at Array.find () at Module.generateMetadata (app\blog\[slug]\page.tsx:15:28) 13 | 14 | export function generateMetadata({ params }) { > 15 | let post = getBlogPosts().find((post) => post.slug === params.slug) | ^ 16 | if (!post) { 17 | return 18 | }

cwnsgur13579 · Answer

동일한 증상이었는데 next 버전 14로 낮추니까 해결되더라고요
```
{ "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "dependencies": { "@tailwindcss/postcss": "4.0.0-alpha.13", "@types/node": "20.11.17", "@types/react": "18.2.55", "@types/react-dom": "18.2.19", "@vercel/analytics": "^1.1.3", "@vercel/speed-insights": "^1.0.9", "geist": "1.2.2", "next": "14.1.4", "next-mdx-remote": "^4.4.1", "postcss": "^8.4.35", "react": "18.2.0", "react-dom": "18.2.0", "sugar-high": "^0.6.0", "tailwindcss": "4.0.0-alpha.13", "typescript": "5.3.3" } }
```

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 손근수님. 질문해주신 에러는 두 가지로 나눌 수 있습니다. 하나는 params.slug 의 비동기 처리와, 다른 하나는 React 버전 문제입니다. 각각의 문제와 함께 해결 방법을 간단히 설명드리겠습니다. 1. params.slug 비동기 처리 관련 에러 params.slug 는 비동기적으로 값을 가져와야 하는데, 이를 기다리지 않고 사용하려 할 때 발생하는 에러입니다. 해결 방법 : await 키워드를 사용하여 params 를 충분히 기다리신 후 사용하는 것이 좋습니다. export default async function Blog({ params }) { const resolvedParams = await params; // params를 비동기로 대기 let post = await getBlogPosts().find((post) => post.slug === resolvedParams.slug); if (!post) { notFound(); // 포스트가 없으면 404 페이지 반환 } } 2. React 버전 관련 에러 이 에러는 주로 프로젝트 내 여러 React 버전이 충돌할 때 발생합니다. 이 문제는 node_modules 폴더 내 중복된 React를 정리하거나 버전을 일치시키면 해결됩니다. 해결 방법 : node_modules 폴더와 package-lock.json 또는 pnpm-lock.yaml 파일을 삭제합니다. pnpm install 명령어로 다시 의존성을 설치합니다. package.json 파일에서 react 와 react-dom 버전이 동일한지 확인해 주세요. 같은 문제가 해결된 경우를 참고해서 도움을 받을 수 있습니다: - Cannot find module 에러 해결 - CRA에서 Next.js로 마이그레이션 시 발생되는 문제 위 방법들이 도움이 되기를 바라며, 문제가 해결되지 않는다면 추가적으로 질문 부탁드립니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.