メニュー
Initialize a production-ready Next.js web application with TypeScript, an application auth layer, Stripe payments, and database setup. Use when creating SaaS applications, e-commerce sites, or full-stack web applications.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Bootstrap a complete SaaS application using Turborepo with Next.js backend, Expo mobile app, an app-level auth layer, Stripe payments, Turso database, Sentry monitoring, PostHog analytics, tRPC, and TanStack Query.
Integrate Stripe payments into Next.js and Expo applications with subscriptions, one-time payments, webhooks, and customer management. Use for SaaS billing and e-commerce.
Use when provisioning, reviewing, or hardening infrastructure that runs on Hetzner Cloud. Inventories hcloud, Terraform, cloud-init, and service bootstrap signals in the repo, then writes an operations plan for server lifecycle, networking, bootstrap, and drift instead of treating Hetzner as an opaque VPS host.
Use when planning or reviewing domain and DNS operations for domains registered at Namecheap. Inventories domain, nameserver, and host-record signals in a repo, checks whether the workflow belongs in Namecheap or a third-party DNS provider, and produces a concrete DNS operations plan instead of ad hoc panel clicking.
Use when a web app or product surface needs PostHog instrumentation reviewed or added with discipline. Inventories SDK setup, provider wiring, event capture calls, identify/group usage, and feature-flag boundaries, then produces a concrete instrumentation plan instead of ad hoc analytics sprawl.
Use when a web app or service has Sentry installed and the task is to verify release readiness, source map correctness, environment wiring, or basic issue-triage hygiene before or after shipping. Inventories SDK setup, config files, release markers, and error-boundary coverage, then writes a focused triage plan.
| name | nextjs-project-init |
| description | Initialize a production-ready Next.js web application with TypeScript, an application auth layer, Stripe payments, and database setup. Use when creating SaaS applications, e-commerce sites, or full-stack web applications. |
| allowed-tools | fs_read fs_write execute_bash |
| metadata | {"author":"kiro-cli","version":"1.0","category":"fullstack","compatibility":"Requires Node.js, npm/pnpm, and database (PostgreSQL recommended)"} |
npx create-next-app@latest my-app --typescript --tailwind --app --eslint
cd my-app
npm install stripe prisma @prisma/client
npm install -D prisma
.env.local:AUTH_SECRET=replace-me
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
DATABASE_URL="postgresql://user:password@localhost:5432/mydb"
NEXT_PUBLIC_APP_URL=http://localhost:3000
src/middleware.ts:import { auth } from "@/lib/auth";
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
const publicPaths = new Set(["/", "/pricing"]);
export async function middleware(req: NextRequest) {
const session = await auth.api.getSession({ headers: req.headers });
if (!session && !publicPaths.has(req.nextUrl.pathname) && !req.nextUrl.pathname.startsWith("/api/webhooks/stripe")) {
return NextResponse.redirect(new URL("/sign-in", req.url));
}
return NextResponse.next();
}
export const config = {
matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};
Create src/lib/auth.ts using your preferred auth stack such as better-auth.
Update src/app/layout.tsx:
import type { ReactNode } from "react";
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
npx prisma init
Create schema in prisma/schema.prisma:
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model User {
id String @id @default(cuid())
authUserId String @unique
email String @unique
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
subscriptions Subscription[]
}
model Subscription {
id String @id @default(cuid())
userId String
stripeCustomerId String @unique
stripeSubscriptionId String @unique
stripePriceId String
stripeCurrentPeriodEnd DateTime
status String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
}
Run migrations:
npx prisma migrate dev --name init
npx prisma generate
src/lib/db.ts:import { PrismaClient } from '@prisma/client';
const globalForPrisma = globalThis as unknown as {
prisma: PrismaClient | undefined;
};
export const db = globalForPrisma.prisma ?? new PrismaClient();
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = db;
src/app/sign-in/[[...sign-in]]/page.tsx:import Link from "next/link";
export default function Page() {
return (
<div className="mx-auto flex min-h-screen max-w-md flex-col items-center justify-center gap-4 p-8 text-center">
<h1 className="text-2xl font-semibold">Sign in</h1>
<p>Wire this page to your auth layer or redirect into your auth provider.</p>
<Link className="rounded bg-black px-4 py-2 text-white" href="/api/auth/sign-in">
Continue
</Link>
</div>
);
}
src/app/dashboard/page.tsx:import { redirect } from "next/navigation";
import { auth } from "@/lib/auth";
export default async function DashboardPage() {
const session = await auth.api.getSession({
headers: new Headers(),
});
if (!session) redirect("/sign-in");
return (
<div className="container mx-auto p-8">
<h1 className="text-3xl font-bold">Dashboard</h1>
<p className="mt-4">Welcome back.</p>
</div>
);
}
npm run dev
npx create-next-app@latest my-saas --typescript --tailwind --app
cd my-saas
npm install stripe prisma @prisma/client
npx prisma init
# Configure .env.local with auth, Stripe, and database settings
npm run dev
pnpm create next-app my-app --typescript --tailwind --app
cd my-app
pnpm add stripe @prisma/client
pnpm add -D prisma
pnpm dev
npx prisma generate