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

bash

# 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:

bash

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:

tsx

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):

code

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):

tsx

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:

bash

# 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