メニュー
Guide for removing Supabase authentication and Drizzle ORM from the template when database and auth features are not needed. Use when you want to use this template as a simple static site or with alternative authentication solutions.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
日本語の技術文書・書籍原稿の文章規範。整形（一文一行、引用ブロック、脚注、コラム記法）、段落と論証の構成（パラグラフライティング）、論証の厳密さ（ツッコミどころの除去）、読み手の負荷の管理、視点と語り、演出の抑制、LLM っぽい空句の禁止、冗長の排除を定める。日本語で技術書の章、草稿、記事、解説文を書くとき、または推敲・リライトするときに使用する。
Use when finishing a feature, fixing a bug, before committing React code, or when the user types `/doctor`, asks to scan, triage, or clean up React diagnostics. Covers lint, accessibility, bundle size, architecture. Includes a regression check and a full local-triage workflow that fetches the canonical playbook.
Explicit entry point for ticket-granularity work (implement a component, fix a non-trivial bug, refactor a module, add a feature). The user invokes /start-workflow at the start of such tasks. The skill enforces an orchestration sequence — clarify → plan → implement (parent by default, delegate by context impact) → fresh-context review → commit/PR — so the work follows the project's rules-driven standards. Skip for one-line fixes, config tweaks, docs-only changes, and trivial typo fixes — handle those directly.
SOC 職業分類に基づく
| name | remove-supabase |
| description | Guide for removing Supabase authentication and Drizzle ORM from the template when database and auth features are not needed. Use when you want to use this template as a simple static site or with alternative authentication solutions. |
This template includes Supabase authentication and Drizzle ORM, but if you don't need database or authentication features, you can remove them following these steps.
When you remove database and authentication features, the following functionality will no longer be available:
# Authentication-related files
rm -rf src/app/login
rm -rf src/app/auth
rm -rf src/app/profile
# Authentication actions
rm -rf src/actions/auth.ts
rm -rf src/actions/profile.ts
# Supabase-related libraries
rm -rf src/lib/supabase
rm -rf src/lib/auth.ts
# Entities and gateways
rm -rf src/entities/user
rm -rf src/gateways/user
# Authentication-related components
rm -rf src/components/shared/header/auth-navigation
rm -rf src/components/shared/header/user-menu
rm -rf src/components/features/profile-page
# Supabase configuration
rm -rf supabase
# Drizzle ORM related
rm -rf src/lib/drizzle
rm -f drizzle.config.ts
Remove the following packages and scripts from package.json:
Remove packages:
bun remove @supabase/supabase-js @supabase/ssr supabase drizzle-orm drizzle-kit postgres
Remove scripts (manually delete from package.json):
db:typegen (Supabase type generation)supabase:push (Push to Supabase)db:generate (Drizzle migration generation)db:push (Apply Drizzle migrations)db:studio (Launch Drizzle Studio)db:pull (Pull Drizzle schema)Update src/components/shared/header/Header.tsx as follows:
import Link from "next/link";
import { ModeToggle } from "@/components/shared/mode-toggle/ModeToggle";
export const Header = () => {
return (
<header className="sticky top-0 z-50 bg-transparent backdrop-blur-md">
<div className="flex items-center justify-between px-6 py-6">
<div>
<h1 className="font-medium text-2xl">
<Link href="/">Title</Link>
</h1>
</div>
<div className="flex items-center gap-5">
<Link href="/link1" className="text-gray-400 text-sm">
Link1
</Link>
<Link href="/link2" className="text-gray-400 text-sm">
Link2
</Link>
<ModeToggle />
</div>
</div>
</header>
);
};
Note: The theme toggle feature (ModeToggle) is not related to authentication, so it's recommended to keep it. Remove it if not needed.
Delete the following variables from .env.local (or delete the file itself):
NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY
Remove the Toaster component from src/app/layout.tsx (if authentication-related notifications are not needed):
import type { Metadata } from "next";
import "./globals.css";
import { Geist_Mono } from "next/font/google";
import { Header } from "@/components/shared/header/Header";
const geistMono = Geist_Mono({
subsets: ["latin"],
variable: "--font-geist-mono",
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ja">
<body className={`dark antialiased ${geistMono.className}`}>
<Header />
<div className="flex min-h-screen w-full justify-center px-6 md:px-0">
<div className="w-full max-w-7xl">{children}</div>
</div>
</body>
</html>
);
}
After removal, verify that everything works correctly:
# Check for TypeScript errors
bun run typecheck
# Check for lint errors
bun run check
# Start development server
bun run dev
If you need authentication but don't want to use Supabase:
After removing authentication features, the following features remain available:
A: Yes, you can selectively remove specific features. For example, you can keep login functionality while removing only the profile feature.
A: Yes, you can reverse these steps or follow the Supabase setup guide to add them again.
A: This guide removes both Supabase and Drizzle ORM. If you need a database separately, you can introduce an ORM like Prisma or keep Drizzle ORM and combine it with another database (PostgreSQL, MySQL, etc.).
A: Yes, you can remove only Supabase authentication while keeping Drizzle ORM. In that case, don't delete Drizzle-related files and packages, and connect to another PostgreSQL database (Neon, Vercel Postgres, self-hosted PostgreSQL, etc.).
bun run typecheck