vercel / server-components-notes-demo

Experimental demo of React Server Components with Next.js. Deployed serverlessly on Vercel.

Next.js App Router + Server Components Notes Demo

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

This demo was originally built by the React team. This version has been forked and modified for use with the Next.js App Router.

Introduction

This is a demo app of a notes application, which shows Next.js 13's App Router with support for React Server Components. Learn more.

Environment Variables

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

KV_URL='redis://:<password>@<url>:<port>' # vercel.com/kv
SESSION_KEY='your session key'
OAUTH_CLIENT_KEY='github oauth app id'
OAUTH_CLIENT_SECRET='github oauth app secret'

Running Locally

1. pnpm install
2. pnpm dev

Go to localhost:3000.

Deploy

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

License

This demo is MIT licensed. Originally built by the React team

server-components-notes-demo's Issues

Error: Cannot read property '0' of null

Hey,
I'm trying to run the demo but unfortunately, I'm getting the error "Error: Cannot read property '0' of null".
Call Stack Object.get file:///C:/Users/erics/Desktop/Web/server-component-next/next-server-components/.next/server/pages/api.js (133:361419) <unknown> file:///C:/Users/erics/Desktop/Web/server-component-next/next-server-components/.next/server/pages/api.js (140:1613) Array.toJSON file:///C:/Users/erics/Desktop/Web/server-component-next/next-server-components/.next/server/pages/api.js (140:2690) stringify <anonymous> <unknown> file:///C:/Users/erics/Desktop/Web/server-component-next/next-server-components/.next/server/pages/api.js (140:4571) x file:///C:/Users/erics/Desktop/Web/server-component-next/next-server-components/.next/server/pages/api.js (140:4640) k file:///C:/Users/erics/Desktop/Web/server-component-next/next-server-components/.next/server/pages/api.js (140:4910) Immediate._onImmediate file:///C:/Users/erics/Desktop/Web/server-component-next/next-server-components/.next/server/pages/api.js (140:6342) processImmediate internal/timers.js (456:21)

Is the demo still supported?

Enhance: search field component

• Put refresh function inside startTransition (named startSearching) callback
• Remove unnecessary state

yarn dev failing with error from react-server-dom-webpack module

Hi, I am trying to run the demo and seeing an error when accessing http://localhost:3000. Any clue why I am seeing this error?

arul@MacBook-Pro next-server-components % yarn dev    
yarn run v1.22.10
$ next
Loaded env from /Users/arul/Documents/GitHub/nextjs/forks/next-server-components/.env
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /api
wait  - compiling...
[BABEL] Note: The code generator has deoptimised the styling of /Users/arul/Documents/GitHub/nextjs/forks/next-server-components/libs/send-res.build.js as it exceeds the max of 500KB.
event - compiled successfully
API resolved without sending a response for /api?location=%7B%22selectedId%22%3Anull%2C%22isEditing%22%3Afalse%2C%22searchText%22%3A%22%22%7D, this may result in stalled requests.
/Users/arul/Documents/GitHub/nextjs/forks/next-server-components/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack.development.js:562
  var reader = stream.getReader();
                      ^

TypeError: stream.getReader is not a function
    at startReadingFromStream (/Users/arul/Documents/GitHub/nextjs/forks/next-server-components/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack.development.js:562:23)
    at /Users/arul/Documents/GitHub/nextjs/forks/next-server-components/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack.development.js:594:5
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
arul@MacBook-Pro next-server-components %

Error: Unsupported state or unable to authenticate data

Hey, I get an error in the crypto functions with your new version.
Tried to run in https too, but I get 'ERR_SSL_PROTOCOL_ERROR'.

When running in HTTP, this is the error I get when clicking on the 'add a note' button:

Error: Unsupported state or unable to authenticate data
    at Decipheriv.final (node:internal/crypto/cipher:193:29)
    at Function.decryptAesGCM (C:\Users\erics\Desktop\Web\server-components-notes-demo\node_modules\next\dist\compiled\@peculiar\webcrypto\webcrypto.js:46:14381)
    at Function.decrypt (C:\Users\erics\Desktop\Web\server-components-notes-demo\node_modules\next\dist\compiled\@peculiar\webcrypto\webcrypto.js:46:12612)    
    at AesGcmProvider.onDecrypt (C:\Users\erics\Desktop\Web\server-components-notes-demo\node_modules\next\dist\compiled\@peculiar\webcrypto\webcrypto.js:46:18905)
    at AesGcmProvider.decrypt (C:\Users\erics\Desktop\Web\server-components-notes-demo\node_modules\next\dist\compiled\@peculiar\webcrypto\webcrypto.js:31:83609)
    at SubtleCrypto.decrypt (C:\Users\erics\Desktop\Web\server-components-notes-demo\node_modules\next\dist\compiled\@peculiar\webcrypto\webcrypto.js:31:97842)
    at decrypt (webpack-internal:///(middleware)/./libs/session.js:60:46)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.middleware [as handler] (webpack-internal:///(middleware)/./pages/note/edit/_middleware.js:16:21)
get all items from redis: 1.007s