diff --git a/demos/server-components/README.md b/demos/server-components/README.md
deleted file mode 100644
index eb3c5af11c..0000000000
--- a/demos/server-components/README.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Next.js 12 React Server Components Demo (Alpha)
-
-Try the demo live here: [**https://next-plugin-rsc-demo.netlify.app**](https://next-plugin-rsc-demo.netlify.app).
-
-## Introduction
-
-This is a demo app of the Hacker News website clone, which shows Next.js 12's experimental React Server Components
-support. We recommend you taking a look at these links, before trying out the experimental feature:
-
-- [**Introducing Zero-Bundle-Size React Server Components**](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html)
-- [**Everything About React Server Components**](https://vercel.com/blog/everything-about-react-server-components)
-- [**Docs of React Server Components in Next.js**](https://nextjs.org/docs/advanced-features/react-18#react-server-components)
-
-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) and the new
-[Edge Runtime](https://nextjs.org/docs/api-reference/edge-runtime). It has `runtime` set to `'edge'` and feature flag
-`serverComponents` enabled. You can check out
-[next.config.js](https://github.com/vercel/next-react-server-components/blob/main/next.config.js) for more details.
-
-### Running Locally
-
-1. `yarn install`
-2. `yarn dev`
-
-Go to `localhost:3000`.
-
-## License
-
-This demo is MIT licensed.
diff --git a/demos/server-components/components/comment-form.js b/demos/server-components/components/comment-form.js
deleted file mode 100644
index 6c1b33b390..0000000000
--- a/demos/server-components/components/comment-form.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export default () => (
-
-
-
- add comment
-
-)
diff --git a/demos/server-components/components/comment.js b/demos/server-components/components/comment.js
deleted file mode 100644
index eb324788f5..0000000000
--- a/demos/server-components/components/comment.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from 'react'
-
-import timeAgo from '../lib/time-ago'
-
-export default class Comment extends React.Component {
- constructor(props) {
- super(props)
- this.state = { toggled: false }
- this.toggle = this.toggle.bind(this)
- }
-
- render() {
- const { user, text, date, comments } = this.props
- return (
-
-
- {/* TODO: time hydration mismatch */}
- {user} {timeAgo(new Date(date))} ago{' '}
-
- {this.state.toggled
- ? `[+${(this.props.commentsCount || 0) + 1}]`
- : '[-]'}
-
-
-
- {this.state.toggled
- ? null
- : [
-
,
-
- {comments.map((comment) => (
-
- ))}
-
,
- ]}
-
-
-
- )
- }
-
- toggle() {
- this.setState({ toggled: !this.state.toggled })
- }
-}
diff --git a/demos/server-components/components/error-placeholder.client.js b/demos/server-components/components/error-placeholder.client.js
deleted file mode 100644
index be56c95dc5..0000000000
--- a/demos/server-components/components/error-placeholder.client.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default function ErrorPlaceholder({ error }) {
- if (process.env.NODE_ENV === 'development') {
- console.error(error)
- }
- return {`Application error: a server-side exception has occurred`}
-}
diff --git a/demos/server-components/components/footer.client.js b/demos/server-components/components/footer.client.js
deleted file mode 100644
index f6a7bd411b..0000000000
--- a/demos/server-components/components/footer.client.js
+++ /dev/null
@@ -1,21 +0,0 @@
-export default function Footer() {
- return (
-
-
- Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC |
- Contact
-
-
-
-
- )
-}
diff --git a/demos/server-components/components/header.js b/demos/server-components/components/header.js
deleted file mode 100644
index 8d180d7f70..0000000000
--- a/demos/server-components/components/header.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import Nav from './nav'
-import Logo from './logo'
-import Link from 'next/link'
-
-export default function Header() {
- return (
- <>
-
-
- >
- )
-}
diff --git a/demos/server-components/components/item.client.js b/demos/server-components/components/item.client.js
deleted file mode 100644
index 4976f3b778..0000000000
--- a/demos/server-components/components/item.client.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Suspense } from 'react'
-import Story from '../components/story.client'
-import Comment from '../components/comment'
-import CommentForm from '../components/comment-form'
-import useData from '../lib/use-data'
-import getComments from '../lib/get-comments'
-import Skeletons from './skeletons'
-
-function Comments({ story }) {
- if (!story) return No Comments
- const { data: comments } = useData(`comments/${story.id}`, () => getComments(story.comments))
- return (
-
- {(comments || []).map((comment) => (
-
- ))}
-
- )
-}
-
-export default function Item({ story }) {
- return (
-
-
-
-
-
-
-
-
-
- {`Loading comments...`}
-
-
- }
- >
-
-
-
- )
-}
diff --git a/demos/server-components/components/item.server.js b/demos/server-components/components/item.server.js
deleted file mode 100644
index ab946fe9bb..0000000000
--- a/demos/server-components/components/item.server.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { Suspense } from 'react'
-
-import Page from './page.client'
-import Item from './item.client'
-import getItem from '../lib/get-item'
-import useData from '../lib/use-data'
-import Skeletons from './skeletons'
-
-function ItemPageWithData({ id }) {
- const { data: story } = useData(`item/${id}`, () => getItem(id))
- if (!story) return
- return (
-
- )
-}
-
-export default function ItemPage({ id }) {
- if (!id) return null
-
- return (
-
- }>
-
-
-
- )
-}
diff --git a/demos/server-components/components/logo.js b/demos/server-components/components/logo.js
deleted file mode 100644
index 6e76766159..0000000000
--- a/demos/server-components/components/logo.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default function Logo() {
- return (
- <>
- N
-
- >
- )
-}
diff --git a/demos/server-components/components/meta.js b/demos/server-components/components/meta.js
deleted file mode 100644
index 8804a86d91..0000000000
--- a/demos/server-components/components/meta.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import Head from 'next/head'
-
-export default function Meta() {
- return (
-
-
-
-
-
-
-
- )
-}
diff --git a/demos/server-components/components/nav.js b/demos/server-components/components/nav.js
deleted file mode 100644
index 716189b8a9..0000000000
--- a/demos/server-components/components/nav.js
+++ /dev/null
@@ -1,35 +0,0 @@
-export default function Nav() {
- ;
- - new
- - show
- - ask
- - jobs
- - submit
-
-
-
-}
-
-const Item = ({ href, children }) => (
-
- {children}
-
-)
diff --git a/demos/server-components/components/page.client.js b/demos/server-components/components/page.client.js
deleted file mode 100644
index 8db841bf12..0000000000
--- a/demos/server-components/components/page.client.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import Header from './header'
-import Meta from './meta'
-
-export default function Page({ children }) {
- return (
- <>
-
-
- >
- )
-}
diff --git a/demos/server-components/components/server-info.server.js b/demos/server-components/components/server-info.server.js
deleted file mode 100644
index b3a6f8a0ac..0000000000
--- a/demos/server-components/components/server-info.server.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function ServerInfo() {
- return (
-
- Rendered at {new Date().toTimeString()} with Edge Middleware.
-
- )
-}
diff --git a/demos/server-components/components/skeletons.js b/demos/server-components/components/skeletons.js
deleted file mode 100644
index eac287e247..0000000000
--- a/demos/server-components/components/skeletons.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default function Skeletons({ count = 30 }) {
- // Generating {count = 30} skeletons to match the size of the list.
- return (
-
- {Array(count)
- .fill(0)
- .map((_, index) => (
-
- ))
- }
-
- )
-}
-
-function Skeleton() {
- return
-}
diff --git a/demos/server-components/components/spinner.js b/demos/server-components/components/spinner.js
deleted file mode 100644
index b8f01cc1e4..0000000000
--- a/demos/server-components/components/spinner.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Spinner() {
- return
;
-}
diff --git a/demos/server-components/components/stories.client.js b/demos/server-components/components/stories.client.js
deleted file mode 100644
index 2ae2bba5d5..0000000000
--- a/demos/server-components/components/stories.client.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import Story from './story.client'
-import Link from 'next/link'
-
-export default ({ stories, page = 1, offset = null }) => (
-
- {stories.map((story, i) => (
-
- {null != offset ? (
-
{i + offset + 1}
- ) : null}
-
-
-
-
- ))}
-
-
-
-
-)
diff --git a/demos/server-components/components/story.client.js b/demos/server-components/components/story.client.js
deleted file mode 100644
index b0cd14c85a..0000000000
--- a/demos/server-components/components/story.client.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useState } from 'react'
-
-import timeAgo from '../lib/time-ago'
-
-export default function Story({
- id,
- title,
- date,
- url,
- user,
- score,
- commentsCount,
-}) {
- const { host } = url ? new URL(url) : { host: '#' }
- const [voted, setVoted] = useState(false)
-
- return (
-
- )
-}
-
-const plural = (n, s) => s + (n === 0 || n > 1 ? 's' : '')
diff --git a/demos/server-components/lib/fetch-data.js b/demos/server-components/lib/fetch-data.js
deleted file mode 100644
index dc0ddc4c1f..0000000000
--- a/demos/server-components/lib/fetch-data.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export default async function fetchData(type, delay = 0) {
- const [res] = await Promise.all([
- fetch(`https://hacker-news.firebaseio.com/v0/${type}.json`),
- new Promise(res => setTimeout(res, (Math.random()) * delay))
- ])
- if (res.status !== 200) {
- throw new Error(`Status ${res.status}`)
- }
- return res.json()
-}
diff --git a/demos/server-components/lib/get-comments.js b/demos/server-components/lib/get-comments.js
deleted file mode 100644
index bd082c7694..0000000000
--- a/demos/server-components/lib/get-comments.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import fetchData from './fetch-data'
-
-// hydrate comments based on an array of item ids
-export default function fetch(ids) {
- return Promise.all(
- ids.map(async (id) => {
- const val = await fetchData(`item/${id}`)
- return {
- id: val.id,
- user: val.by,
- text: val.text,
- date: new Date(val.time * 1000).getTime() || 0,
- comments: await fetch(val.kids || []),
- commentsCount: val.descendants || 0,
- }
- })
- )
-}
diff --git a/demos/server-components/lib/get-item.js b/demos/server-components/lib/get-item.js
deleted file mode 100644
index 82bea6cefa..0000000000
--- a/demos/server-components/lib/get-item.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import fetchData from './fetch-data'
-
-export default async function (id) {
- const val = await fetchData(`item/${id}`)
- if (val) {
- return transform(val)
- } else {
- return null
- }
-}
-
-export function transform(val) {
- return {
- id: val.id,
- url: val.url || '',
- user: val.by,
- // time is seconds since epoch, not ms
- date: new Date(val.time * 1000).getTime() || 0,
- // sometimes `kids` is `undefined`
- comments: val.kids || [],
- commentsCount: val.descendants || 0,
- score: val.score,
- title: val.title,
- }
-}
diff --git a/demos/server-components/lib/get-story-ids.js b/demos/server-components/lib/get-story-ids.js
deleted file mode 100644
index 74ac2a2ffa..0000000000
--- a/demos/server-components/lib/get-story-ids.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import fetchData from './fetch-data'
-
-export default async function (
- type = 'topstories',
- { page = 1, max = 30 } = {}
-) {
- const start = max * (page - 1)
- const end = start + max
- const ids = await fetchData(type)
- return ids.slice(start, end)
-}
diff --git a/demos/server-components/lib/time-ago.js b/demos/server-components/lib/time-ago.js
deleted file mode 100644
index 4374bd02f0..0000000000
--- a/demos/server-components/lib/time-ago.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import ms from 'ms'
-
-const map = {
- s: 'seconds',
- ms: 'milliseconds',
- m: 'minutes',
- h: 'hours',
- d: 'days',
-}
-
-export default (date) =>
- date ? ms(new Date() - date).replace(/[a-z]+/, (str) => ' ' + map[str]) : ''
diff --git a/demos/server-components/lib/use-data.js b/demos/server-components/lib/use-data.js
deleted file mode 100644
index 844af5e756..0000000000
--- a/demos/server-components/lib/use-data.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const cache = {}
-
-export default function useData(key, fetcher) {
- if (!cache[key]) {
- let data
- let error
- let promise
- cache[key] = () => {
- if (error !== undefined || data !== undefined) return { data, error }
- if (!promise) {
- promise = fetcher()
- .then((r) => (data = r))
- // Convert all errors to plain string for serialization
- .catch((e) => error = e + '')
- }
- throw promise
- }
- }
- return cache[key]()
-}
diff --git a/demos/server-components/netlify.toml b/demos/server-components/netlify.toml
deleted file mode 100644
index dd5a3d1eb3..0000000000
--- a/demos/server-components/netlify.toml
+++ /dev/null
@@ -1,14 +0,0 @@
-[build]
-command = "npm run build"
-publish = ".next"
-ignore = "if [ $CACHED_COMMIT_REF == $COMMIT_REF ]; then (exit 1); else git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF ../..; fi;"
-
-[[plugins]]
-package = "@netlify/plugin-nextjs"
-
-# This is a fake plugin, that makes it run npm install
-[[plugins]]
-package = "@netlify/plugin-local-install-core"
-
-[[plugins]]
-package = "../plugin-wrapper"
diff --git a/demos/server-components/next.config.js b/demos/server-components/next.config.js
deleted file mode 100644
index 3b51fcb977..0000000000
--- a/demos/server-components/next.config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-module.exports = {
- eslint: {
- // Warning: This allows production builds to successfully complete even if
- // your project has ESLint errors.
- ignoreDuringBuilds: true,
- },
- experimental: {
- runtime: 'experimental-edge',
- serverComponents: true,
- },
-}
diff --git a/demos/server-components/package.json b/demos/server-components/package.json
deleted file mode 100644
index 74ae3e7f49..0000000000
--- a/demos/server-components/package.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
- "name": "server-components",
- "version": "1.0.0",
- "main": "index.js",
- "scripts": {
- "build": "next build",
- "ntl": "ntl-internal",
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "license": "MIT",
- "private": true,
- "dependencies": {
- "ms": "2.1.3",
- "next": "12.2.1",
- "react": "^18.0.0",
- "react-dom": "^18.0.0"
- },
- "devDependencies": {
- "@netlify/plugin-nextjs": "*",
- "@types/fs-extra": "^9.0.13",
- "@types/jest": "^27.4.1",
- "@types/node": "^17.0.25",
- "husky": "^7.0.4",
- "npm-run-all": "^4.1.5",
- "typescript": "^4.6.3"
- }
-}
diff --git a/demos/server-components/pages/csr.js b/demos/server-components/pages/csr.js
deleted file mode 100644
index c645ffc3d4..0000000000
--- a/demos/server-components/pages/csr.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Suspense, useEffect, useState } from 'react'
-
-// Client Components
-import Page from '../components/page.client'
-import Story from '../components/story.client'
-
-// Utils
-import fetchData from '../lib/fetch-data'
-import { transform } from '../lib/get-item'
-import useData from '../lib/use-data'
-import Skeletons from '../components/skeletons'
-
-function StoryWithData({ id }) {
- if (typeof window === 'undefined') return
- const { data } = useData(`s-${id}`, () =>
- fetchData(`item/${id}`).then(transform)
- )
- return
-}
-
-function NewsWithData() {
- const { data: storyIds } = useData('top', () => fetchData('topstories'))
- return (
- <>
- {storyIds.slice(0, 30).map((id) => {
- return (
- }>
-
-
- )
- })}
- >
- )
-}
-
-export default function News() {
- const [mounted, setMounted] = useState(false)
- useEffect(() => {
- setMounted(true)
- }, [])
- return (
-
- {mounted ? (
- }>
-
-
- ) : (
-
- )}
-
- )
-}
diff --git a/demos/server-components/pages/index.js b/demos/server-components/pages/index.js
deleted file mode 100644
index a581fb1192..0000000000
--- a/demos/server-components/pages/index.js
+++ /dev/null
@@ -1,92 +0,0 @@
-export default function Page() {
- return (
-
-
React Server Components in Next.js
-
Without Streaming
-
-
-
React Server Components with Streaming
-
-
-
-
-
-
- );
-}
diff --git a/demos/server-components/pages/item.server.js b/demos/server-components/pages/item.server.js
deleted file mode 100644
index a45e5691f6..0000000000
--- a/demos/server-components/pages/item.server.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import ItemPage from '../components/item.server'
-
-export default function Item({ id }) {
- return
-}
-
-export async function getServerSideProps({ query }) {
- return {
- props: {
- id: query.id
- }
- }
-}
\ No newline at end of file
diff --git a/demos/server-components/pages/rsc.server.js b/demos/server-components/pages/rsc.server.js
deleted file mode 100644
index 5b420bb7a2..0000000000
--- a/demos/server-components/pages/rsc.server.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Suspense } from 'react'
-
-// Shared Components
-import Skeletons from '../components/skeletons'
-
-// Server Components
-import SystemInfo from '../components/server-info.server'
-
-// Client Components
-import Page from '../components/page.client'
-import Story from '../components/story.client'
-import Footer from '../components/footer.client'
-import ErrorPlaceholder from '../components/error-placeholder.client'
-
-// Utils
-import fetchData from '../lib/fetch-data'
-import { transform } from '../lib/get-item'
-import useData from '../lib/use-data'
-
-function StoryWithData({ id }) {
- const { data } = useData(`s-${id}`, () =>
- fetchData(`item/${id}`).then(transform)
- )
- return
-}
-
-function NewsWithData() {
- const { data: storyIds, error } = useData('top', () =>
- fetchData('topstories')
- )
- return (
- <>
- {error ? : null}
- {storyIds
- ? storyIds.slice(0, 30).map((id) => {
- return
- })
- : null}
- >
- )
-}
-
-export default function News() {
- return (
-
- }>
-
-
-
-
-
- )
-}
-
-export const config = {
- runtime: 'experimental-edge',
-}
diff --git a/demos/server-components/pages/slow.server.js b/demos/server-components/pages/slow.server.js
deleted file mode 100644
index 18e5ec8110..0000000000
--- a/demos/server-components/pages/slow.server.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Suspense } from 'react'
-
-// Server Components
-import SystemInfo from '../components/server-info.server'
-
-// Client Components
-import Page from '../components/page.client'
-import Story from '../components/story.client'
-import Footer from '../components/footer.client'
-
-// Utils
-import fetchData from '../lib/fetch-data'
-import { transform } from '../lib/get-item'
-import useData from '../lib/use-data'
-import Skeletons from '../components/skeletons'
-
-function StoryWithData({ id }) {
- const { data } = useData(`s-${id}`, () =>
- fetchData(`item/${id}`).then(transform)
- )
- return
-}
-
-function NewsWithData() {
- const { data: storyIds } = useData('top', () => fetchData('topstories', 2000))
- return (
- <>
- {storyIds.slice(0, 30).map((id) => {
- return (
- }>
-
-
- )
- })}
- >
- )
-}
-
-export default function News() {
- return (
-
- }>
-
-
-
-
-
- )
-}
-
-export const config = {
- runtime: 'experimental-edge',
-}
diff --git a/demos/server-components/pages/ssr.js b/demos/server-components/pages/ssr.js
deleted file mode 100644
index 3e5723ba2f..0000000000
--- a/demos/server-components/pages/ssr.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Page from '../components/page.client'
-import Story from '../components/story.client'
-import Footer from '../components/footer.client'
-
-// Utils
-import fetchData from '../lib/fetch-data'
-import { transform } from '../lib/get-item'
-
-export async function getServerSideProps() {
- const storyIds = await fetchData('topstories', 2000)
- const data = await Promise.all(
- storyIds
- .slice(0, 30)
- .map((id) => fetchData(`item/${id}`).then(transform))
- )
-
- return {
- props: {
- data,
- },
- }
-}
-
-export default function News({ data }) {
- return (
-
- {data.map((item, i) => {
- return
- })}
-
-
- )
-}