UI Integration

UI Integration for Next.js with Supabase

Overview

UI Integration handles the server-side integration layer of Next.js applications with Supabase backends. This skill covers implementing Server Actions, writing type-safe Supabase queries, enforcing RLS policies with explicit auth checks, and properly revalidating data after mutations.

Key principles:

• Defense-in-depth: Always combine RLS policies with explicit auth checks
• Use "use server" for all server actions
• Revalidate paths after mutations for fresh data
• Generate and use TypeScript types for database queries
• Handle errors gracefully with proper error boundaries

Skill-scoped Context

Official Documentation:

• Next.js Server Actions: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
• Supabase JavaScript Client: https://supabase.com/docs/reference/javascript/introduction
• Supabase Row Level Security: https://supabase.com/docs/guides/auth/row-level-security
• Next.js Revalidation: https://nextjs.org/docs/app/building-your-application/caching#revalidatepath

Workflow

Step 1: Define Server Actions

Create server actions in dedicated files or inline with "use server":

// app/actions/posts.ts
"use server";

import { createClient } from "@/lib/supabase/server";
import { revalidatePath } from "next/cache";
import { z } from "zod";

const createPostSchema = z.object({
  title: z.string().min(1).max(200),
  content: z.string().min(1),
});

export async function createPost(formData: FormData) {
  const supabase = await createClient();

  // Explicit auth check (defense-in-depth)
  const { data: { user }, error: authError } = await supabase.auth.getUser();
  if (authError || !user) {
    return { error: "Unauthorized" };
  }

  // Validate input
  const rawData = {
    title: formData.get("title"),
    content: formData.get("content"),
  };

  const parsed = createPostSchema.safeParse(rawData);
  if (!parsed.success) {
    return { error: parsed.error.flatten().fieldErrors };
  }

  // Insert with user_id (RLS will also enforce this)
  const { data, error } = await supabase
    .from("posts")
    .insert({
      title: parsed.data.title,
      content: parsed.data.content,
      user_id: user.id,
    })
    .select()
    .single();

  if (error) {
    return { error: error.message };
  }

  revalidatePath("/posts");
  return { data };
}