RSC Notes Demo

RSC Notes Demo is a MIT-licensed starter application that demonstrates how to build a notes app using the Next.js App Router with React Server Components, forked from the React team's original demo and updated for Next.js.

What is RSC Notes Demo?

RSC Notes Demo is a demo notes application that showcases the Next.js App Router with React Server Components. It takes environment variables for Redis storage and GitHub OAuth authentication as input and produces a fully functional web app. The project runs on Next.js and is designed to be deployed on Vercel. It was originally built by the React team and has been forked and modified by Vercel for use with the App Router.

Key Features

• Next.js App Router — Uses the latest routing system with support for React Server Components.
• React Server Components — Server-rendered components that fetch data without shipping extra client-side JavaScript.
• GitHub OAuth authentication — Requires OAUTH_CLIENT_KEY and OAUTH_CLIENT_SECRET to let users log in.
• Vercel KV storage — Persists notes using Vercel's Redis-compatible KV service, configured through the KV_URL environment variable.
• Session-based auth — Uses a SESSION_KEY to sign session cookies securely.
• One-click Vercel deploy — Includes a deploy button that pre-fills all required environment variables and creates a project named next-rsc-notes.
• Local development workflow — Start with pnpm install and pnpm dev, then visit localhost:3000.
• MIT License — Free to use, modify, and distribute.

Who is it for?

• Next.js developers — Use this demo to learn how to structure an App Router project with React Server Components and server-side data fetching.
• React developers — Explore how server components reduce client-side JavaScript and how to integrate OAuth and database storage.
• Hobbyist builders — Customize the demo into a personal notes app with GitHub login and persistent storage on Vercel KV.

Use cases

• Learning a realistic RSC codebase: Study how server components fetch data and how the App Router organizes routes, layouts, and loading states.
• Rapid prototyping: Deploy to Vercel with one click to get a running notes app with authentication and storage in minutes.
• Starting point for a notes product: Fork the repository and extend it with additional routes, UI, or features while keeping the existing auth and persistence.

How does it work?

1. Copy the required environment variables (KV_URL, SESSION_KEY, OAUTH_CLIENT_KEY, OAUTH_CLIENT_SECRET) into a .env file.
2. Run pnpm install and pnpm dev to start the app locally at localhost:3000.
3. Deploy to Vercel using the provided link, which prompts for those same environment variables and creates a Vercel project.

FAQ

Is this template free?

Yes, RSC Notes Demo is MIT licensed, meaning you can freely use, modify, and distribute it.

What environment variables are required?

The app needs KV_URL pointing to a Vercel KV (Redis) instance, a SESSION_KEY for signing session cookies, and GitHub OAuth credentials (OAUTH_CLIENT_KEY and OAUTH_CLIENT_SECRET).

Does this template use React Server Components?

Yes, the entire demo is built around React Server Components and the Next.js App Router, showing server-side data fetching and rendering.

Can I deploy this to Vercel?

Yes, there is a one-click deploy button that sets up the project on Vercel and asks you to provide the required environment variables.

Where does the original code come from?

The demo was originally built by the React team, and this version was forked and modified for compatibility with the Next.js App Router.