import { CubeIcon } from '@heroicons/react/outline'
import { useBreakpoint } from 'common'
import {
Check,
ClipboardCheck,
FolderLock,
HeartPulse,
InfoIcon,
Lightbulb,
List,
Lock,
ShieldAlert,
ShieldCheck,
Sparkles,
Timer,
Users,
UserX,
} from 'lucide-react'
import dynamic from 'next/dynamic'
import { useState } from 'react'
import { PRODUCT_SHORTNAMES } from 'shared-data/products'
import { cn, Input, Switch } from 'ui'
import { Image } from 'ui-patterns/Image'
import MainProducts from '../MainProducts'
import {
FrameworkLink,
getEditors,
type FeaturesSection,
type HeroSection,
type Metadata,
} from './solutions.utils'
import type { SecuritySectionProps } from '@/components/Enterprise/Security'
import { frameworks } from '@/components/Hero/HeroFrameworks'
import Logos from '@/components/logos'
import type { DXSectionProps } from '@/components/Solutions/DeveloperExperienceSection'
import type { FeatureGridProps } from '@/components/Solutions/FeatureGrid'
import type { MPCSectionProps } from '@/components/Solutions/MPCSection'
import type { PlatformSectionProps } from '@/components/Solutions/PlatformSection'
import type { ResultsSectionProps } from '@/components/Solutions/ResultsSection'
import { TwoColumnsSectionProps } from '@/components/Solutions/TwoColumnsSection'
import { companyStats } from '@/data/company-stats'
import { useSendTelemetryEvent } from '@/lib/telemetry'
const AuthVisual = dynamic(() => import('components/Products/AuthVisual'))
const FunctionsVisual = dynamic(() => import('components/Products/FunctionsVisual'))
const RealtimeVisual = dynamic(() => import('components/Products/RealtimeVisual'))
const RealtimeLogs = dynamic(() => import('components/Products/Functions/RealtimeLogs'))
const data: () => {
metadata: Metadata
heroSection: HeroSection
why: FeaturesSection
platform: PlatformSectionProps
developerExperience: DXSectionProps
resultsSection: ResultsSectionProps
featureGrid: FeatureGridProps
securitySection: SecuritySectionProps
platformStarterSection: TwoColumnsSectionProps
mcp: MPCSectionProps
} = () => {
const isXs = useBreakpoint(640)
const editors = getEditors(isXs)
const sendTelemetryEvent = useSendTelemetryEvent()
return {
metadata: {
metaTitle: 'Supabase for Postgres Developers',
metaDescription: 'Get started in seconds with a complete Postgres development platform',
},
heroSection: {
id: 'hero',
title: 'Supabase for Postgres Developers',
h1: <>Get started in seconds with a complete Postgres development platform,
subheader: [
<>
Supabase is the open-source Postgres development platform. It includes a developer
experience designed for speed, an integrated suite of backend services, and a scalable,
trusted foundation for building powerful applications. But if all you want is Postgres,
Supabase is that, too.
,
],
footer: ,
image: undefined,
ctas: [
{
label: 'Start your project',
href: 'https://supabase.com/dashboard',
type: 'primary' as any,
onClick: () =>
sendTelemetryEvent({
action: 'start_project_button_clicked',
properties: { buttonLocation: 'Solutions: Postgres Developers page hero' },
}),
},
{
label: 'Request a demo',
href: 'https://supabase.com/contact/sales',
type: 'default' as any,
onClick: () =>
sendTelemetryEvent({
action: 'request_demo_button_clicked',
properties: { buttonLocation: 'Solutions: Postgres Developers page hero' },
}),
},
],
},
why: {
id: 'why-supabase',
label: '',
heading: (
<>
Why Postrges developers choose Supabase
),
subheading:
'Supabase provides full access to Postgres. Use additional components, or just use the database. No proprietary tooling, no vendor lock-in. Supabase is Postgres the way you want it.',
features: [
{
id: 'full-postgres',
icon: (props: any) => (
),
heading: 'Full Postgres',
subheading:
'Connect to Supabase via sql, pgAdmin, or any standard Postgres client. Use native Postgres extensions. Employ Row-Level Security, not a bolt-on permission system.',
},
{
id: 'development-platform',
icon: CubeIcon,
heading: 'Complete development platform',
subheading:
'Supabase offers a fully integrated suite of tools including authentication, storage, edge functions, real-time subscriptions, and vector search. Developers don’t have to stitch together multiple services. Use one or all.',
},
{
id: 'scalable-and-dependable',
icon: Timer,
heading: 'Scalable and dependable',
subheading:
'Keep your workflows, tools, and database expertise. Self-host if you need it. Full deployment if you prefer, including automated backups, Point-in-Time Recovery (PITR), and fine-tuned observability via query logs, pg_stat_activity, and EXPLAIN ANALYZE.',
},
],
},
platform: {
id: 'postgres-platform',
title: (
<>
Supabase is the Postgres platform you control
),
subheading:
'Supabase includes everything you need to create the perfect app for your brand, business, or just for fun.',
className: cn(
'[&_div.grid>div:first-child]:sm:border-l-0!',
'[&_div.grid>div]:sm:-m-px',
'[&_div.grid>div:nth-child(2n+1)]:sm:border-l!',
'[&_div.grid>div:nth-child(2n+2)]:sm:border-t!',
'[&_div.grid>div:nth-child(3n+3)]:lg:border-l-0!',
'[&_div.grid>div:nth-child(2)]:lg:border-t-0!'
),
features: [
{
id: 'database',
title: 'Database',
isDatabase: true,
icon: MainProducts[PRODUCT_SHORTNAMES.DATABASE].icon,
subheading: (
<>
A fully managed Postgres database. No forks: 100% pure Postgres.
),
className: 'sm:col-span-2 flex-col px-4 lg:pr-0 lg:flex-row',
image: (
Name will also be used for the function name in postgres
),
},
{
id: 'Postgres extensions',
title: 'Postgres extensions',
icon: '',
subheading: (
<>
Tap into the full Posgres ecosystem,
including pgvector, PostGIS, pg_stat_statements, and over XX more Postgres extensions.
),
image: (
PGTAP
Unit testing for PostreSQL
),
},
],
},
developerExperience: {
id: 'developer-experience',
className: '[&_h2]:max-w-sm!',
title: (
<>
Developers can build faster with Supabase
),
subheading: 'Features that help developers move quickly and focus.',
features: [
{
id: 'ai-assistant',
title: 'AI Assistant',
icon: 'M11.8949 2.39344C12.5051 1.78324 13.4944 1.78324 14.1046 2.39344L22.9106 11.1994C23.5208 11.8096 23.5208 12.7989 22.9106 13.4091L14.1046 22.2151C13.4944 22.8253 12.5051 22.8253 11.8949 22.2151L3.08892 13.4091C2.47872 12.7989 2.47872 11.8096 3.08892 11.1994L11.8949 2.39344Z M16.5408 12.3043C16.5408 14.2597 14.9556 15.8449 13.0002 15.8449C11.0448 15.8449 9.45961 14.2597 9.45961 12.3043C9.45961 10.3489 11.0448 8.76371 13.0002 8.76371C14.9556 8.76371 16.5408 10.3489 16.5408 12.3043Z',
subheading: (
<>
A single panel that persists across the Supabase Dashboard and maintains{' '}
context across AI prompts.
),
image: (
AI Assistant
Entity: Auth
Schema:
Issue: We have detected that you have enabled the email provider with an expiry
time of more than an hour. It is recommended to set this value to less th...
),
aiPrompts: [
{
id: 'auth-setup',
title: 'Bootstrap Next.js app with Supabase Auth',
description:
'## Overview of implementing Supabase Auth SSR\n1. Install @supabase/supabase-js and...',
code: `1. Install @supabase/supabase-js and @supabase/ssr packages.
2. Set up environment variables.
3. Write two utility functions with \u0060createClient\u0060 functions to create a browser client and a server client.
4. Hook up middleware to refresh auth tokens
`,
language: 'markdown',
docsUrl:
'https://supabase.com/docs/guides/getting-started/ai-prompts/nextjs-supabase-auth',
},
{
id: 'edge-functions',
title: 'Writing Supabase Edge Functions',
description:
"You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate...",
code: `1. Try to use Web APIs and Deno’s core APIs instead of external dependencies (eg: use fetch instead of Axios, use WebSockets API instead of node-ws)
2. If you are reusing utility methods between Edge Functions, add them to 'supabase/functions/_shared' and import using a relative path. Do NOT have cross dependencies between Edge Functions.
3. Do NOT use bare specifiers when importing dependecnies. If you need to use an external dependency, make sure it's prefixed with either 'npm:' or 'jsr:'. For example, '@supabase/supabase-js' should be written as 'npm:@supabase/supabase-js'.
4. For external imports, always define a version. For example, 'npm:@express' should be written as 'npm:express@4.18.2'.
5. For external dependencies, importing via 'npm:' and 'jsr:' is preferred. Minimize the use of imports from @'deno.land/x' , 'esm.sh' and @'unpkg.com' . If you have a package from one of those CDNs, you can replace the CDN hostname with 'npm:' specifier.
`,
language: 'markdown',
docsUrl: 'https://supabase.com/docs/guides/getting-started/ai-prompts/edge-functions',
},
{
id: 'declarative-db-schema',
title: 'Declarative Database Schema',
description:
"You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate...",
code: `Mandatory Instructions for Supabase Declarative Schema Management
## 1. **Exclusive Use of Declarative Schema**
-**All database schema modifications must be defined within '.sql' files located in the 'supabase/schemas/' directory.`,
language: 'markdown',
docsUrl:
'https://supabase.com/docs/guides/getting-started/ai-prompts/declarative-database-schema',
},
{
id: 'rls-policies',
title: 'Create RLS policies',
description:
"You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate...",
code: `You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate a policy with the constraints given by the user. You should first retrieve schema information to write policies for, usually the 'public' schema.
The output should use the following instructions:
- The generated SQL must be valid SQL.`,
language: 'markdown',
docsUrl:
'https://supabase.com/docs/guides/getting-started/ai-prompts/database-rls-policies',
},
],
},
mcp: {
id: 'mcp',
heading: (
Supabase MCP server works seamlessly with{' '}
your favorite AI code editor