Next.js 15 + Cloudflare Workers で個人ツールサイトを作った話

はじめに

個人開発のツールサイト「JP Tools」を作って公開しました。

「ブラウザで完結する無料ツール集」をコンセプトに、200以上のツールを実装しています。

この記事では採用した技術スタックと、Cloudflare Workers へのデプロイで詰まったところを書きます。

技術スタック

項目	採用技術
フレームワーク	Next.js 15 (App Router)
言語	TypeScript
スタイル	Tailwind CSS v3
デプロイ	Cloudflare Workers
アダプター	@opennextjs/cloudflare
パッケージ管理	pnpm

なぜ Cloudflare Workers を選んだか

Vercel でも良かったんですが、無料プランの帯域上限（100GB/月）が個人サイトだと将来的に心配で。Cloudflareは帯域無制限なのが決め手でした。

Next.js → Cloudflare Workers の最短手順

pnpm add -D @opennextjs/cloudflare wrangler

open-next.config.ts を作成：

import type { OpenNextConfig } from "@opennextjs/cloudflare";
const config: OpenNextConfig = {};
export default config;

wrangler.jsonc で Workers の設定：

{
  "name": "jptools",
  "main": ".open-next/worker.ts",
  "compatibility_date": "2024-09-23",
  "assets": { "directory": ".open-next/assets" }
}

デプロイ：

pnpm build && wrangler pages deploy

SEO対策

ツールサイトは検索流入が命なので、SEO には力を入れました。

• 各ページに JSON-LD（WebApplication + BreadcrumbList + FAQPage + HowTo）
• OpenGraph + Twitter Card
• sitemap.xml の自動生成
• 全ページに canonical URL

まとめ

ツールサイトは一度作れば低メンテナンスで運用できるので個人開発におすすめです。