Build a Full-Stack App with Next.js and Supabase in 20 Minutes#

You don't need a backend team. You don't need to configure servers. You don't even need to write API routes.

With Next.js and Supabase, you can go from zero to a deployed full-stack app — with authentication, a database, and CRUD operations — in 20 minutes.

This is not theory. We are building a real app, step by step. By the end, you will have a working task manager with user accounts, protected routes, and a live deployment.

Let's go.

What We Are Building#

A full-stack task manager with:

• User authentication (sign up, log in, log out)
• PostgreSQL database with Row Level Security
• CRUD operations (create, read, update, delete tasks)
• Protected routes (only logged-in users see the dashboard)
• Deployment to Vercel (free)

Tech stack:
├── Next.js 15 (App Router)
├── Supabase (Database + Auth)
├── TypeScript
├── Tailwind CSS
└── Vercel (hosting)

Minute 0-3: Project Setup#

Create the Next.js App#

npx create-next-app@latest task-manager --typescript --tailwind --app --src-dir
cd task-manager

Install Supabase#

npm install @supabase/supabase-js @supabase/ssr

Create a Supabase Project#

1. Go to supabase.com → New Project
2. Pick a name, set a database password, choose a region
3. Copy your Project URL and anon key from Settings → API

Add Environment Variables#

# .env.local
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here

Minute 3-5: Supabase Client Setup#

Create two Supabase clients — one for the server, one for the browser.

Server Client#

// src/lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export async function createClient() {
  const cookieStore = await cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            )
          } catch {
            // Server Component — can't set cookies
          }
        },
      },
    }
  )
}

Browser Client#

// src/lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

Middleware (Session Refresh)#

// src/middleware.ts
import { createServerClient } from '@supabase/ssr'
import { NextResponse, type NextRequest } from 'next/server'

export async function middleware(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request })

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            request.cookies.set(name, value)
          )
          supabaseResponse = NextResponse.next({ request })
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          )
        },
      },
    }
  )

  const { data: { user } } = await supabase.auth.getUser()

  // Redirect unauthenticated users to login
  if (!user && request.nextUrl.pathname.startsWith('/dashboard')) {
    const url = request.nextUrl.clone()
    url.pathname = '/login'
    return NextResponse.redirect(url)
  }

  return supabaseResponse
}

export const config = {
  matcher: ['/dashboard/:path*'],
}

Minute 5-8: Database Setup#

Go to your Supabase dashboard → SQL Editor and run:

-- Create tasks table
CREATE TABLE tasks (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
  title TEXT NOT NULL,
  description TEXT,
  completed BOOLEAN DEFAULT false,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable Row Level Security
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

-- Users can only see their own tasks
CREATE POLICY "Users can view own tasks"
  ON tasks FOR SELECT
  USING (auth.uid() = user_id);

-- Users can create their own tasks
CREATE POLICY "Users can create tasks"
  ON tasks FOR INSERT
  WITH CHECK (auth.uid() = user_id);

-- Users can update their own tasks
CREATE POLICY "Users can update own tasks"
  ON tasks FOR UPDATE
  USING (auth.uid() = user_id);

-- Users can delete their own tasks
CREATE POLICY "Users can delete own tasks"
  ON tasks FOR DELETE
  USING (auth.uid() = user_id);

Minute 8-12: Authentication Pages#

Sign Up Page#

// src/app/signup/page.tsx
'use client'

import { createClient } from '@/lib/supabase/client'
import { useRouter } from 'next/navigation'
import { useState } from 'react'
import Link from 'next/link'

export default function SignUpPage() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
  const router = useRouter()
  const supabase = createClient()

  async function handleSignUp(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)
    setError('')

    const { error } = await supabase.auth.signUp({
      email,
      password,
    })

    if (error) {
      setError(error.message)
      setLoading(false)
      return
    }

    router.push('/dashboard')
  }

  return (
    <div className="min-h-screen flex items-center justify-center">
      <form onSubmit={handleSignUp} className="w-full max-w-md space-y-4 p-8">
        <h1 className="text-2xl font-bold">Create Account</h1>

        {error && (
          <p className="text-red-500 text-sm">{error}</p>
        )}

        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="w-full p-3 border rounded-lg"
          required
        />

        <input
          type="password"
          placeholder="Password (min 6 characters)"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          className="w-full p-3 border rounded-lg"
          minLength={6}
          required
        />

        <button
          type="submit"
          disabled={loading}
          className="w-full p-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
        >
          {loading ? 'Creating account...' : 'Sign Up'}
        </button>

        <p className="text-center text-sm">
          Already have an account?{' '}
          <Link href="/login" className="text-blue-600 hover:underline">
            Log in
          </Link>
        </p>
      </form>
    </div>
  )
}

Login Page#

// src/app/login/page.tsx
'use client'

import { createClient } from '@/lib/supabase/client'
import { useRouter } from 'next/navigation'
import { useState } from 'react'
import Link from 'next/link'

