🐥

毎回テンプレート探しに疲れて、Next.jsテンプレートを自作した話

に公開
Next.js
Cloudflare
Tailwind CSS
Cloudflare Workers
shadcn/ui
tech

どのプラットフォームでもデプロイ可能なユニバーサルNext.js技術スタックをシェアします。これはほとんどのSaaSニーズをカバーします：

コア機能と技術スタック：

  • データベース: Drizzle ORM
  • 認証: Better Auth
  • 決済: Stripe
  • メール: React Email + Resend
  • ストレージ: S3/R2
  • ブログ: MDXサポート（Fumadocs）
  • ドキュメント: 検索機能付きFumadocs
  • 国際化: Next-intl
  • テーマ: Next-themes
  • アナリティクス: vanilla-cookieconsent + GA + umami + plausible

UI/UX: Tailwind CSS + Shadcn/UI + Radix UI + Framer Motion
状態管理: Zustand + TanStack Query + React Hook Form
型安全性: 完全TypeScript + Zodバリデーション
リント: Biome

プラットフォームデプロイ：

  • Vercel: Next.js + Neon/supabase
  • Cloudflare: OpenNext + Workers + D1 + KV + R2
  • AWS: SST + OpenNext + Lambda + RDS + Cloudfront + Cloudwatch
  • コンテナプラットフォーム: Railway、Flyio
  • セルフホスト: Dokploy、Coolify

この技術スタック全体をテスト済みで、互換性の問題やデプロイの失敗なしに、すべてのプラットフォームでシームレスに動作します。美しいのは、プラットフォーム固有の最適化を施した一つのコードベースがどこでも動作することです。インディーハッカーにとって最適です。

nextdevkit tech stacks

過去2か月間、心から満足できるNext.jsテンプレートの作成に取り組んできました。今日、このテンプレートは私が望んでいたものにかなり近づき、Vercel、Cloudflare Workers、AWS、Railway、Fly.io、GCP、Azureなど、すべての主要クラウドプラットフォームへのデプロイをサポートしています。そろそろ皆さんにNextDevKitを紹介する時が来ました！

実際、現在優秀なNext.jsテンプレートはたくさんあります。Googleで「nextjs saas template」や「nextjs starter kit」を検索すれば、オープンソースから商用有料版まで、多くの素晴らしいテンプレートが見つかるでしょう。

なぜ新たにNext.jsテンプレートを構築したのか？

では、なぜ私は独自のNext.jsテンプレートを構築することにしたのでしょうか？いくつかの理由があります。まず、既存のテンプレートの多くには制限があります。Vercelの公式SaaSテンプレートを例に取ると、これらのテンプレートは機能が簡素すぎることが多いのです。新しいプロジェクトを始めるたびに、メール送信、決済処理、異なるニーズに対応するデータベース接続などの機能を手動で追加する必要がありました。

そのため、以前は新しいプロジェクトを始めるたびに、自分のニーズに合う異なるテンプレートを探さなければなりませんでした。しかし、これは毎回多くの時間がかかり、毎回新しい学習コストも発生していました。

UIデザインの課題

ほとんどのテンプレートには、私がずっと気にしていたいくつかの問題があります。最初の問題は、テンプレートのデモスタイリングが基本的すぎることです。バックエンド機能は完備されているものの、フロントエンドのスタイリングがシンプルすぎるため、毎回ランディングページを再設計する必要がありました。

そこで今回、テンプレートのUIデザインにおいて、ランディングページからブログ、ダッシュボードまで、すべてを磨き上げるために多くの時間を費やしました。その結果はnextdevkit demo、nextdevkit workers demo、nextdevkit aws demoで確認できます。

nextdevkit themes

複雑さと機能性のバランス

2つ目の問題は複雑さです。supastarterのようなテンプレートは機能が完備されているものの、コードの複雑さがかなり高いのです。異なるプラットフォームや機能（Resend、Plunk、Mailgunなどのメールサポート）をサポートするため、このテンプレートは多くのサードパーティライブラリを使用したmonorepoアーキテクチャを採用しています。monorepoアーキテクチャは依存関係の管理を容易にしますが、学習コストと保守コストの両方が高くなります。

