Freeお知らせの「もっと見る」トグル

Next.js app-router で、お知らせ一覧ページの「もっと見る」トグルを完成させる問題です。 お知らせごとに 'Read more' ボタンがあり、押すと本文が開き、もう一度押すと閉じます。 お知らせデータは静的な配列(lib/notices)で、トグルのロジックは components 配下のトグルコンポーネントのファイルに置きます。

Next.js app-router には、コンポーネントをどこで実行するかという区別があります。画面を 描くだけの部分と、ユーザーのクリックに反応して画面を変える部分は、実行される場所が違います。 この問題は、ボタンを押すと本文が開いて閉じる、ユーザーとやり取りする動作を持つ小さな ウィジェットを作ることを扱います。押すたびに画面が実際に変わるかを確認する習慣が大切です。

Next.js app-router でインタラクティブなウィジェットはどう作りますか？

ボタンのクリックのようにユーザーとやり取りする動作のある部分は、ページ全体ではなくその一部だけを切り出して小さなコンポーネントにするのが基本設計です。この問題のトグルコンポーネントがその一部です。

トグルの動作はどう検証しますか？

npm test で @testing-library/react のテストを実行し、npm run dev で開いた /notices で 'Read more' を押して本文が開き、もう一度押すと閉じるかを確認してください。

お知らせデータはどこから来ますか？

lib/notices.ts の静的な配列(3 件)から来ます。このデータは完成済みで変更は不要で、サーバー保存・グローバル状態は範囲外です。