import { CubeIcon } from '@heroicons/react/outline'
import { DASHBOARD_SIGN_UP_URL } from '@/lib/dashboard-links'
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 { PRODUCT_SHORTNAMES } from 'shared-data/products'
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 RealtimeLogs from '@/components/Products/Functions/RealtimeLogs'
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 data: () => {
metadata: Metadata
heroSection: HeroSection
why: FeaturesSection
platform: PlatformSectionProps
developerExperience: DXSectionProps
resultsSection: ResultsSectionProps
featureGrid: FeatureGridProps
securitySection: SecuritySectionProps
platformStarterSection: TwoColumnsSectionProps
mcp: MPCSectionProps
} = () => {
const sendTelemetryEvent = useSendTelemetryEvent()
const isXs = useBreakpoint(640)
const editors = getEditors(isXs)
return {
metadata: {
metaTitle: 'Supabase for Developers',
metaDescription: 'Build fast. Scale easily. Trust your tech stack.',
},
heroSection: {
id: 'hero',
title: 'Supabase for Developers',
h1: (
<>
Build fast. Scale easily.Trust your stack.
),
subheader: [
<>
Supabase is the Postgres development platform that includes a developer experience
designed for speed, an integrated suite of backend services, and a scalable, trusted
foundation for building powerful applications.
,
],
image: undefined,
ctas: [
{
label: 'Start your project',
href: DASHBOARD_SIGN_UP_URL,
type: 'primary' as any,
onClick: () =>
sendTelemetryEvent({
action: 'start_project_button_clicked',
properties: { buttonLocation: 'Solutions: 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: Developers page hero' },
}),
},
],
},
why: {
id: 'why-supabase',
label: '',
heading: (
<>
Why developers choose Supabase
),
subheading:
'Supabase helps you build and get to market faster and more cost-effectively using a composable platform of application services built on Postgres. Supabase scales as your business grows.',
features: [
{
id: 'easy-to-use',
icon: Timer,
heading: 'Easy to use',
subheading:
'Spin up a Postgres database in seconds, manage your backend with an intuitive dashboard, and integrate with any framework. No complex setup required.',
},
{
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: (props: any) => (
),
heading: 'Scalable and dependable',
subheading:
'Built on Postgres, Supabase provides enterprise-grade performance, high availability, and the flexibility to grow without vendor lock-in.',
},
],
},
platform: {
id: 'postgres-platform',
title: (
<>
Supabase helps you build
),
subheading:
'Supabase includes everything you need to create the perfect app for your brand, business, or just for fun.',
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: 'lg:col-span-2 flex-col lg:flex-row px-4 lg:pr-0',
image: (
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