Things we will be using: Next.js, Vercel, Supabase, this component library, and this payment page.
The other things I used: Cursor, Github, Tldraw,
This is the docs:https://nextjs.org/docs/app/getting-started/installation
Install Next.js
npx create-next-app
What is your project named? my-app
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like your code inside a src/
directory? No
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for next dev
? No
Would you like to customize the import alias (@/*
by default)? No
Install Supabase
npm install @supabase/supabase-js
Create a configuration file lib/supabaseClient.js
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
Set up Environment Variables
Create a .env.local file:
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
Create a supabase project