opennextjs · ascorbic · Jun 10, 2021 · Jun 9, 2021 · Jun 9, 2021
diff --git a/.netlify/state.json b/.netlify/state.json
@@ -0,0 +1,3 @@
+{
+	"siteId": "b7ec5732-32dc-4d00-9108-051d100b6d2e"
+}
diff --git a/demo/.gitignore b/demo/.gitignore
@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+netlify/functions
+.netlify/functions
+.netlify/cache
diff --git a/demo/README.md b/demo/README.md
@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/demo/components/Header.js b/demo/components/Header.js
@@ -0,0 +1,3 @@
+export default function Header() {
+  return <h1>header</h1>
+}
diff --git a/demo/netlify.toml b/demo/netlify.toml
@@ -0,0 +1,11 @@
+[build]
+command = "npm run build"
+publish = "out/"
+# Build for updates outside of the site
+ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF .."
+
+[[plugins]]
+package = ".."
+
+[[plugins]]
+package = "@netlify/plugin-local-install-core"
diff --git a/demo/next.config.js b/demo/next.config.js
@@ -0,0 +1,5 @@
+
+            module.exports = {
+              target: 'serverless'
+            }
+
diff --git a/demo/package.json b/demo/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "10.2.3",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  }
+}
diff --git a/demo/pages/_app.js b/demo/pages/_app.js
@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp
diff --git a/demo/pages/api/hello-background.js b/demo/pages/api/hello-background.js
@@ -0,0 +1,5 @@
+export default (req, res) => {
+  res.setHeader('Content-Type', 'application/json')
+  res.status(200)
+  res.json({ message: 'hello world :)' })
+}
diff --git a/demo/pages/api/hello.js b/demo/pages/api/hello.js
@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default (req, res) => {
+  res.status(200).json({ name: 'John Doe' })
+}
diff --git a/demo/pages/api/shows/[...params].js b/demo/pages/api/shows/[...params].js
@@ -0,0 +1,26 @@
+export default async (req, res) => {
+  // Respond with JSON
+  res.setHeader('Content-Type', 'application/json')
+
+  // Get the params and query string parameters
+  const { query } = req
+  const { params, ...queryStringParams } = query
+
+  // Get the ID of the show
+  const id = params[0]
+
+  // Get the data
+  const fetchRes = await fetch(`https://api.tvmaze.com/shows/${id}`)
+  const data = await fetchRes.json()
+
+  // If show was found, return it
+  if (fetchRes.status == 200) {
+    res.status(200)
+    res.json({ params, queryStringParams, show: data })
+  }
+  // If show was not found, return error
+  else {
+    res.status(404)
+    res.json({ error: 'Show not found' })
+  }
+}
diff --git a/demo/pages/api/shows/[id].js b/demo/pages/api/shows/[id].js
@@ -0,0 +1,23 @@
+export default async (req, res) => {
+  // Respond with JSON
+  res.setHeader('Content-Type', 'application/json')
+
+  // Get the ID of the show
+  const { query } = req
+  const { id } = query
+
+  // Get the data
+  const fetchRes = await fetch(`https://api.tvmaze.com/shows/${id}`)
+  const data = await fetchRes.json()
+
+  // If show was found, return it
+  if (fetchRes.status == 200) {
+    res.status(200)
+    res.json({ show: data })
+  }
+  // If show was not found, return error
+  else {
+    res.status(404)
+    res.json({ error: 'Show not found' })
+  }
+}
diff --git a/demo/pages/deep/import.js b/demo/pages/deep/import.js
@@ -0,0 +1,40 @@
+import Link from 'next/link'
+import dynamic from 'next/dynamic'
+const Header = dynamic(() => import(/* webpackChunkName: 'header' */ '../../components/Header'), { ssr: true })
+
+const Show = ({ show }) => (
+  <div>
+    <Header />
+    <p>
+      This page uses getInitialProps() to fetch the show with the ID provided in the URL: /shows/:id
+      <br />
+      Refresh the page to see server-side rendering in action.
+      <br />
+      You can also try changing the ID to any other number between 1-10000.
+    </p>
+
+    <hr />
+
+    <h1>Show #{show.id}</h1>
+    <p>{show.name}</p>
+
+    <hr />
+
+    <Link href="/">
+      <a>Go back home</a>
+    </Link>
+  </div>
+)
+
+export const getServerSideProps = async ({ params }) => {
+  const res = await fetch('https://api.tvmaze.com/shows/42')
+  const data = await res.json()
+
+  return {
+    props: {
+      show: data,
+    },
+  }
+}
+
+export default Show
diff --git a/demo/pages/getServerSideProps/[id].js b/demo/pages/getServerSideProps/[id].js
@@ -0,0 +1,53 @@
+import Error from 'next/error'
+import Link from 'next/link'
+
+const Show = ({ errorCode, show }) => {
+  // If show item was not found, render 404 page
+  if (errorCode) {
+    return <Error statusCode={errorCode} />
+  }
+
+  // Otherwise, render show
+  return (
+    <div>
+      <p>
+        This page uses getInitialProps() to fetch the show with the ID provided in the URL: /shows/:id
+        <br />
+        Refresh the page to see server-side rendering in action.
+        <br />
+        You can also try changing the ID to any other number between 1-10000.
+      </p>
+
+      <hr />
+
+      <h1>Show #{show.id}</h1>
+      <p>{show.name}</p>
+
+      <hr />
+
+      <Link href="/">
+        <a>Go back home</a>
+      </Link>
+    </div>
+  )
+}
+
+export const getServerSideProps = async ({ params }) => {
+  // The ID to render
+  const { id } = params
+
+  const res = await fetch(`https://api.tvmaze.com/shows/${id}`)
+  const data = await res.json()
+
+  // Set error code if show item could not be found
+  const errorCode = res.status > 200 ? res.status : false
+
+  return {
+    props: {
+      errorCode,
+      show: data,
+    },
+  }
+}
+
+export default Show
diff --git a/demo/pages/getServerSideProps/all/[[...slug]].js b/demo/pages/getServerSideProps/all/[[...slug]].js
@@ -0,0 +1,53 @@
+import Error from 'next/error'
+import Link from 'next/link'
+
+const Show = ({ errorCode, show }) => {
+  // If show item was not found, render 404 page
+  if (errorCode) {
+    return <Error statusCode={errorCode} />
+  }
+
+  // Otherwise, render show
+  return (
+    <div>
+      <p>
+        This page uses getInitialProps() to fetch the show with the ID provided in the URL: /shows/:id
+        <br />
+        Refresh the page to see server-side rendering in action.
+        <br />
+        You can also try changing the ID to any other number between 1-10000.
+      </p>
+
+      <hr />
+
+      <h1>Show #{show.id}</h1>
+      <p>{show.name}</p>
+
+      <hr />
+
+      <Link href="/">
+        <a>Go back home</a>
+      </Link>
+    </div>
+  )
+}
+
+export const getServerSideProps = async ({ params }) => {
+  // The ID to render
+  const { slug } = params
+
+  const res = await fetch(`https://api.tvmaze.com/shows/${slug[0]}`)
+  const data = await res.json()
+
+  // Set error code if show item could not be found
+  const errorCode = res.status > 200 ? res.status : false
+
+  return {
+    props: {
+      errorCode,
+      show: data,
+    },
+  }
+}
+
+export default Show
diff --git a/demo/pages/getServerSideProps/static.js b/demo/pages/getServerSideProps/static.js
@@ -0,0 +1,37 @@
+import Link from 'next/link'
+
+const Show = ({ show }) => (
+  <div>
+    <p>
+      This page uses getInitialProps() to fetch the show with the ID provided in the URL: /shows/:id
+      <br />
+      Refresh the page to see server-side rendering in action.
+      <br />
+      You can also try changing the ID to any other number between 1-10000.
+    </p>
+
+    <hr />
+
+    <h1>Show #{show.id}</h1>
+    <p>{show.name}</p>
+
+    <hr />
+
+    <Link href="/">
+      <a>Go back home</a>
+    </Link>
+  </div>
+)
+
+export const getServerSideProps = async ({ params }) => {
+  const res = await fetch('https://api.tvmaze.com/shows/42')
+  const data = await res.json()
+
+  return {
+    props: {
+      show: data,
+    },
+  }
+}
+
+export default Show