そこで私のテンプレートを設計する際、コードの複雑さを可能な限り簡素化し、従来のNext.jsプロジェクト構造を使用し、サードパーティライブラリの使用を最小限に抑えるよう心がけました。

正直に言うと、開発過程で、商用有料テンプレートにとって、複雑さと機能性のバランスを取ることが最も管理困難な課題だと感じました。機能を追加するのは簡単ですが、学習コストとユーザーの保守コストを管理可能な範囲に保ちながら、コードの可読性と保守性を確保することは非常に困難です。

誰も機能が非常にシンプルで基本的なスタイリングのテンプレートを購入したくはありません。それは車輪の再発明に多くの時間を費やし、コードを書くことを意味するからです。しかし、誰も肥大化したテンプレートを購入したくもないと思います。それは高い学習コストと保守コストを意味するからです。使用するたびに不要な機能とコードを削除し、使用しないコードを理解するために多くの時間を費やす必要があるかもしれません。

そこでこのコードを設計する際、私の主な目標は機能の完備性を確保することでした：

AI、より豊富なコンポーネント、より多くのカスタマイズ機能などのその他の機能については、将来のバージョンでサポートされる予定ですが、Cursor、MCPなどの他の方法を通じてサポートすることを検討します。このアプローチはより柔軟で、コードベースに無制限の機能を追加することはありません。

デプロイの課題

3つ目の問題は、市場のすべてのNext.jsテンプレートが共通して抱える問題です：デプロイの課題。

Next.jsには多くのデプロイオプションがあります。Vercel、Cloudflare Workers、AWS、Railway、Fly.io、GCP、Azureなどです。

各プラットフォームには異なる利点と欠点があります。例えば、Next.jsの公式デプロイプラットフォームであるVercelは、デプロイが非常に便利で、最も包括的な機能サポートを提供しています。しかし、価格には特別な注意が必要で、特にImage OptimizationやISRなどの機能について。一部の個人開発プロジェクト、特に高トラフィックの非営利プロジェクトでは、価格と情熱的なプロジェクトの間でバランスを取る必要があることに気づくかもしれません。

次に、Cloudflare Workersのようなプラットフォームがあります。これは非常に手頃な価格です。月5ドルで、Workers、R2、D1、KVなどのリソースを安心して使用でき、さらに無料のCDNとDNSサービスも利用できます。これは個人開発者にとって優れた選択肢です。

しかし、Cloudflareの欠点も明らかです。これまでのところ、Next.jsに対するコミュニティと公式サポートが平凡でした。ゼロから開発したい場合、限られた解決策で多くの問題に遭遇するでしょう。NextDevKit Cloudflare workersテンプレートを設計する際、多くの問題に遭遇しました。多くのライブラリとサードパーティサービスのサポート不足により、すべてのテンプレート間で一貫した機能を維持するために、多くのコードをリファクタリングし、一部のライブラリを置き換える必要がありました。

特に公式のCloudflare Pagesプロジェクトは、Edge環境のみをサポートしているため、このNext.jsテンプレートのすべての機能をサポートすることはほぼ不可能です。幸い、Opennextプロジェクトがあります。若干の問題はありますが、最終的にすべての機能をサポートしました。

最後に、AWS、GCP、Azureなどのクラウドプラットフォームがあります。一部のプロジェクトのコンプライアンスとプライバシー要件により、これらの主要クラウドプラットフォームをデプロイに選択する必要があります。

これらのプラットフォームは非常に包括的な機能サポートを提供していますが、デプロイは非常に複雑で、設定と最適化に多くの時間を必要とします。毎回インフラストラクチャから構築を開始する必要があります。

そこで私は、デプロイの困難さを可能な限り簡素化するために、NextDevKit AWSテンプレートを特別に設計し、SSTを使用してデプロイを行います。Infrastructure as Codeから始める必要はありません。SSTのCLIツールを使用してAWSに非常に便利にデプロイできます。また、ServerlessアーキテクチャとECSコンテナデプロイメント方法の両方をサポートしており、エンタープライズレベルの開発にとって優れた選択肢です。

