Guides

# Create page in the appropriate route
touch src/app/[locale]/(pages)/my-page/page.tsx

// src/app/[locale]/(pages)/my-page/page.tsx
import { getTranslations } from 'next-intl/server'
 
export async function generateMetadata() {
  const t = await getTranslations('MyPage')
  return { title: t('title') }
}
 
export default async function MyPage() {
  const t = await getTranslations('MyPage')
 
  return (
    <main className="container mx-auto px-4 py-8">
      <h1>{t('heading')}</h1>
    </main>
  )
}

// src/i18n/locales/en.json
{
  "MyPage": {
    "title": "My Page",
    "heading": "Welcome to My Page"
  }
}

// src/app/api/my-endpoint/route.ts
import { NextResponse } from 'next/server'
import { createClient } from '@/lib/supabase/server'
 
export async function GET() {
  const supabase = await createClient()
 
  const { data, error } = await supabase
    .from('my_table')
    .select('*')
 
  if (error) {
    return NextResponse.json(
      { error: error.message },
      { status: 500 }
    )
  }
 
  return NextResponse.json(data)
}
 
export async function POST(request: Request) {
  const body = await request.json()
 
  // Validate and process...
 
  return NextResponse.json({ success: true })
}

supabase migration new create_my_table

-- supabase/migrations/xxx_create_my_table.sql
CREATE TABLE my_table (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);
 
-- Enable RLS
ALTER TABLE my_table ENABLE ROW LEVEL SECURITY;
 
-- Add policies
CREATE POLICY "Users can view own records"
  ON my_table FOR SELECT
  USING (auth.uid() = user_id);
 
CREATE POLICY "Users can insert own records"
  ON my_table FOR INSERT
  WITH CHECK (auth.uid() = user_id);

npm run db:push

npm run db:gen

// server/actions/my-actions.ts
'use server'
 
import { createClient } from '@/lib/supabase/server'
import { ActionResult } from '@/lib/action-result'
import { revalidatePath } from 'next/cache'
 
export async function createItem(
  formData: FormData
): Promise<ActionResult<Item>> {
  const supabase = await createClient()
 
  const { data, error } = await supabase
    .from('items')
    .insert({
      name: formData.get('name') as string,
    })
    .select()
    .single()
 
  if (error) {
    return { success: false, error: error.message }
  }
 
  revalidatePath('/items')
  return { success: true, data }
}

'use client'
 
import { useAsyncAction } from '@/hooks'
import { createItem } from '@/server/actions/my-actions'
 
export function CreateItemForm() {
  const { execute, isLoading, error } = useAsyncAction(createItem)
 
  const handleSubmit = async (formData: FormData) => {
    const result = await execute(formData)
    if (result.success) {
      // Handle success
    }
  }
 
  return (
    <form action={handleSubmit}>
      {/* Form fields */}
    </form>
  )
}