NextJS 13의 동적 라우팅이 예상대로 작동하지 않습니다. 어떻게 작동하게 만들까요?

Question

ID 부분이 동적이어야 하는 NextJS 13 프로젝트에서 URI가 blogs/id/을 갖도록 동적 라우팅을 사용하려고 하는데 작동하지 않는 것 같습니다. 블로그에 해당하는 페이지가 항상 표시되는 것 같습니다.

저는 이 프로젝트에 Next 13의 실험적 애플리케이션 디렉토리를 사용하고 있으며 경로 blogs，我通过创建 layout.jsx 和 来设置它src/app/blogs/ 目录中的 >page.jsx가 있습니다.

해당 JSX가 렌더링되는 것을 src/app/blogs/[id]/page.jsx中的控制台日志语句显示在服务器端控制台中。即终端（不是浏览器控制台）。但是，return语句中对应的JSX并没有渲染。相反，与 blogs알았습니다.

프로젝트의 JSX 코드:

src/app/blogs/layout.jsx

으아아아

src/app/blogs/page.jsx

으아아아

src/app/blogs/[id]/layout.jsx

으아아아

src/app/blogs/[id]/page.jsx

으아아아

프로젝트 및 환경 세부정보:

-다음 v13.3.0

- Tailwindcss v3.3.1

- 노드 v18.15.0

- 원사 v1.22.19

- 우분투 22(리눅스)

참고용 스크린샷:

참고용 블로그/2 스크린샷

참고용 프런트엔드 스크린샷

공식 문서를 몇 번 읽었지만 여기서 무엇이 잘못되고 왜 올바르게 렌더링되지 않는지 이해할 수 없습니다. 어떤 도움이라도 대단히 감사하겠습니다.

Answer 1

여기서 문제는 동적 라우팅이 아니라 layout.jsx입니다.

페이지를 수동으로 렌더링하는 대신 하위를 렌더링해야 합니다.

src/app/blogs/layout.jsx

으아아아

src/app/blogs/[id]/layout.jsx

으아아아

추가 정보

• 페이지 콘텐츠는 자동으로 가장 가까운 layout.jsx로 전달됩니다. 예를 들어 http://localhost:3000/blogs에 액세스하려고 하면 앱/블로그 내의 레이아웃 이 렌더링됩니다
• http://localhost:3000/blogs/1에 접속하려고 하면 app/blogs/[id] 내부의 레이아웃이 렌더링됩니다
• 사용 사례는 모르겠지만 http://localhost:3000/blogs/1에 액세스할 때 app/blogs/[id]에 레이아웃이 없을 때 정보를 제공하기 위한 것입니다. 가장 가까운 것은 app/blogs에 있을 것입니다. 즉, 여러 레이아웃이 필요하지 않습니다

참고용

• 페이지 및 레이아웃 - https://nextjs .org/docs/app/building-your-application/routing/pages-and-layouts
• 라우팅 그룹 - https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts