最速でSaaSを立ち上げるための秘密兵器
俺たちテックレンジャーは、悪の組織「ゼロから開発」と日々戦っている。やつらは、新しいサービスを作るたびに、認証機能、決済機能、データベース接続…と、同じような準備作業で開発者の時間を奪っていくんだ。
しかし、この「nextjs/saas-starter」があれば、そんな無駄な時間を一気にショートカットできる！こいつは、SaaS（Software as a Service）開発に必要なコア機能が最初から全部揃っている、いわば最強のスターターキットだ。
Next.js
高速なウェブサイトを作るための基盤だ。まるでテックレンジャーが誇る光速移動スーツだな！
Postgres
堅牢で信頼性の高いデータベース。俺たちの秘密基地の金庫のように、大事なデータをしっかり守ってくれる。
Stripe
決済のプロだ。これを使えば、悪の組織に課金…じゃなくて、ユーザーからスムーズに料金を受け取れる！
shadcn/ui
スタイリッシュなコンポーネントライブラリ。俺たちのクールなスーツや武器のように、美しいUIを簡単に作れるんだ。
これらが最初から連携済みだから、あとは君だけの必殺技（オリジナル機能）を作ることに集中できるってわけだ！
さあ、テックレンジャーの仲間入りだ！まずは、この秘密兵器を君のPCにセットアップするぞ。
秘密基地（リポジトリ）をクローンせよ！
git clone https://github.com/nextjs/nextjs-saas-starter
秘密基地に潜入だ！
cd nextjs-saas-starter
魔法の呪文（環境設定）を唱えよ！
.env.exampleというファイルがあるはずだ。これを.env.localにリネームして、環境設定を書き込んでいく。StripeやPostgresのAPIキーをここに設定するぞ。
仲間たち（依存関係）を召喚だ！
npm install
秘密兵器を起動せよ！
npm run dev
これで、君のブラウザでlocalhost
3000にアクセスすれば、もう開発画面が表示されるはずだ！すごいだろ？
さあ、準備は整った。次は、このスターターキットの具体的な使い方を見ていくぞ。
これは、ユーザーが君のサービスにログインするためのコードだ。src/app/api/auth/[...nextauth]/route.tsを見てみよう。
import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
// 他にもGitHubなど色々なプロバイダーを追加できるぞ！
export const authOptions = {
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
}
const handler = NextAuth(authOptions)
export { handler as GET, handler as POST }
このコードは、NextAuth.jsというライブラリを使って、Googleアカウントでのログインを可能にしている。環境変数にIDとシークレットを設定するだけで、強力な認証機能が手に入るんだ！
ユーザーに料金を支払ってもらうためのコードも最初から用意されているぞ。src/app/dashboard/billing/page.tsxを見てみよう。
// ...（省略）
<button
className="stripe-checkout-button"
onClick={() => {
// ストライプとの連携処理
// ここで料金プランIDを使ってStripe Checkoutを呼び出す
}}
>
プランをアップグレード
</button>
// ...（省略）
このボタンをクリックすると、Stripeの決済ページにユーザーを誘導する仕組みが実装されている。複雑な決済処理を自分で書く必要はないんだ！
src/db/schema.tsというファイルでは、Postgresのデータベースの設計図が書かれている。TypeScriptの強力な型システムを活かして、安全にデータ操作ができるんだ。
import { pgTable, serial, text, timestamp } from "drizzle-orm/pg-core"
export const users = pgTable("users", {
id: serial("id").primaryKey(),
name: text("name").notNull(),
email: text("email").notNull().unique(),
createdAt: timestamp("created_at").defaultNow().notNull(),
});
こんなふうに、直感的にデータベースのテーブルを定義できる。あとは、このスキーマを使ってデータを追加したり、取得したりするだけだ！
