jaaneek / t3-supabase-app-router

Nextjs 14 APP Router, t3 stack, Supabase (Auth, storage, database)

T3 stack + Supabase + App directory

This project is Edge ready (Vercel Edge runtime)

This is a starter project/boilerplate to start out with:

• TRPC
• App directory/router
• Prisma
• Supabase (Auth, Storage, Serverless Queries)
• Tailwind
• Edge Ready
• Umami analytics

It allows us to call database in server components through supabase-js, for client component we are using trpc+prisma due to the superior DX

Projects using this starter

• PortfolioQuiz Website
• FreeLogo.dev Website
• FeastQR Repo Website
• Instagram Clone Repo Website

What's next? How do I make an app with this?

• Clone this project
• Run

pnpm install

• Copy the .env.example into .env and fill out the envs

Initial Setup

If you want to develop on local supabase instance, follow the steps below:

Then go to supabase/config.toml file and change your service name.

Start the database:

• supabase start
• pnpm prepare:local

If you want to develop on remote supabase instance, follow the steps below:

Connect supabase to remote instance:

• supabase link --project-ref <your_project_id>
• pnpm prepare:remote

Common steps

• Fill out environment variables
• Create Secrets on Github

If you want to create migrations by hand, go ahead and use this command:

• supabase migration new <migration_name>

Then go to supabase/migrations folder and add your SQL there.

If you want to make changes with studio, use

• pnpm db:diff <migration_name>

Run these initial commands

Every time you change something on local instance:

pnpm prepare:local

• If you develop on cloud supabase run:

pnpm prepare:remote

• Run the project

pnpm dev

If you are not familiar with the different technologies used in this project, please refer to the respective docs.

• Next.js app router
• Prisma
• Tailwind CSS
• tRPC
• Supabase

Authors

👤 Milosz Jankiewicz

• Twitter: @twitter.com/jaaneek/
• Github: @Jaaneek
• LinkedIn: @https://www.linkedin.com/in/jaaneek

👤 Jakub Czarnowski

• Twitter: @twitter.com/charnowsky/
• Github: @jakubczarnowski
• LinkedIn: @https://www.linkedin.com/in/czarnowskijakub/

Learn More

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

• Documentation
• Learn the T3 Stack — Check out these awesome tutorials

You can check out the create-t3-app GitHub repository — your feedback and contributions are welcome!

How do I deploy this?

Follow deployment guides for Vercel, Netlify and Docker for more information.