Manual Interativo: Next.js, Supabase & Zustand

Passo 1: Configuração Inicial

Execute o comando abaixo para criar a estrutura base do projeto.

npx create-next-app@latest seu-app-supabase

Passo 2: Setup do Supabase e SQL

No SQL Editor do seu projeto Supabase, execute o script abaixo para criar a tabela de perfis e configurar a segurança.

-- Cria a tabela para perfis públicos
CREATE TABLE public.profiles (
  id UUID NOT NULL PRIMARY KEY,
  username TEXT,
  avatar_url TEXT,
  CONSTRAINT "profiles_id_fkey" FOREIGN KEY (id) REFERENCES auth.users (id) ON DELETE CASCADE
);
-- ... (resto do SQL)

Passo 3: Integração com Next.js

Instale as bibliotecas do Supabase e configure suas variáveis de ambiente.

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

Passo 4: Estrutura de Pastas

A organização final do seu projeto se parecerá com esta:

/
├── app/
├── components/
├── lib/
├── store/
├── .env.local
└── middleware.ts

Passo 5: Store com Zustand

Instale o Zustand e crie a store em store/userStore.ts.

import { create } from 'zustand'
// ... (código da store)

Passo 6: Páginas de Autenticação

Crie as páginas de Login e Cadastro, como app/login/page.tsx.

'use client'
import { useState } from 'react'
// ... (código da página de login)

Passo 7: AuthProvider

Crie o "ouvinte" de autenticação em components/AuthProvider.tsx.

'use client'
import { useEffect } from 'react'
// ... (código do AuthProvider)

Passo 8: Middleware de Proteção

Crie o arquivo middleware.ts na raiz do projeto.

import { createServerClient } from '@supabase/ssr'
// ... (código do middleware)

Passo 9: Dashboard e Logout

A página final do dashboard, onde o usuário logado chega e pode sair.

'use client'
import { useUserStore } from '@/store/userStore'
// ... (código do dashboard)