Next.js 12 React Server Components Notes Demo (Alpha)

Try the demo live here: next-rsc-notes.vercel.app.

Introduction

This is a demo app showing Next.js 12's experimental React Server Components support. It's based on the React Server Components Demo by the React team. We recommend you taking a look at these links, before trying out the experimental feature:

• Introducing Zero-Bundle-Size React Server Components
• Everything About React Server Components
• Docs of React Server Components in Next.js

This demo is built for showing what features that Server Components provide and what the application structure might look like. It's not ready for production adoption, or performance benchmarking as the underlying APIs are not stable yet, and might change or be improved in the future.

Technical Details

This Next.js application uses React 18 (RC build), with runtime set to 'nodejs' and feature flag serverComponents enabled. You can check out next.config.js for more details. It also uses Redis to store the data, and GitHub's OAuth API for authentication. To develop it locally or host it, please follow these instructions:

Preparation

These environment variables are required to start this application (you can create a .env file for Next.js to use):

REDIS_URL='rediss://:<password>@<url>:<port>' # or `redis://` if no TLS support
SESSION_KEY='your session key'
OAUTH_CLIENT_KEY='github oauth app id'
OAUTH_CLIENT_SECRET='github oauth app secret'

Running Locally

1. yarn install
2. yarn dev

Go to localhost:3000.

Deploy

You can quickly deploy the demo to Vercel by clicking this link:

Technical Details

This Next.js application uses React 18 (RC build) and the new Edge Runtime. It has runtime set to 'edge' and feature flag serverComponents enabled. You can check out next.config.js for more details.

License

This demo is MIT licensed.