CONTENT
ここから
16. よくあるエラー
エラー1：****Cannot find module '@/types/blogs'
原因は、ファイル名や場所が違う可能性があります。
確認してください。
types/blogs.ts
今回のimportは以下です。
import type { BlogPost } from '@/types/blogs';
blog.ts ではなく、blogs.ts にしている点に注意です。
エラー2：カテゴリで型エラーが出る
例えば、記事データでこう書いたとします。
category: 'Business'
でも、BlogCategory に Business がなければエラーになります。
今回の型は以下です。
export type BlogCategory =
| 'Entertainment'
| 'Culture'
| 'Music'
| 'Design'
| 'Tourism';
使いたいカテゴリがある場合は、型にも追加してください。
export type BlogCategory =
| 'Entertainment'
| 'Culture'
| 'Music'
| 'Design'
| 'Tourism'
| 'Business';
エラー3：params.slug が使えない
Next.js 15以降では、params がPromise扱いになるケースがあります。
今回のコードでは、以下のように対応しています。
type PostPageProps = {
params: Promise<{
slug: string;
}>;
};
そして、ページ内でこう書きます。
const { slug } = await params;
Next.js 16でもこの書き方で進められます。
17. カスタマイズ案
完成したら、次はここを変えると楽しいです。
| カスタマイズ | 内容 |
|---|---|
| 記事を増やす | data/posts.ts に記事を追加 |
| カテゴリを増やす | types/blogs.ts にカテゴリを追加 |
| 地域別にする | 岐阜市、大垣市、高山市などで分類 |
| 画像を追加 | アイキャッチ画像を表示 |
| タグページを作る | #岐阜市 をクリックできるようにする |
| 管理画面を作る | 記事をブラウザから追加できるようにする |
| Supabase連携 | 記事をDBで管理する |
| Notion連携 | NotionをCMSとして使う |
最初は「記事を増やす」だけで十分です。
自分のデータに変えると、急にアプリっぽくなります。