The fastest way to build apps with Next.js and Supabase

Features · Demo · Deploy to Vercel · Clone and run locally · Feedback and issues More Examples

• Works across the entire Next.js stack
  • App Router
  • Pages Router
  • Middleware
  • Client
  • Server
  • It just works!
• supabase-ssr. A package to configure Supabase Auth to use cookies
• Password-based authentication block installed via the Supabase UI Library
• Styling with Tailwind CSS
• Components with shadcn/ui
• Optional deployment with Supabase Vercel Integration and Vercel deploy
  • Environment variables automatically assigned to Vercel project

You can view a fully working demo at demo-nextjs-with-supabase.vercel.app.

Vercel deployment will guide you through creating a Supabase account and project.

After installation of the Supabase integration, all relevant environment variables will be assigned to the project so the deployment is fully functioning.

The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally.

If you wish to just develop locally and not deploy to Vercel, follow the steps below.

1. You'll first need a Supabase project which can be made via the Supabase dashboard

2. Create a Next.js app using the Supabase Starter template npx command

   npx create-next-app --example with-supabase with-supabase-app

   yarn create next-app --example with-supabase with-supabase-app

   pnpm create next-app --example with-supabase with-supabase-app

3. Use cd to change into the app's directory

   cd with-supabase-app

4. Rename .env.example to .env.local and update the following:

   NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL]
   NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY]
   

   Both NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY can be found in your Supabase project's API settings

5. You can now run the Next.js local development server:

   npm run dev

   The starter kit should now be running on localhost:3000.

6. This template comes with the default shadcn/ui style initialized. If you instead want other ui.shadcn styles, delete components.json and re-install shadcn/ui

Check out the docs for Local Development to also run Supabase locally.

Please file feedback and issues over on the Supabase GitHub org.

• Next.js Subscription Payments Starter
• Cookie-based Auth and the Next.js 13 App Router (free course)
• Supabase Auth and the Next.js App Router

A collaborative drawing application built with Next.js, TypeScript, and Supabase.

• Real-time Collaboration: Draw with others in real-time
• Multiple Drawing Tools: Square, Circle, Triangle, Line, Arrowed Line, Text, and Pencil
• Shape Selection: Select, move, resize, and delete shapes
• Zoom and Pan: Navigate your canvas with zoom and pan controls
• Authentication: User authentication with Supabase
• Responsive Design: Works on desktop and mobile devices

• Square: Draw rectangles
• Circle: Draw circles
• Triangle: Draw triangles
• Line: Draw straight lines
• Arrowed Line: Draw lines with arrowheads
• Text: Add text to your canvas
• Pencil: Freehand drawing
• Eraser: Delete shapes by hovering over them
• Panning: Move around the canvas (hold spacebar or use hand tool)
• Selection: Select and manipulate shapes

The selection tool allows you to:

1. Select Shapes: Click on any shape to select it
2. Move Shapes: Click and drag on a selected shape to move it
3. Resize Shapes: Use the corner handles to resize selected shapes
4. Delete Shapes: Press Delete or Backspace to delete selected shapes
5. Visual Feedback: Selected shapes show a blue dashed border with resize handles

1. Click the mouse pointer icon in the toolbar to activate selection mode
2. Hover over any shape - the cursor will change to indicate interactivity
3. Click on a shape to select it - a blue dashed border will appear
4. Drag the shape to move it, or drag the corner handles to resize it
5. Press Delete or Backspace to delete the selected shape
6. Click on empty space to deselect

1. Clone the repository
2. Install dependencies: npm install
3. Set up your Supabase project and add environment variables
4. Run the development server: npm run dev
5. Open http://localhost:3000 in your browser

Create a .env.local file with your Supabase credentials:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

• Next.js 14
• TypeScript
• Supabase
• Tailwind CSS
• Rough.js (for hand-drawn shapes)
• Perfect Freehand (for pencil tool)