https://github.com/edspencer/rsc-examples
A collection of examples of how to use React Server Components, using Next JS
https://github.com/edspencer/rsc-examples
nextjs react react-server-components
Last synced: 8 months ago
JSON representation
A collection of examples of how to use React Server Components, using Next JS
- Host: GitHub
- URL: https://github.com/edspencer/rsc-examples
- Owner: edspencer
- License: mit
- Created: 2024-07-09T15:43:50.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-13T15:32:21.000Z (over 1 year ago)
- Last Synced: 2025-04-16T17:29:11.396Z (8 months ago)
- Topics: nextjs, react, react-server-components
- Language: TypeScript
- Homepage: https://rsc-examples.edspencer.net
- Size: 4.61 MB
- Stars: 13
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
A collection of React Server Component examples, hosted at https://rsc-examples.edspencer.net, or runnable locally via `npm start dev`.
These were created to support a series of blog posts I wrote about React Server Components at https://edspencer.net.
## Features
Uses `` to render the contents of the `README.mdx` files, using their frontmatter
## Adding Examples
Examples are found in the src/app/examples folder. Each example should contain at least a `README.mdx`, which will be rendered as the page content when the example is visited in the browser. Typically an example will also contain a `page.tsx`, which contains the actual example source, as well as potentially other auxiliary files.
The `README.mdx` should contain a frontmatter declaration that at least contains a title and a slug, which is the url the example will be served from. The slug should mirror the directory structure of the example files.
## Recording videos
Run `npm run video` to automatically generate timestamped videos of all examples that don't currently have one in the `public/videos` directory.
## Generating Related Examples
Uses [ReadNext](https://github.com/edspencer/read-next) to generate the related examples at the bottom of each example page. Re-generate these by running (making sure an `OPENAI_API_KEY` is present in env variables):
```sh
npm run related
```
## To do
- Option to disable video looping
- Fix search