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 がレンダリングされます。
src/app/blogs/layout.jsx
リーリー
src/app/blogs/page.jsx
リーリー
src/app/blogs/[id]/layout.jsx
リーリー
src/app/blogs/[id]/page.jsx
リーリー
参考用スクリーンショット:
公式ドキュメントを何度か読みましたが、何が問題なのか、なぜ正しくレンダリングされないのか理解できません。ご協力をよろしくお願いいたします。
ねえ、ここで私が見た問題は、 が 動的ルーティング ではなく、layout.jsx であるということです。
ページを手動でレンダリングするのではなく、子をレンダリングする必要があります。
リーリーsrc/app/blogs/layout.jsx
リーリー ######詳しくは######src/app/blogs/[id]/layout.jsx
ページ コンテンツ
は、最も近いlayout.jsx- に自動的に渡されます。たとえば、http://localhost:3000/blogs ## にアクセスしようとすると、 # application /blog 内のレイアウトがレンダリングされます
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