CONTENT
ここから
18. 練習課題
課題1：記事を1件追加する
data/posts.ts に、以下のような記事を追加してください。
各務原でドローンライトショー開催
必要な項目は以下です。
id
slug
title
description
category
tags
publishedAt
readingMinutes
body
課題2：カテゴリを追加する
types/blogs.ts に新しいカテゴリを追加してください。
| 'Festival'
そして、記事データで使ってみましょう。
category: 'Festival'
課題3：検索してみる
検索欄に以下を入力して、記事が絞り込まれるか確認してください。
大垣
音楽
関市
映画
検索できれば、searchPosts が正しく動いています。
19. まとめ
今回は、Next.jsとTailwind CSSで、岐阜県ローカルエンタメニュースブログアプリを作りました。
学習のポイントは次の通りです。
| ポイント | 内容 |
|---|---|
| データを型で守る | BlogPost を作る |
| データを分ける | data/posts.ts に記事を置く |
| UIを分ける | BlogCard や CategoryBadge を作る |
| 検索を作る | useState と searchPosts を使う |
| 詳細ページを作る | /posts/[slug] を使う |
| 拡張できる形にする | DBやCMSに移行しやすくする |
このアプリは、かなり応用が効きます。
ニュース、コラム、実績紹介、FAQ、学習ログ、イベント情報。中身を変えれば、いろいろなサイトの土台になります。