ウェブ · COURSE
Next.js + Claude Code でブログを 1 日で構築
Markdown ベース、コードハイライト、RSS、デプロイまで通しで。
audience
ウェブ部・サイドプロジェクト
duration
8時間（1日プロジェクト）
lessons
6 章
reviewed
2026.05
先に読むとよい
達成目安
全 6 レッスンを読み、コース完了マークを付ける
未完了
クイズ 3 問に挑戦し、正答率 80% 以上
未挑戦
コース構成
このコースで学ぶこと
- 01
1 日でブログを公開するゴール
完璧を目指さず、まず動くものを世に出す。Claude Code を実戦投入する練習にもなる。
Markdown 記事 → Next.js でビルド → Vercel にデプロイ。これだけなら 1 日で完了します。ブログを作ること自体より、Claude Code を 1 日通してフル活用する経験が大きい。
- Next.js 16 (App Router) + Tailwind v4
- Markdown / MDX で記事執筆
- Shiki でコードハイライト
- RSS + sitemap.xml
- Vercel デプロイ
- 02
セットアップ（1 時間）
プロジェクト初期化からデプロイ準備まで。
bash# プロジェクト初期化 pnpm create next-app my-blog --typescript --tailwind --app cd my-blog # 必要なパッケージ pnpm add gray-matter shiki rehype-shiki pnpm add -D @types/node # Claude Code 起動 claude # → 「Next.js のブログサイトを作ります。最初に CLAUDE.md を作って」 - 03
Markdown 記事のレンダリング（2 時間）
content/ 配下に .md ファイル、frontmatter で title / date / tags を管理。
text> content/ ディレクトリを作り、Markdown 記事をレンダリングする実装をお願いします。 ## 要件 - content/posts/<slug>.md に記事を置く - frontmatter: title / date / description / tags - /posts でリスト表示（日付降順） - /posts/[slug] で記事詳細 - Shiki でコードブロックをハイライト - 記事間のリンクは自動でフロントマターのタイトル参照出力イメージClaude の実装サマリ次のファイルを作成しました: lib/posts.ts — content/posts/*.md を読み frontmatter を解析 app/posts/page.tsx — 記事一覧（date 降順でソート） app/posts/[slug]/page.tsx — 記事詳細、Shiki でハイライト content/posts/hello.md — サンプル記事 1 本 `pnpm dev` で /posts が表示されることを確認してください。 …（型エラー 0 / リンク参照は frontmatter title で解決）
- 04
サイト機能（3 時間）
RSS、sitemap、検索、タグページ。
- RSS フィード（/rss.xml）
- sitemap.xml（/sitemap.xml）
- robots.txt
- タグページ（/tags/<tag>）
- About ページ
- OG 画像動的生成（@vercel/og）
- ダークモード（next-themes）
text> 以下を一気に実装してください。各機能ごとに別ファイルで: 1. RSS フィード生成（/rss.xml） 2. sitemap.xml 3. タグ別ページ（/tags/<tag>） 4. About ページ（/about、Markdown ベース） 5. OG 画像（@vercel/og、各記事用） 6. ダークモード切替（next-themes） - 05
デプロイと最初の記事（1 時間）
Vercel にデプロイ、ドメイン設定、最初の記事公開。
手を動かす
0 / 5
- 06
1 週間運用してみる
立ち上げ後の運用が本番。1 週間で何を学ぶか。
- 毎日 1 行でいいから content/ に追記
- 1 週間で何記事書けたか、率直に振り返る
- 投稿動線（書く → 公開）のボトルネックを発見
- Skill 化したい部分を切り出し（記事テンプレ・公開チェックリスト等）
理解度チェック
Q1.Next.js + Claude Code でブログを 1 日構築したあと、運用を継続するために最初にやるべきは？
Q2.Next.js プロジェクトで Claude にコードを書かせるとき、CLAUDE.md に書いておくべき前提として最も重要なのは？
Q3.ブログを公開する前に、AI 生成コードに対して人間が必ず確認すべきは？