Astro × microCMS で記事一覧・記事詳細・ページ送りを作る｜getStaticPaths と fields で静的生成

src
├── components
│   ├── ArticleCard.astro   # 記事カード（一覧の1件分）
│   ├── ArticleList.astro   # 記事カードを並べる
│   └── Pagination.astro    # ページ送り
├── consts.ts               # サイト名・1ページの件数などの定数
├── layouts
│   └── BaseLayout.astro    # 共通レイアウト
├── lib
│   ├── date.ts             # 日付の表示形式
│   └── microcms.ts         # 一覧用の取得関数を追加
├── pages
│   ├── index.astro         # 新着記事
│   └── blog
│       ├── index.astro     # 記事一覧の1ページ目
│       ├── [id].astro      # 記事詳細
│       └── page
│           └── [page].astro # 記事一覧の2ページ目以降
└── styles
    └── global.css

---
import '../styles/global.css';
import { SITE_DESCRIPTION, SITE_NAME } from '../consts';

interface Props {
	/** 未指定ならサイト名のみ */
	title?: string;
	description?: string;
}

const { title, description = SITE_DESCRIPTION } = Astro.props;

const pageTitle = title ? `${title} | ${SITE_NAME}` : SITE_NAME;
---

<!doctype html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<link rel="icon" href="/favicon.ico" />
		<meta name="generator" content={Astro.generator} />

		<title>{pageTitle}</title>
		<meta name="description" content={description} />
	</head>
	<body>
		<!-- ヘッダー・フッターは省略 -->
		<main class="container">
			<slot />
		</main>
	</body>
</html>

export const SITE_NAME = 'cyber-blow';
export const SITE_DESCRIPTION =
	'エラー解決・検証・比較・AIツール活用術など、実際に手を動かして確かめたIT技術情報を発信するブログ。';

/** 記事一覧1ページあたりの表示件数 */
export const POSTS_PER_PAGE = 12;

export type BlogSummary = Omit<Blog, 'content'>;

// 一覧では本文（content）を取得しないことで転送量を抑える
const SUMMARY_FIELDS = [
	'id',
	'title',
	'eyecatch',
	'category',
	'createdAt',
	'updatedAt',
	'publishedAt',
	'revisedAt',
];

/** 全記事（本文込み）。記事詳細ページの生成に使う */
export function getAllBlogs(): Promise<Blog[]> {
	return client.getAllContents<Blog>({
		endpoint: 'blogs',
		queries: { orders: '-publishedAt' },
	});
}

/** 全記事（本文なし）。一覧ページに使う */
export function getBlogSummaries(): Promise<BlogSummary[]> {
	return client.getAllContents<BlogSummary>({
		endpoint: 'blogs',
		queries: { fields: SUMMARY_FIELDS, orders: '-publishedAt' },
	});
}

---
import { formatDate } from '../lib/date';
import type { BlogSummary } from '../lib/microcms';

interface Props {
	post: BlogSummary;
}

const { post } = Astro.props;
const publishedAt = post.publishedAt ?? post.createdAt;
---

<article class="card">
	<a href={`/blog/${post.id}/`}>
		{
			post.eyecatch ? (
				<img
					class="card-image"
					src={post.eyecatch.url}
					alt=""
					width={post.eyecatch.width}
					height={post.eyecatch.height}
					loading="lazy"
					decoding="async"
				/>
			) : (
				<div class="card-image card-noimage" aria-hidden="true" />
			)
		}
		<!-- 公開日・タイトルの部分は省略 -->
	</a>
</article>

const formatter = new Intl.DateTimeFormat('ja-JP', {
	timeZone: 'Asia/Tokyo',
	year: 'numeric',
	month: '2-digit',
	day: '2-digit',
});

/** ISO 8601 の日時を日本時間の「2026/01/31」形式にする */
export function formatDate(iso: string): string {
	return formatter.format(new Date(iso));
}

{
	posts.length > 0 ? (
		<div class="card-grid">
			{posts.map((post) => (
				<ArticleCard post={post} />
			))}
		</div>
	) : (
		<p>まだ記事がありません。</p>
	)
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 24px;
}

---
import ArticleList from '../../components/ArticleList.astro';
import Pagination from '../../components/Pagination.astro';
import { POSTS_PER_PAGE } from '../../consts';
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getBlogSummaries } from '../../lib/microcms';

const posts = await getBlogSummaries();
const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
---

<BaseLayout title="記事一覧">
	<h1 class="page-title">記事一覧</h1>
	<ArticleList posts={posts.slice(0, POSTS_PER_PAGE)} />
	<Pagination currentPage={1} totalPages={totalPages} />
</BaseLayout>

export const getStaticPaths = (async () => {
	const posts = await getBlogSummaries();
	const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);

	// 1ページ目は /blog/ が担当するので、2ページ目から生成する
	return Array.from({ length: Math.max(totalPages - 1, 0) }, (_, i) => {
		const page = i + 2;
		return {
			params: { page: String(page) },
			props: {
				posts: posts.slice((page - 1) * POSTS_PER_PAGE, page * POSTS_PER_PAGE),
				currentPage: page,
				totalPages,
			},
		};
	});
}) satisfies GetStaticPaths;

// 1ページ目は /blog/、2ページ目以降は /blog/page/2/ ...
const pageUrl = (page: number) => (page === 1 ? '/blog/' : `/blog/page/${page}/`);

export const getStaticPaths = (async () => {
	const blogs = await getAllBlogs();
	return blogs.map((blog) => ({ params: { id: blog.id }, props: { blog } }));
}) satisfies GetStaticPaths;

const { blog } = Astro.props;

const publishedAt = blog.publishedAt ?? blog.createdAt;
const revisedAt = blog.revisedAt ?? publishedAt;
// 同じ日のうちの修正では「更新日」を出さない
const showRevised = formatDate(revisedAt) !== formatDate(publishedAt);

<div class="prose" set:html={blog.content} />

---
import ArticleList from '../components/ArticleList.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
import { getBlogSummaries } from '../lib/microcms';

const LATEST_COUNT = 6;
const posts = (await getBlogSummaries()).slice(0, LATEST_COUNT);
---

<BaseLayout>
	<h1 class="page-title">新着記事</h1>
	<ArticleList posts={posts} />
	<p class="more-link"><a href="/blog/">記事一覧へ →</a></p>
</BaseLayout>