An example Next.js website that shows Postgres Full Text Search, next-image with Supabase Storage, and sending emails based on an insert trigger with Supabase Edge Functions.

1. Create a new Supabase project, or use an existing one
2. Run the schema.sql file in the Supabase dashboard to create the relevant tables
3. Update the environment variables (either in Vercel or locally) with Supabase URL and Anon Key

• Locally: cp app/.env.local.example app/.env.local

4. Deploy Supabase Edge Function for contact form notifications:

supabase link --project-ref your-project-ref
supabase secrets set SMTP_HOSTNAME="your.hostname.com" SMTP_PORT="2587" SMTP_USERNAME="your_username" SMTP_PASSWORD="your_password" SMTP_FROM="[email protected]" SMTP_TO="[email protected]" FUNCTION_SECRET="your-random-secret"
supabase functions deploy contact-notification

Note: SMTP_PORT must be a port other than 25, 465, and 587 as Deno Deploy does not support outgoing connections to ports. AWS SES (port 2587) is recommended.

5. Setup a Supabase Function Hook to trigger the function when a new row is inserted into partner_contacts
6. Within Vercel project settings, ensure Framework Preset is set to Next.js and Root Directory is set to app.
7. Insert partners into the partners table.
8. Celebrate together 🎉