最後に、コンテナデプロイサポートがあります。デプロイの困難さを軽減するためのCloudflare WorkersとAWSのネイティブサポートに加えて、他のプラットフォームは現在コンテナデプロイのみをサポートしています。Railway、Fly.io、Dokployなどです。

上記のデプロイニーズは、私の日常開発の課題です。私の以前のプロジェクトの一部は高トラフィックの非営利プロジェクトで、Vercelでのデプロイは常に請求書を心配させるため、Cloudflare Workersのようなプラットフォームは私にとって完璧です。一部のプロジェクトはエンタープライズレベルで、クライアントのAWSで直接管理され、Next.js AIデモプロジェクトを構築するたびに、セキュリティと機能を考慮してインフラストラクチャから開始する必要があり、非常に面倒です。

そこで私は、異なるニーズに対応するために、3つの異なるテンプレートとデプロイ方法を特別に設計しました。Cloudflare WorkersとAWSの両方にネイティブプラットフォームサポートがあります。

テンプレートの機能

UIとテーマ設定

なぜこのテンプレートを構築し、私の設計哲学を説明した後、テンプレートの機能と遭遇した課題を紹介しましょう。

まず、ランディングページの開発です。新しいプロジェクトを立ち上げる際、ランディングページは不可欠です。それはユーザーがあなたのプロジェクトに対して抱く第一印象だからです。そこで私は、高コンバージョンランディングページスタイルの研究、これらのコンポーネントの実装、スタイルの一貫性の維持など、ランディングページの設計に多くの時間を費やしました。

下の画像は、私が研究した高コンバージョンランディングページスタイルを示しているため、今回はこれらのスタイルを参考にしました。結果はnextdevkit demoで確認できます。

good landingpage

このテンプレートを異なるプロジェクトに使用することで、各プロジェクトで同じランディングページを持つと審美的疲労を引き起こすのではないかと心配するかもしれません。この問題について考えてみました。tweakcnを通じて異なるテーマカラーとスタイルをサポートしています。このウェブサイトからテーマカラーコードをコピーしてファイルに貼り付けるだけで切り替えができます。効果は以下のウェブサイトで確認できます：

ご覧のとおり、色の変更に加えて、一部の小さなコンポーネントスタイルも変更されます。button、input、cardスタイル、padding、margin、border-radiusなどです。どのようなスタイルを好むにせよ、これらのコンポーネントは相対的な一貫性と魅力を維持します。

これには、ログイン/登録ページ、設定ページ、ダッシュボードページが含まれ、すべてのページのUIスタイルを一貫性を保ち、不快なコンポーネントスタイリングを避けるよう努めています。後でAI IDEにこれらのコンポーネントスタイルを模倣させて開発することで、ゼロからUIスタイルを開発することによる不安と欲求不満を大幅に軽減できます。UI設計原則をCursor Rulesに書き込んで、AIが自動的にスタイルの一貫性を維持することも検討します。

もちろん、ダークモードとモバイルサポートは無条件でサポートされています。ブログページについては、Notionのスタイリングに合わせて特別に設計し、基本的でも複雑でもない、シンプルでモダンなものにしました。404ページまで特別に設計しました。このテンプレートにどれだけの時間を費やしたか想像できるでしょう。効果はnextdevkit demo 404で確認できます。

これらのUI/UXコンポーネントに費やした時間は価値があったと思います。開発を加速し、UIに対する不安を軽減することに加えて、私自身も他のプロジェクト開発でこのテンプレートを使用します。

技術スタック

テンプレートにとって、最大の価値は開発を加速することであるため、技術選択において最も人気があり、ユーザーフレンドリーな技術スタックを選択しました。

結局のところ、2025年の開発において、開発者フレンドリーな技術スタックは二の次です。AI親和性のある技術スタックこそが王様です。技術スタックのエコシステムがAIによって学習できる限り、開発者は半分の努力で倍の結果を達成できます。選択した技術スタックの詳細な紹介は以下のとおりです：

  • フレームワークは最新バージョンのNext.jsを使用し、React 19の機能をサポートしています。フルスタック開発において、現在AIがNext.jsをより速く、より正確に書けるフレームワークは他にありません。
  • Tailwind CSS バージョン4を使用しています。Tailwind CSSはAI親和性のあるコードスタイルです。AI IDEが登場した後、他のCSSフレームワークは徐々に姿を消しました。
  • Shadcn UIコンポーネントを使用しています。Shadcn UIは現在広範囲なエコシステムと非常に豊富なコンポーネントを持っています。選択理由は依然としてAI Firstです。後でコミュニティで美しいコンポーネントを見つける場所も共有し、迅速なShadcnコンポーネント開発を支援します。
  • データベースORMはDrizzle ORMを使用しています。現在、選択肢はDrizzle ORMとPrisma ORMのみです。個人的には、Prismaの開発体験とコード設計はかなり良いと思いますが、Drizzleはより良いパフォーマンスと完全なエコシステムを持っています。テンプレートはServerlessプラットフォームにデプロイする必要があるため、Edge環境指向のORMを選択する必要があり、Drizzleが最良の選択です。
  • 認証はBetter Authを選択しました。NextAuth（Auth.js）を選択しなかったのは、過去数年間のドキュメントの貧弱さと絶え間ない変更のためです。Better Authを使用した後、開発体験とコード設計が非常に良く、非常に完全なエコシステムを持っていることがわかりました。認証のようなセキュリティフレームワークについては、決して車輪の再発明をしないでください。完全なエコシステム、包括的なドキュメント、コミュニティサポートを持つフレームワークを選択することが最良の選択です。
  • ブログとドキュメントについては、FumaDocs + FumaDocs MDXを選択して開発しました。FumaDocsは今年発見した優れたドキュメントフレームワークです。以前はContent Collectionを使用して開発していましたが、後でFumaDocsが良いコード設計とコミュニティ活動を持っていることがわかりました。特にFumaDocsの作者はGithubで非常に活発で、ドキュメントの開発と保守に非常に専念しています。ドキュメントやブログを維持する必要がある場合は、FumaDocsを試してみてください（良いプロジェクトを共有せずにはいられません）。
  • メールサービスはResend、決済サービスはStripeを使用しています。両方のサービスは現在最も人気があり、非常に完全なエコシステムを持ち、開発者に非常にフレンドリーです。後で他のサードパーティもサポートし、特に決済については、グローバルに開発者をサポートする決済サービスを優先します。
  • ストレージオブジェクトストレージはAWS S3とCloudflare R2を優先しています。実際、これら2つは同じプロトコルを使用しているため、理論的にはS3プロトコルを使用するサービスはすべてサポートされています。
  • i18n国際化はnext-intlを使用しています。実際、i18n機能を追加することで、プロジェクトのコード複雑性が1レベル増加しました。複数言語をサポートするには、一部の変数抽出とルーティングを別々に処理する必要があるためです。しかし、i18nは多くの人にとって必要であるため、最終的に追加しました。

上記の技術スタックに加えて、CookieとAnalytics最適化などの特別な最適化があります。Analyticsは現在Google Analytics、Umami、Plausibleなどをサポートしており、後でより多くのサポートが追加されます。テンプレートでGDPRやその他のプライバシー収集規制に特別に最適化しました。ユーザーがデータ収集に同意しない場合、データは収集されません。

実際、市場のほとんどのテンプレートはGDPRやその他のプライバシー収集要件に注意を払っていません。これらの詳細をしっかりと行うことで、プロジェクトをより規制に準拠させ、ユーザーの信頼を得やすくすることができます。

さらに、SEOについて特別な最適化を行いました。サイトマップ生成、robots.txt生成、og:image生成、異なるページメタデータ生成、ブログキーワード最適化などです。最終的にGoogle SpeedTestで100点を達成しました。

テンプレート機能についてまだ質問がある場合は、NextDevKit公式ドキュメントにアクセスして、詳細なドキュメントと機能紹介を確認できます。

現在、ドキュメントは英語のみサポートしていますが、安定後に複数言語をサポートします。

nextdevkit docs

Cloudflare Workersテンプレート

上記のテンプレート機能に加えて、この開発の焦点は、ほとんどの人のデプロイ課題を解決することです。個人的には、4つのプラットフォームを一般的に使用しています。

最初はもちろんVercelです。多くのデモや小さな個人プロジェクトをそこにデプロイしています。結局のところ、VercelのNext.jsサポートは優れています。価格とチームリソース管理を考慮しなければ、Vercelは最良の選択です。Vercelにデプロイした小さな商用プロジェクトもあります。大きなプロジェクトをそこに置かないのは、Vercelの価格設定がかなり頻繁に変わり、予期しない課金ポイントがあるためです。典型的な例はImage Optimizationです。プロジェクトのトラフィックが多く、画像レンダリングが多い場合、Image Optimizationをオフにしないと、月額数千ドルの請求書になる可能性があります。

Cloudflareは、無料のCDNと反DDOS攻撃機能により、常に個人開発者に人気があります。そこでCloudflare PagesがNext.jsに対する公式@cloudflare/next-on-pagesフレームワークサポートを開始した後、Cloudflareを使用してすべての一般的な機能をサポートするNext.jsプロジェクトをデプロイする方法を探求してきました。

しかし、昨年Cloudflare Pagesを使用して本番Next.jsプロジェクトをデプロイしようと試みた後、実際にこのフレームワークを諦めました。フレームワークドキュメントが利用できず、ソースコードを読む必要があり、公式コミュニティの対応とサポートが不十分で、ほぼすべてのステップが問題だったことは言うまでもありません。最も重要なことは、公式@cloudflare/next-on-pagesフレームワークが純粋なEdge runtimeに基づいており、Node.jsを必要とするライブラリを十分にサポートしていないことです。多くのライブラリが使用できず、多くのNext.jsベストプラクティスをそれに応じて変更する必要があり、将来の一部の新しいNext.js機能をサポートすることは不可能に思えました。

幸い、今年初めにOpennextプロジェクトを発見しました。このプロジェクトはCloudflare Workersに基づいており、Cloudflare Workers runtimeを通じてNode.js APIをサポートし、ほぼすべてのNext.js機能をサポートしています。このフレームワークは後に公式にサポートされるため、このフレームワークを使用してCloudflare Workersテンプレートを開発することにしました。

NextDevKit Cloudflare Workersテンプレートを購入すると、Next.jsとNextDevKit Cloudflare Workers Next.jsテンプレートの両方のコードリポジトリ、将来のアップデートとコミュニティサポートにアクセスできます。

別のコードリポジトリに分離する理由は、Opennextの統合に加えて、Cloudflare WorkersテンプレートがCloudflare D1、KV、Durable Objectsなどのリソースも統合しているためです。データベースはデフォルトでD1、キャッシュはデフォルトでKV、KVはISRをサポートするために使用されるなどです。ビルド期間中、キャッシュは自動的に生成されKVに配置されます。これらのリソースはすべてWorker Standard Planリソースでサポートされており、Cloudflareのリソース価格は非常に安いです。私の目標は、ユーザーがこれらのリソースを完璧に活用できるようにすることです。

下のCloudflare Dashboardの画像を通じて、すべてのWorkerバインディングを確認できます。

nextdevkit cloudflare bindings

現在、3つのコードリポジトリを同期させる必要があるため、ユーザーデータなどのシステム内部データキャッシュとしてKVを広範囲に使用していません。後で時間があるときに、より深い最適化を行うかもしれません。

もちろん、他のデータベースとキャッシュライブラリを統合するようにコードを変更することもできます。後でOpennextとCloudflare Workersを使用した開発体験をコミュニティで共有します。

注意すべき重要な点は、Cloudflare Workerの無料版はコードパッケージングを3MBに制限しているため、Workersバージョンテンプレートを使用したい場合は、制限を10MBに増やすためにCloudflare Workersの月5ドルのStandardバージョンを購入する必要があることです。現在、すべての機能を統合した後、テンプレートのパッケージサイズは約3MB〜3.5MBです。Standardバージョンについては、非常に大きなプロジェクトでない限り、十分すぎるほどです。StandardバージョンはD1、KVクォータもサポートしているため、安心して使用できます。

AWSテンプレート

エンタープライズレベルのプロジェクト開発において、NextDevKit AWSテンプレートはSSTを通じてAWSインフラストラクチャリソースの管理をサポートし、ServerlessとECSコンテナデプロイメント方法の両方をサポートしています。

起業の旅を始めるために会社を申請する場合、Stripe Atlas会社を申請するなど、直接5,000ドルのクラウドサービスクレジットを申請できます。AWS スタートアップサポートを直接申請する場合、最大100,000ドルのクラウドサービスクレジットを申請でき、1年間のクラウドサービスコストをカバーできます。そして、AWSのクラウドサービスは最も包括的です。何が必要でも、AWSが満たしてくれます。

一部のプロジェクトは、プライバシーと地域コンプライアンス要件により、AWSなどの大手企業のクラウドでホスティングする必要があります。そこでこのテンプレートはAWSをネイティブサポートし、RDS、S3、Lambda、CloudFront、CloudWatch等のAWSリソースを完全に活用しています。データベースはRDSとProxyを使用し、外部データベースアクセスにはEC2 SSH接続とIPホワイトリストが必要で、より良いセキュリティとプライバシー保護を提供します。

さらに、SSTプロジェクトを通じて、ゼロからInfrastructure as Codeを構築する必要がありません。SSTはPulumiフレームワークに基づいており、リソース作成からデプロイ、更新、削除まで、1つのコマンドですべてを処理し、完全に自動化されています。SSTのコミュニティは非常に活発で、多くのリソースとチュートリアルが利用可能です。

実際、技術を選択する際、AWSの公式AmplifyフレームワークでNext.jsプロジェクトをデプロイすることを検討しました。しかし、Amplifyのドキュメントとコミュニティを研究し、個人的に本番プロジェクトをデプロイするために多くの時間を費やした後、Amplifyは本番環境でほぼ使用不可能であることがわかりました。時間があるときに、AWSの知識を別途共有します。

AI機能について

現在、NextDevKitのAI機能は、コード内のフロントエンドAIコンポーネントの形で提供されており、一時的にVercel AI SDKとLLM APIを統合していません。これは、誰もが異なるAI機能を必要とするためです。すべてを統合すると、やや肥大化します。これらの機能を統合する良い方法をまだ見つけていないため、一時的にコード内のフロントエンドコンポーネントの形で提供されています。

後でPrompt、RAG、またはMCP方法を通じてAI機能を統合できるかどうかを研究するために時間を費やします。もちろん、後で追加料金はありません。非コード方法でサポートされるかもしれません。そのため、購入後に得られるのはコードだけでなく、将来のサービスサポートでもあり、開発アイデアと方法がDiscordコミュニティで共有されます。

最後に

同様の痛点を持っている場合、またはNext.jsを通じてSaaSサービスを開発したい場合、またはフルスタックプロジェクトを構築したい場合、このテンプレートは確実に1〜2か月の時間を節約できます。私は個人的にコードの最適化と設定に多くの時間を費やしたため、簡単な設定でプロジェクトの初期化を完了できます。AIとCursorの後続サポートにより、アイデアからプロジェクト着陸までの旅を確実に大幅に加速します。

このテンプレートは現在、開発完了したばかりの段階にあるため、コードとドキュメントにはまだいくつかの不完全な点があります。早期シードユーザーをサポートするために、アーリーバード割引を提供しています。Stripe購入ページでHAPPYCODINGを使用すると20%の割引を受けることができ、生涯無料アップデートとコミュニティサポート、将来のサービスを得ることができます。

Discussion