next-rsc-demo VS supabase

For this tutorial, rather than creating a project from scratch, I’ll be using the Hacker News project created by Vercel to explain how RSC are used in Next.js 12. Repository here.

Hey! You can view the code here: https://github.com/vercel/next-rsc-demo

From my understanding from watching the keynote earlier today, the reason that demo has JS is that repo opted in to have client side code to handle the upvote functionality. If it didn't require that interactivity it could be shipped with no client side JS. The client side js code is defined in the component files ending in .client.js

https://github.com/vercel/next-rsc-demo/tree/main/components

I didn't really give much thought as to which backend I would use. I already had 2 projects in Supabase (BOXCUT & MineWork), but also a few projects in Firebase too. I was more concerned at the time at actually building the product.

Sign up for SupaBase: Head over to SupaBase and sign up. Create a new workspace and project with your preferred names.

Setting up Supabase Create a new Supabase project, and get the connection string for the database from settings > database.

Supabase (start for free)

Built with Supabase, Astro, Unreal Speech, Stable Diffusion, Replicate, Metropolitan Museum of Art

Supabase will be used for storing article data in the database and the cover image of the article in storage. Chakra UI will be used to provide style to the elements. By using both, we can build the blog with ease.

For AutoRepurpose, I opted for Supabase as the backbone of the backend. It has reliably supported Penelope AI, which garnered over 15k users in 2022 without any issues.

Semantic search demo

1. Create a new Supabase project: Visit Supabase and create a new project.

Supabase positions itself as the "open source Firebase alternative." It was founded in 2020 and is a developer-friendly serverless database platform that supports over 20 frameworks, including popular tools like Next.js, React, Nuxt, Svelte, Flutter, and Vue.