News機能の追加とスラッグ運用の見直し

実装例

Payload CMSにnewsコレクションを新設し、タイトル・スラッグ・要約・アイキャッチ画像・本文（リッチテキスト）・公開日を管理できるようにした。フロントエンドは/newsに一覧ページ、/news/[slug]に詳細ページを実装している。

一覧ページは公開日の降順でNewsを取得し、カード形式で表示。詳細ページは静的パラメータ生成（generateStaticParams）でビルド時に全件を事前生成し、本文はリッチテキストコンポーネントでレンダリングする。
構成のポイント

新規実装にあたり、新しいライブラリやパターンは導入せず、既存のPosts（Blog）コレクション・フロントエンドの構成をそのまま踏襲した。データ取得方法（Payload Local APIでのpayload.find、force-static + revalidate）、ページ構成（一覧/詳細で分離したpage.tsx・page.client.tsx）、コンポーネント（RichText、日付フォーマット）まで統一することで、コレクションが増えても保守性が落ちない設計にしている。

また、この実装と並行して、Posts/Showcases/Newsのスラッグ自動生成フックに不具合があることが判明した。日本語タイトルのローマ字変換に対応しておらず、実質タイトルをそのままスラッグに入れてしまう問題があったため、自動生成フックを廃止。3コレクションとも、一意なスラッグを管理者が手動で入力する運用に統一した。
技術スタック

• Next.js（App Router / force-static + ISR）
• Payload CMS（Local API、Lexicalリッチテキストエディタ）
• TypeScript
• Tailwind CSS