---
title: "Plasmic Supabase"
description: "This is a template built on top of Plasmic (for frontend), Supabase (for backend), and Next.js (platform)."
url: "https://vercel.com/templates/next.js/plasmic-supabase-template"
links:
  repository: "https://github.com/plasmicapp/supabase-template"
  demo: "https://plasmic-supabase-demo.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Plasmic+Supabase&demo-description=This+is+a+template+built+on+top+of+Plasmic+%28for+frontend%29%2C+Supabase+%28for+backend%29%2C+and+Next.js+%28platform%29.&demo-url=https%3A%2F%2Fplasmic-supabase-demo.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2Fe3P4xBiMNScFTvHiD3jCo%2Fe65fd321c4285050a4a5a9fc18c231a3%2FCleanShot_2025-03-05_at_10.40.55_2x.png&project-name=Plasmic+Supabase&repository-name=plasmic-supabase-template&repository-url=https%3A%2F%2Fgithub.com%2Fplasmicapp%2Fsupabase-template&from=templates&skippable-integrations=1"
---

# Plasmic Supabase

This is a template built on top of Plasmic (for frontend), Supabase (for backend), and Next.js (platform).

<p align="center">
  <a href="https://www.plasmic.app">
    <img alt="Plasmic" role="img" src="https://cdn-images-1.medium.com/max/176/1*D1nV2o_le9dJEO3G80P4xg@2x.png" width="120">
  </a>
</p>

# Plasmic+Supabase Demo

This is a demo of building a Pokedex on top of Plasmic (for frontend), Supabase (for backend), and Next.js (platform). To read more about how this works, check out our tutorial [here](https://supabase.com/docs/guides/integrations/plasmic).

## Getting Started

1. Copy `.env.example` to `.env` and populate your Supabase credentials.
   The tutorial above will show you how to properly set up a compatible Supabase project.
2. Run `yarn` to install dependencies, fetch the schema and types from supabase.

3. Run the development server:

```bash
yarn dev
```

4. Open your browser to see the result.

5. You can view the Plasmic-built frontend [here](https://studio.plasmic.app/projects/i6YZmFxPJB69NEUgdf79ap). If you want to make edits, clone the Plasmic project and note the new
   project ID and token. These fields will need to be updated in `.env` to reflect your changes.

## Learn More

With Plasmic, you can enable non-developers on your team to publish pages and content into your website or app.

To learn more about Plasmic, take a look at the following resources:

- [Plasmic Website](https://www.plasmic.app/)
- [Plasmic Documentation](https://docs.plasmic.app/learn/)
- [Plasmic Community Forum](https://forum.plasmic.app/)

You can check out [the Plasmic GitHub repository](https://github.com/plasmicapp/plasmic) - your feedback and contributions are welcome!

Note: This Next.js project was bootstrapped with [`create-plasmic-app`](https://www.npmjs.com/package/create-plasmic-app).

## Related Templates

### [Supabase Starter](https://vercel.com/templates/next.js/supabase)

A Next.js App Router template configured with cookie-based auth using Supabase, TypeScript and Tailwind CSS.

### [Next.js SaaS Starter](https://vercel.com/templates/next.js/next-js-saas-starter)

Postgres, Auth, Tailwind, shadcn/ui, and more.

### [Stripe & Supabase SaaS Starter Kit](https://vercel.com/templates/next.js/stripe-supabase-saas-starter-kit)

Full SaaS starter kit with Stripe for payments and Supabase for auth.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.