NextJS 13 の動的ルーティングが期待どおりに機能しません。どうすればうまくいくでしょうか？

Question

ID 部分が動的である必要がある NextJS 13 プロジェクトで、URI が blogs/id/ になるように動的ルーティングを使用しようとしていますが、機能していないようです。常にブログに対応したページが表示されるようです。

このプロジェクトでは Next 13 の実験用アプリケーション ディレクトリを使用しています。layout.jsx と を作成して設定した blogs のルートがあります。これは、src/app/blogs/ ディレクトリ内の >page.jsx です。

src/app/blogs/[id]/page.jsx のコンソール ログ ステートメントがサーバー側のコンソールに表示されることに気付きました。つまり、端末（ブラウザコンソールではありません）です。ただし、return ステートメント内の対応する JSX はレンダリングされません。代わりに、blogs に対応する JSX がレンダリングされます。

プロジェクト内の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

- Ubuntu 22 (Linux)

参考用スクリーンショット:

ブログ/参考用の 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]
内のレイアウトが表示されます
• ユースケースはわかりませんが、レイアウトが app/blogs/[id]## に存在しないときに http://localhost:3000/blogs にアクセスするときの情報を提供するためです。 #/1 この場合、
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