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

손에 익는 Next.js - 블로그 만들기

작성

329

수정됨

초기에 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 (<anonymous>)
    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 (<anonymous>)
    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 |   }

react 블로그 next.js

답변 2

cwnsgur13579

동일한 증상이었는데 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" } }
```

인프런 AI 인턴

안녕하세요, 인프런 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로 마이그레이션 시 발생되는 문제

위 방법들이 도움이 되기를 바라며, 문제가 해결되지 않는다면 추가적으로 질문 부탁드립니다.

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

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