NEXTDEVKIT ブログシステム

7/11/2025

NEXTDEVKIT には Fumadocs MDX で構築された強力なブログシステムが含まれており、Markdown と MDX コンポーネントを使用してリッチでインタラクティブなブログコンテンツを作成できます。このガイドでは、NEXTDEVKIT プロジェクトでブログコンテンツを作成・管理するために知っておくべきすべてのことを説明します。

🏗️ ブログシステムアーキテクチャ

NEXTDEVKIT のブログシステムは、コンテンツ、コンポーネント、設定を分離した整理された構造で構築されています：

src/
├── content/
│   └── blog/           # ブログ記事
├── components/
│   └── blog/           # ブログ専用コンポーネント
└── config/
    └── marketing/
        └── blog.ts     # ブログ設定

📝 ブログ記事の作成

新しいブログ記事を作成するには、src/content/blog/ ディレクトリに新しい .mdx ファイルを作成します。

基本的な記事構造

---
title: "記事のタイトル"
createdAt: 2025-01-15T10:00:00+09:00
updatedAt: 2025-01-15T10:00:00+09:00
tags: ["nextjs", "react", "web-development"]
description: "記事の説明文"
keywords: "nextjs, react, ウェブ開発"
author: "著者名"
image: "/path/to/image.jpg"
---

# 記事の内容

ここに記事の内容を書きます...

必須フィールド

  • title: 記事のタイトル
  • createdAt: 作成日時（ISO 8601形式）
  • updatedAt: 更新日時（ISO 8601形式）
  • description: 記事の説明文
  • author: 著者名

オプションフィールド

  • tags: タグの配列
  • keywords: SEO用キーワード
  • image: アイキャッチ画像のパス

🌐 多言語対応

NEXTDEVKIT のブログシステムは多言語に対応しています。言語別の記事を作成するには、ファイル名に言語コードを追加します：

  • article.mdx - デフォルト言語（英語）
  • article.ja.mdx - 日本語版
  • article.zh.mdx - 中国語版

🎨 MDX コンポーネント

MDX を使用することで、記事内でReactコンポーネントを使用できます：

import { Card } from "@/components/ui/card";

<Card>
  これはカードコンポーネントです。
</Card>

📱 レスポンシブデザイン

ブログシステムは完全にレスポンシブで、すべてのデバイスで美しく表示されます。

🔍 SEO最適化

各記事は自動的にSEO最適化されます：

  • メタタグの自動生成
  • Open Graph対応
  • Twitter Card対応
  • 構造化データ

これで NEXTDEVKIT のブログシステムを最大限に活用できます！