From c7a3ea93451f6f18b2c47aada32b35e9851a1ea5 Mon Sep 17 00:00:00 2001
From: Matt Kane <m@mk.gg>
Date: Mon, 24 Oct 2022 12:07:23 +0100
Subject: [PATCH] chore: remove rsc demo

---
 demos/server-components/README.md             |  34 -----
 .../components/comment-form.js                |  22 ----
 demos/server-components/components/comment.js |  82 -------------
 .../components/error-placeholder.client.js    |   6 -
 .../components/footer.client.js               |  21 ----
 demos/server-components/components/header.js  |  84 -------------
 .../components/item.client.js                 |  61 ---------
 .../components/item.server.js                 |  27 ----
 demos/server-components/components/logo.js    |  17 ---
 demos/server-components/components/meta.js    | 116 ------------------
 demos/server-components/components/nav.js     |  35 ------
 .../components/page.client.js                 |  32 -----
 .../components/server-info.server.js          |   7 --
 .../server-components/components/skeletons.js |  17 ---
 demos/server-components/components/spinner.js |   3 -
 .../components/stories.client.js              |  55 ---------
 .../components/story.client.js                |  55 ---------
 demos/server-components/lib/fetch-data.js     |  10 --
 demos/server-components/lib/get-comments.js   |  18 ---
 demos/server-components/lib/get-item.js       |  25 ----
 demos/server-components/lib/get-story-ids.js  |  11 --
 demos/server-components/lib/time-ago.js       |  12 --
 demos/server-components/lib/use-data.js       |  20 ---
 demos/server-components/netlify.toml          |  14 ---
 demos/server-components/next.config.js        |  11 --
 demos/server-components/package.json          |  27 ----
 demos/server-components/pages/csr.js          |  52 --------
 demos/server-components/pages/index.js        |  92 --------------
 demos/server-components/pages/item.server.js  |  13 --
 demos/server-components/pages/rsc.server.js   |  57 ---------
 demos/server-components/pages/slow.server.js  |  53 --------
 demos/server-components/pages/ssr.js          |  33 -----
 32 files changed, 1122 deletions(-)
 delete mode 100644 demos/server-components/README.md
 delete mode 100644 demos/server-components/components/comment-form.js
 delete mode 100644 demos/server-components/components/comment.js
 delete mode 100644 demos/server-components/components/error-placeholder.client.js
 delete mode 100644 demos/server-components/components/footer.client.js
 delete mode 100644 demos/server-components/components/header.js
 delete mode 100644 demos/server-components/components/item.client.js
 delete mode 100644 demos/server-components/components/item.server.js
 delete mode 100644 demos/server-components/components/logo.js
 delete mode 100644 demos/server-components/components/meta.js
 delete mode 100644 demos/server-components/components/nav.js
 delete mode 100644 demos/server-components/components/page.client.js
 delete mode 100644 demos/server-components/components/server-info.server.js
 delete mode 100644 demos/server-components/components/skeletons.js
 delete mode 100644 demos/server-components/components/spinner.js
 delete mode 100644 demos/server-components/components/stories.client.js
 delete mode 100644 demos/server-components/components/story.client.js
 delete mode 100644 demos/server-components/lib/fetch-data.js
 delete mode 100644 demos/server-components/lib/get-comments.js
 delete mode 100644 demos/server-components/lib/get-item.js
 delete mode 100644 demos/server-components/lib/get-story-ids.js
 delete mode 100644 demos/server-components/lib/time-ago.js
 delete mode 100644 demos/server-components/lib/use-data.js
 delete mode 100644 demos/server-components/netlify.toml
 delete mode 100644 demos/server-components/next.config.js
 delete mode 100644 demos/server-components/package.json
 delete mode 100644 demos/server-components/pages/csr.js
 delete mode 100644 demos/server-components/pages/index.js
 delete mode 100644 demos/server-components/pages/item.server.js
 delete mode 100644 demos/server-components/pages/rsc.server.js
 delete mode 100644 demos/server-components/pages/slow.server.js
 delete mode 100644 demos/server-components/pages/ssr.js

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 () => (
-  <div>
-    <style jsx>{`
-      textarea {
-        width: 400px;
-        height: 100px;
-        display: block;
-        margin-bottom: 10px;
-      }
-      button {
-        padding: 3px 4px;
-      }
-      @media (max-width: 750px) {
-        textarea {
-          width: 100%;
-        }
-      }
-    `}</style>
-    <textarea />
-    <button>add comment</button>
-  </div>
-)
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 (
-      <div className="comment">
-        <div className="meta">
-          {/* TODO: time hydration mismatch */}
-          {user} {timeAgo(new Date(date))} ago{' '}
-          <span onClick={this.toggle} className="toggle">
-            {this.state.toggled
-              ? `[+${(this.props.commentsCount || 0) + 1}]`
-              : '[-]'}
-          </span>
-        </div>
-
-        {this.state.toggled
-          ? null
-          : [
-              <div
-                key="text"
-                className="text"
-                dangerouslySetInnerHTML={{ __html: text }}
-              />,
-              <div key="children" className="children">
-                {comments.map((comment) => (
-                  <Comment key={comment.id} {...comment} />
-                ))}
-              </div>,
-            ]}
-
-        <style jsx>{`
-          .comment {
-            padding-top: 15px;
-          }
-          .children {
-            padding-left: 20px;
-          }
-          .meta {
-            font-size: 12px;
-            margin-bottom: 5px;
-          }
-          .toggle {
-            cursor: pointer;
-          }
-          .text {
-            color: #000;
-            font-size: 13px;
-            line-height: 18px;
-          }
-          /* hn styles */
-          .text :global(p) {
-            margin-top: 10px;
-          }
-          .text :global(pre) {
-            margin-bottom: 10px;
-            max-width: 900px;
-            overflow: auto;
-            padding: 2px;
-            white-space: pre-wrap;
-          }
-          .text :global(a) {
-            color: #000;
-          }
-        `}</style>
-      </div>
-    )
-  }
-
-  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 <span>{`Application error: a server-side exception has occurred`}</span>
-}
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 (
-    <div>
-      <footer className="footer">
-        Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC |
-        Contact
-      </footer>
-
-      <style jsx>{`
-      .footer {
-        padding: 10px 0 40px;
-        color: #ccc;
-        font-size: 14px;
-        text-align: center;
-        border-top: 1px solid;
-        margin-top: 50px;
-      }
-    `}</style>
-    </div>
-  )
-}
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 (
-    <>
-      <style jsx>
-        {`
-  header {
-    background: #ffa52a;
-    display: flex;
-    font-size: 14px;
-  }
-  .logo {
-    margin: 4px 5px 2px 4px;
-    display: inline-block;
-  }
-  .left {
-    flex: 9;
-  }
-  .right {
-    flex: 1;
-    text-align: right;
-  }
-  .site-title {
-    font-weight: bold;
-    display: inline-block;
-    font-size: 14px;
-    text-decoration: none;
-    padding: 8px 10px 8px 4px;
-    color: #000;
-    vertical-align: top;
-  }
-  a.login {
-    padding: 10px;
-    display: inline-block;
-    font-size: 11px;
-    text-transform: uppercase;
-    text-decoration: none;
-    color: #000;
-  }
-  .login:hover {
-    color: #fff;
-  }
-  .nav {
-    display: inline-block;
-    vertical-align: top;
-  }
-  @media (max-width: 750px) {
-    .site-title {
-      font-size: 16px;
-      padding-bottom: 0;
-    }
-    a.login {
-      padding: 24px 10px 23px;
-    }
-    .nav {
-      display: block;
-    }
-  }
-`}
- </style>
-      <header>
-        <div className="left">
-          <Link href="/">
-            <a>
-              <span className="logo">
-                <Logo />
-              </span>
-              <span className="site-title">Hacker Next</span>
-            </a>
-          </Link>
-          <div className="nav">
-            <Nav />
-          </div>
-        </div>
-        <div className="right">
-          <a href="/login" className="login">login</a>
-        </div>
-      </header>
-    </>
-  )
-}
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 <div className="loading">No Comments</div>
-  const { data: comments } = useData(`comments/${story.id}`, () => getComments(story.comments))
-  return (
-    <div className="comments">
-      {(comments || []).map((comment) => (
-        <Comment key={comment.id} {...comment} />
-      ))}
-    </div>
-  )
-}
-
-export default function Item({ story }) {
-  return (
-    <div className="item">
-      <style jsx>{`
-        .item {
-          padding: 10px 29px;
-        }
-        .form {
-          padding: 15px 0;
-        }
-        .loading {
-          font-size: 13px;
-        }
-        .comments {
-          padding: 10px 0 20px;
-        }
-        @media (max-width: 750px) {
-          .item {
-            padding: 8px 0px;
-          }
-        }
-      `}</style>
-      <Story {...story} />
-
-      <div className="form">
-        <CommentForm />
-      </div>
-
-      <Suspense
-        fallback={
-          <div>
-            {`Loading comments...`}
-            <Skeletons count={3} />
-          </div>
-        }
-      >
-        <Comments story={story} />
-      </Suspense>
-    </div>
-  )
-}
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 <Skeletons count={3} />
-  return (
-    <Item story={story} />
-  )
-}
-
-export default function ItemPage({ id }) {
-  if (!id) return null
-
-  return (
-    <Page>
-      <Suspense fallback={<Skeletons count={10} />}>
-        <ItemPageWithData id={id} />
-      </Suspense>
-    </Page>
-  )
-}
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 (
-    <>
-      <span className="logo-n">N</span>
-      <style jsx>{`
-      .logo-n {
-        border: 1px solid #fff;
-        display: inline-block;
-        color: #fff;
-        font-weight: bold;
-        font-size: 11px;
-        padding: 5px 8px;
-      }
-    `}</style>
-    </>
-  )
-}
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 (
-    <div>
-      <Head>
-        <meta name='viewport' content='width=device-width, initial-scale=1' />
-        <meta charSet='utf-8' />
-      </Head>
-      <style jsx global>{`
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-          'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-          'Helvetica Neue', sans-serif;
-        background: #eee;
-      }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      .spinner {
-        margin: 12px;
-        width: 28px;
-        height: 28px;
-        animation: spinner-rotating 1.2s infinite;
-        animation-timing-function: steps(12, end);
-      }
-      .spinner:before {
-        content: '';
-        display: block;
-        width: 4px;
-        height: 4px;
-        margin: 0;
-        margin-left: 12px;
-        border-radius: 50%;
-        background: #888;
-        color: #ccc;
-        box-shadow:
-          6px 1.61px,
-          10.39px 6px,
-          12px 12px,
-          10.39px 18px,
-          6px 22.39px,
-          0 24px,
-          -6px 1.61px #999,
-          -10.39px 6px #aaa,
-          -12px 12px #bbb,
-          -10.39px 18px,
-          -6px 22.39px;
-      }
-      @keyframes spinner-rotating {
-        from { transform: rotate(0deg) }
-        to { transform: rotate(360deg) }
-      }
-      .title {
-        font-size: 15px;
-        margin-bottom: 3px;
-      }
-      .title > a {
-        color: #000;
-        text-decoration: none;
-      }
-      .title > a:visited {
-        color: #828282;
-      }
-      .meta {
-        font-size: 12px;
-      }
-      .source {
-        font-size: 12px;
-        display: inline-block;
-        margin-left: 5px;
-      }
-      .source a,
-      .meta a {
-        color: #828282;
-        text-decoration: none;
-      }
-      .source a:hover,
-      .meta a:hover {
-        text-decoration: underline;
-      }
-      .item-skeleton {
-        margin: 5px 0;
-        overflow: hidden;
-      }
-      .item-skeleton:before, .item-skeleton:after {
-        content: '';
-        display: block;
-        width: 350px;
-        max-width: 100%;
-        height: 16px;
-        background: #eee;
-        margin: 6px 0 2px;
-        background-image: linear-gradient(270deg, #ccc, #eee, #eee, #ccc);
-        background-size: 400% 100%;
-        animation: highlight-rotating 8s ease infinite;
-      }
-      .item-skeleton:after {
-        width: 250px;
-        height: 10px;
-        margin: 5px 0;
-      }
-      @keyframes highlight-rotating {
-        from {
-          background-position: 200% 0;
-        }
-        to {
-          background-position: -200% 0;
-        }
-      }
-    `}</style>
-    </div>
-  )
-}
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() {
-  ;<ul className="nav-ul">
-    <Item href="/newest">new</Item>
-    <Item href="/show">show</Item>
-    <Item href="/ask">ask</Item>
-    <Item href="/jobs">jobs</Item>
-    <Item href="/submit">submit</Item>
-
-    <style jsx>{`
-      .nav-ul {
-        list-style-type: none;
-      }
-      .nav-ul li {
-        display: inline-block;
-      }
-      .nav-ul li a {
-        display: inline-block;
-        padding: 10px;
-        font-size: 11px;
-        text-transform: uppercase;
-        text-decoration: none;
-        color: #000;
-      }
-      .nav-ul li a:hover {
-        color: #fff;
-      }
-    `}</style>
-  </ul>
-}
-
-const Item = ({ href, children }) => (
-  <li>
-    <a href={href}>{children}</a>
-  </li>
-)
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 (
-    <>
-      <style jsx global>{`
-    .main {
-      width: 85%;
-      margin: auto;
-      padding: 10px 0 0 0;
-    }
-    .page {
-      color: #828282;
-      background: #fff;
-      padding: 3px 10px;
-    }
-    @media (max-width: 750px) {
-      .main {
-        padding: 0;
-        width: auto;
-      }
-    }
-  `}</style>
-      <div className="main">
-        <Meta />
-        <Header />
-        <div className="page">{children}</div>
-      </div>
-    </>
-  )
-}
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 (
-    <div style={{ textAlign: 'center', fontSize: 14, paddingBottom: 20 }}>
-      Rendered at {new Date().toTimeString()} with Edge Middleware.
-    </div>
-  )
-}
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 (
-    <div>
-      {Array(count)
-        .fill(0)
-        .map((_, index) => (
-          <Skeleton key={index} />
-        ))
-      }
-    </div>
-  )
-}
-
-function Skeleton() {
-  return <div className='item-skeleton' />
-}
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 <div className="spinner" />;
-}
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 }) => (
-  <div>
-    {stories.map((story, i) => (
-      <div key={story.id} className="item">
-        {null != offset ? (
-          <span className="count">{i + offset + 1}</span>
-        ) : null}
-        <div className="story">
-          <Story {...story} />
-        </div>
-      </div>
-    ))}
-    <footer className="footer">
-      <Link prefetch href={`/news?p=${page + 1}`}>
-        <a>More</a>
-      </Link>
-    </footer>
-
-    <style jsx>{`
-      .item {
-        display: flex;
-        margin: 10px 0;
-      }
-      .count {
-        flex-basis: auto;
-        flex-grow: 1;
-        vertical-align: top;
-        font-size: 14px;
-        padding-right: 5px;
-        display: block;
-        width: 20px;
-        text-align: right;
-      }
-      .count::after {
-        content: '.';
-      }
-      .story {
-        flex: 100;
-        display: inline-block;
-      }
-      .footer {
-        padding: 10px 0 40px 30px;
-      }
-      .footer a {
-        color: #000;
-        font-size: 14px;
-        display: inline-block;
-        text-decoration: none;
-      }
-    `}</style>
-  </div>
-)
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 (
-    <div style={{ margin: '5px 0' }}>
-      <div className="title">
-        <span
-          style={{
-            cursor: 'pointer',
-            fontFamily: 'sans-serif',
-            marginRight: 5,
-            color: voted ? '#ffa52a' : '#ccc',
-          }}
-          onClick={() => setVoted(!voted)}
-        >
-          &#9650;
-        </span>
-        <a href={url}>{title}</a>
-        {url && (
-          <span className="source">
-            <a href={`http://${host}`}>{host.replace(/^www\./, '')}</a>
-          </span>
-        )}
-      </div>
-      <div className="meta">
-        {score} {plural(score, 'point')} by{' '}
-        <a href={`/user?id=${user}`}>
-          {user}
-        </a>{' '}
-        <a href={`/item?id=${id}`}>
-          {timeAgo(new Date(date)) /* note: we re-hydrate due to ssr */} ago
-        </a>{' '}
-        |{' '}
-        <a href={`/item?id=${id}`}>
-          {commentsCount} {plural(commentsCount, 'comment')}
-        </a>
-      </div>
-    </div>
-  )
-}
-
-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 <Skeletons />
-  const { data } = useData(`s-${id}`, () =>
-    fetchData(`item/${id}`).then(transform)
-  )
-  return <Story {...data} />
-}
-
-function NewsWithData() {
-  const { data: storyIds } = useData('top', () => fetchData('topstories'))
-  return (
-    <>
-      {storyIds.slice(0, 30).map((id) => {
-        return (
-          <Suspense key={id} fallback={<Skeletons />}>
-            <StoryWithData id={id} />
-          </Suspense>
-        )
-      })}
-    </>
-  )
-}
-
-export default function News() {
-  const [mounted, setMounted] = useState(false)
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-  return (
-    <Page>
-      {mounted ? (
-        <Suspense fallback={<Skeletons />}>
-          <NewsWithData />
-        </Suspense>
-      ) : (
-        <Skeletons />
-      )}
-    </Page>
-  )
-}
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 (
-    <div className="container">
-      <h1>React Server Components in Next.js</h1>
-      <h2>Without Streaming</h2>
-      <section>
-        <a href="/csr" target="_blank">
-          Static + Client Side Data Fetching
-        </a>
-      </section>
-      <section>
-        <a href="/ssr" target="_blank">
-          🐌 SSR with API Delays
-        </a>
-      </section>
-      <h2>React Server Components with Streaming</h2>
-      <section>
-        <a href="/rsc" target="_blank">
-          RSC + HTTP Streaming
-        </a>
-      </section>
-      <section>
-        <a href="/slow" target="_blank">
-          🐌 RSC with API Delays + HTTP Streaming
-        </a>
-      </section>
-      <br />
-      <section>
-        <p>
-          <small>
-            This demo is built with Next.js and React Server Components. Read
-            about our blog post here:{" "}
-            <a href="https://nextjs.org/blog/next-12" target="_blank">
-              Next.js 12
-            </a>
-            .
-          </small>
-        </p>
-        <p>
-          <small>
-            Check out the code:{" "}
-            <a href="https://github.com/vercel/next-rsc-demo" target="_blank">
-              https://github.com/vercel/next-rsc-demo
-            </a>
-          </small>
-        </p>
-      </section>
-      <style jsx global>{`
-            html {
-              height: 100%;
-            }
-            body {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              height: 100%;
-              margin: 0;
-              padding: 20px 20px 80px;
-              box-sizing: border-box;
-              color: #333;
-              -webkit-font-smoothing: antialiased;
-              font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-            }
-            h1 {
-              font-size: 2em;
-            }
-            h2 {
-              font-size: 1.4em;
-              margin-top: 2em;
-            }
-            .container {
-              font-size: 20px;
-              text-align: center;
-            }
-            small {
-              font-size: .8em;
-            }
-            p {
-              margin: 10px;
-            }
-            section {
-              display: block;
-              margin: 5px 0;
-              text-underline-position: from-font;
-            }
-            section a {
-              color: #1386ff;
-            }`
-        }</style>
-    </div>
-  );
-}
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 <ItemPage id={id} />
-}
-
-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 <Story {...data} />
-}
-
-function NewsWithData() {
-  const { data: storyIds, error } = useData('top', () =>
-    fetchData('topstories')
-  )
-  return (
-    <>
-      {error ? <ErrorPlaceholder error={error} /> : null}
-      {storyIds
-        ? storyIds.slice(0, 30).map((id) => {
-            return <StoryWithData id={id} key={id} />
-          })
-        : null}
-    </>
-  )
-}
-
-export default function News() {
-  return (
-    <Page>
-      <Suspense fallback={<Skeletons />}>
-        <NewsWithData />
-      </Suspense>
-      <Footer />
-      <SystemInfo />
-    </Page>
-  )
-}
-
-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 <Story {...data} />
-}
-
-function NewsWithData() {
-  const { data: storyIds } = useData('top', () => fetchData('topstories', 2000))
-  return (
-    <>
-      {storyIds.slice(0, 30).map((id) => {
-        return (
-          <Suspense key={id} fallback={<Skeletons />}>
-            <StoryWithData id={id} />
-          </Suspense>
-        )
-      })}
-    </>
-  )
-}
-
-export default function News() {
-  return (
-    <Page>
-      <Suspense fallback={<Skeletons />}>
-        <NewsWithData />
-      </Suspense>
-      <Footer />
-      <SystemInfo />
-    </Page>
-  )
-}
-
-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 (
-    <Page>
-      {data.map((item, i) => {
-        return <Story key={i} {...item} />
-      })}
-      <Footer />
-    </Page>
-  )
-}