export default function LoginPage() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
  const router = useRouter()
  const supabase = createClient()

  async function handleLogin(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)
    setError('')

    const { error } = await supabase.auth.signInWithPassword({
      email,
      password,
    })

    if (error) {
      setError(error.message)
      setLoading(false)
      return
    }

    router.push('/dashboard')
  }

  return (
    <div className="min-h-screen flex items-center justify-center">
      <form onSubmit={handleLogin} className="w-full max-w-md space-y-4 p-8">
        <h1 className="text-2xl font-bold">Log In</h1>

        {error && (
          <p className="text-red-500 text-sm">{error}</p>
        )}

        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="w-full p-3 border rounded-lg"
          required
        />

        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          className="w-full p-3 border rounded-lg"
          required
        />

        <button
          type="submit"
          disabled={loading}
          className="w-full p-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
        >
          {loading ? 'Logging in...' : 'Log In'}
        </button>

        <p className="text-center text-sm">
          Don&apos;t have an account?{' '}
          <Link href="/signup" className="text-blue-600 hover:underline">
            Sign up
          </Link>
        </p>
      </form>
    </div>
  )
}

Minute 12-18: The Dashboard (CRUD)#

Server Actions#

// src/app/dashboard/actions.ts
'use server'

import { createClient } from '@/lib/supabase/server'
import { revalidatePath } from 'next/cache'

export async function addTask(formData: FormData) {
  const supabase = await createClient()
  const { data: { user } } = await supabase.auth.getUser()

  if (!user) throw new Error('Not authenticated')

  const title = formData.get('title') as string
  const description = formData.get('description') as string

  await supabase.from('tasks').insert({
    title,
    description,
    user_id: user.id,
  })

  revalidatePath('/dashboard')
}

export async function toggleTask(taskId: string, completed: boolean) {
  const supabase = await createClient()

  await supabase
    .from('tasks')
    .update({ completed: !completed })
    .eq('id', taskId)

  revalidatePath('/dashboard')
}

export async function deleteTask(taskId: string) {
  const supabase = await createClient()

  await supabase
    .from('tasks')
    .delete()
    .eq('id', taskId)

  revalidatePath('/dashboard')
}

export async function signOut() {
  const supabase = await createClient()
  await supabase.auth.signOut()
}

Dashboard Page#

// src/app/dashboard/page.tsx
import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'
import { addTask, toggleTask, deleteTask, signOut } from './actions'

export default async function Dashboard() {
  const supabase = await createClient()
  const { data: { user } } = await supabase.auth.getUser()

  if (!user) redirect('/login')

  const { data: tasks } = await supabase
    .from('tasks')
    .select('*')
    .order('created_at', { ascending: false })

  return (
    <div className="max-w-2xl mx-auto p-8">
      <div className="flex justify-between items-center mb-8">
        <h1 className="text-2xl font-bold">My Tasks</h1>
        <form action={signOut}>
          <button
            type="submit"
            className="text-sm text-gray-500 hover:text-gray-700"
          >
            Sign Out
          </button>
        </form>
      </div>

      {/* Add Task Form */}
      <form action={addTask} className="mb-8 space-y-3">
        <input
          name="title"
          placeholder="Task title"
          className="w-full p-3 border rounded-lg"
          required
        />
        <input
          name="description"
          placeholder="Description (optional)"
          className="w-full p-3 border rounded-lg"
        />
        <button
          type="submit"
          className="w-full p-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
        >
          Add Task
        </button>
      </form>

      {/* Task List */}
      <div className="space-y-3">
        {tasks?.length === 0 && (
          <p className="text-gray-500 text-center py-8">
            No tasks yet. Add one above!
          </p>
        )}

        {tasks?.map((task) => (
          <div
            key={task.id}
            className="flex items-center justify-between p-4 border rounded-lg"
          >
            <div className="flex items-center gap-3">
              <form action={toggleTask.bind(null, task.id, task.completed)}>
                <button type="submit" className="text-xl">
                  {task.completed ? '✅' : '⬜'}
                </button>
              </form>
              <div>
                <p className={task.completed ? 'line-through text-gray-400' : ''}>
                  {task.title}
                </p>
                {task.description && (
                  <p className="text-sm text-gray-500">{task.description}</p>
                )}
              </div>
            </div>

            <form action={deleteTask.bind(null, task.id)}>
              <button
                type="submit"
                className="text-red-500 hover:text-red-700 text-sm"
              >
                Delete
              </button>
            </form>
          </div>
        ))}
      </div>
    </div>
  )
}

Minute 18-20: Deploy to Vercel#

Push to GitHub#

git add .
git commit -m "Task manager with Next.js + Supabase"
git remote add origin https://github.com/your-username/task-manager.git
git push -u origin main

Deploy on Vercel#

1. Go to vercel.com → Import Project
2. Select your GitHub repository
3. Add environment variables:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Click Deploy

Your app is live. That's it.

Configure Supabase Auth Redirect#

In your Supabase dashboard → Authentication → URL Configuration:

• Set Site URL to https://your-app.vercel.app
• Add https://your-app.vercel.app/auth/callback to Redirect URLs

What You Just Built#

In 20 minutes, you built a production-ready full-stack app with:

• Authentication — sign up, log in, log out with secure session management
• Database — PostgreSQL with Row Level Security protecting every query
• CRUD — create, read, update, delete tasks with Server Actions
• Protected routes — middleware redirects unauthenticated users
• Deployment — live on Vercel with HTTPS and CDN

No Express server. No API routes. No backend code. Just Next.js + Supabase.

Next Steps#

Now that you have the foundation, here's what to add:

1. Real-time updates — use Supabase Realtime to sync tasks across tabs
2. File uploads — attach images to tasks with Supabase Storage
3. Teams — add organizations and shared task lists
4. Stripe payments — monetize with subscriptions

---

Related:

• Building SaaS with Next.js and Supabase
• Next.js Server Actions + Supabase Complete Guide
• Supabase RLS Policy Design Patterns
• Deploying Next.js + Supabase to Production