Idea
Next.js
年間 2,000 円ほどで運営している Next.js 製の個人ブログを紹介
2025年10月26日
2025年10月26日
こんにちは、けいこんぐらです！
今回は、Next.js を使用して、本ブログを構築、運営している話をしようと思います！
実際に運営にかかっている費用や、どのような技術を使っているかなど、紹介できればと思います 👀
使用技術
まずは本ブログを構築するにあたり、使用している技術を紹介します！
ざっくりこんな感じです ✨
| カテゴリ | 技術 |
|---|---|
| フレームワーク | Next.js |
| CSS | TailwindCSS |
| UI | shadcn/ui, MDX |
| テスト | Vitest, Playwright |
| ORM | Prisma |
| DB | Turso |
| コンテンツ配信 | Amazon S3 |
| ソース管理 | GitHub |
| デプロイ | Netlify |
| ドメイン | Cloudflare Registrar |
個人的ポイント
Next.js
自分が普段からよく使っているという理由で採用している部分が大半ですが、やはり Next.js はドキュメントが充実しており、情報も多いので、難しいですが、詰まったときでもなんだかんだ解決できることが多い気がします！
記事のページなどには SSG を使用しており、高速に表示できるようにしています 🚅
記事を更新するごとにデプロイする必要があるのが少し手間 💦
Next.js by Vercel is the full-stack React framework for the web.
https://nextjs.org
デザイン
スタイルや UI には TailwindCSS と shadcn/ui を使用しています！
とにかくこの組み合わせは変更や拡張が楽で、いまや TailwindCSS なしでは開発効率が落ちてしまうと感じています 🙅♂️
私はデザインの知識などはあまりないのですが、shadcn/ui を使用することで、ある程度まともなデザインになるので助かっています！
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leav
https://tailwindcss.com
A set of beautifully designed components that you can customize, extend, and build on. Start here th
https://ui.shadcn.com
基本的に記事の保存、表示には MDX を使用しています 🌟
「コールアウト」や「リンクカード」など JSX でカスタマイズしたコンポーネントを簡単に挿入できるので、非常に便利です！
個人的に一番良いと思っている部分は、毎回記事の最初に自己紹介を入れているのですが、これを MDX コンポーネントとして切り出しておき、記事の中で簡単に挿入できる点です！
こうすることで、本文に<SelfIntroduction />と入れておくだけで、自己紹介を変更したいとき、コンポーネントを修正するだけで良いので、非常に楽です 👍
import { appConfig } from "@/app.config";
export default function SelfIntroduction() {
return <p>こんにちは、けいこんぐらです！</p>;
}テスト
ユニットテストには Vitest、画面の動作などをテストしたいときには Playwright を使用しています！
時短のため、処理が複雑で、バグが起こりそうな部分しかテストしていません。
Playwright は初めて使ってみたのですが、なんかうまく動かないところがあったりして、きっちりとしたテストはできていないのが現状です、、🥲
DB
Turso という SQLite ベースのサービスを使用しています！
最初は CMS として、microCMS を使用していたのですが、なんだか使い勝手が良くないと感じてしまい、別にデータ保持するだけなら、SQLite で良いのでは？と思い、Turso を採用しました！
サクッと始められるし、無料枠がかなり充実しているので、結果、かなり満足しています！
無料枠でも余裕で 10,000 記事以上は保存できそうですし、レスポンスも速いので、個人で使用する分には十分すぎると思います！
Turso is the small database for your biggest ideas. The most efficient way to build for apps, AI, ag
https://turso.tech
Note
ORM として Prisma を使用していますが、マイグレーションだけは Turso と相性が良くないので、手動で行う必要があり、少し面倒です...
コンテンツ配信
主に画像の配信に Amazon S3 を使用しています！
ほぼ、無料で使用できており、安定しているので、非常に良いです！
AWS サービスを個人で使うには高いとは思いますが、部分的に使用する分には、あまり気にならないかなと思います 👀
デプロイ
ここが一番迷いました 🤔
ホントは Next.js と相性が良い Vercel を使用したかったのですが、ゆくゆくは Google AdSense やアフィリエイトを導入したいと考えており、Vercel では無料枠での商用利用が禁止されているため、仕方なく Netlify を使用しています
なるべくお金はかけたくないですからね、、💰
最初の方は、Cloudflare Workers も使用していたのですが、サーバーサイドでの MDX のシリアライズがうまく動かなかったりして、最終的に Netlify に落ち着きました、、
ただ、Netlify も無料枠で十分に運用できており、特に不満もないので、満足しています！
Build with AI or code, deploy instantly. One platform with everything you need to make real apps liv
https://www.netlify.com
ドメイン
Cloudflare Registrar を使用しています！
お名前.com などは最初は安いけど、更新するときにガッとお金がかかるイメージで、Cloudflare Registrar の評判が良さそうだったので、こちらを採用しました 🙆♂️
Note
Cloudflare Registrar はドメイン登録料と更新料が卸売価格で提供されており、追加料金や更新料の値上げはないみたいです
実際、本ブログも今のところお金がかかっているのはドメイン代だけで、年間約 1,700 円ほどしかかかっていません！
ただ、Netlify のカスタムドメインとして登録するところでかなり手間取ってしまいました、、（安く抑えられているので良し！）
Cloudflareは、Cloudflare Registrarを通じた簡単かつ原価で購入できるドメイン登録・更新サービスを提供しています。ドメインの購入、移管、管理には一切の追加料金がかかりません。
https://www.cloudflare.com
最後に
今回は、Next.js を使用したブログ構築における、本ブログの技術スタックや、かかっている費用について紹介しました！
もし需要がありそうだったら、具体的な実装方法なんかも解説できればと思います 😎
前の記事
CSRF（クロスサイト・リクエストフォージェリ）についての仕組みや原因、具体的な対策（トークン、Referer/Origin チェックなど）をわかりやすく解説します。
