tomevault-io Remove Supabase & Database Setup Guide
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.
Features Removed
When you remove database and authentication features, the following functionality will no longer be available:
- User authentication (login/logout)
- Profile management
- Avatar image uploads
- User-specific data management
- Database operations (Drizzle ORM)
Removal Steps
1. Delete Unnecessary Files
# 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
2. Remove Dependencies
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)
3. Simplify Header Component
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.
4. Remove Environment Variables
Delete the following variables from .env.local (or delete the file itself):
NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY
5. Adjust Layout Component
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>
);
}
6. Verify Changes
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
Alternatives
Other Authentication Options
If you need authentication but don't want to use Supabase:
- NextAuth.js - Authentication library supporting various providers
- Auth0 - Enterprise authentication service
- Firebase Auth - Google's authentication service
- Clerk - Authentication platform for developers
Using as a Simple Static Site
After removing authentication features, the following features remain available:
- Next.js 16 App Router
- TypeScript
- Tailwind CSS
- shadcn/ui components
- Biome (linting & formatting)
- Vitest (testing)
- Storybook
Frequently Asked Questions
Q: Can I keep only some authentication features?
A: Yes, you can selectively remove specific features. For example, you can keep login functionality while removing only the profile feature.
Q: Can I add authentication features later?
A: Yes, you can reverse these steps or follow the Supabase setup guide to add them again.
Q: Do I need a database?
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.).
Q: Can I keep only Drizzle ORM?
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.).
Important Notes
- Always back up your project before deletion
- After deletion, TypeScript errors may occur, so verify with
bun run typecheck - Don't forget to remove unnecessary import statements
- Run the verification steps (Step 6) after completing all removal steps
Converted and distributed by TomeVault — claim your Tome and manage your conversions.