第4章 ブログプロジェクトの設計

// 例: 投稿一覧コンポーネント（仮想的なサンプル）
import React from 'react';

interface Post {
  id: number;
  title: string;
  excerpt: string;
  tags: string[];
}

interface PostListProps {
  posts: Post[];
}

export const PostList: React.FC<PostListProps> = ({ posts }) => {
  return (
    <div>
      <h2>投稿一覧</h2>
      {posts.map((post) => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.excerpt}</p>
          <div>
            {post.tags.map((tag, index) => (
              <span key={index} className="tag">{tag}</span>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

# 例: Markdown ファイルを管理するためのディレクトリ構成
my-next-app/
└── posts/
    ├── post-1.md
    └── post-2.md

// 例: Contentful API を使って記事データを取得する（fetcher の一部）
import { createClient } from 'contentful';

const client = createClient({
  space: process.env.CONTENTFUL_SPACE_ID!,
  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN!,
});

export async function getPosts() {
  const entries = await client.getEntries({ content_type: 'blogPost' });
  return entries.items;
}

my-next-app/
├── components/      // UIコンポーネント（共通部品）
│   ├── Header.tsx
│   ├── Footer.tsx
│   └── PostCard.tsx
├── lib/             // API クライアントやユーティリティ関数
│   └── contentful.ts
├── pages/           // Next.js のページコンポーネント
│   ├── index.tsx    // 投稿一覧ページ
│   ├── posts/       
│   │   └── [id].tsx // 動的な投稿詳細ページ
│   └── about.tsx
├── posts/           // Markdown/MDX ファイル（記事データ）
├── public/          // 画像や静的ファイル
└── styles/          // グローバル CSS やモジュール CSS

// pages/_app.tsx
import '../styles/globals.css';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <div className="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

/* styles/globals.css */
/* Tailwind CSS の基本設定（tailwind.config.js との連携が必要） */
@tailwind base;
@tailwind components;
@tailwind utilities;