+
+
+
+
+ Go back home
+
+
+ )
+}
+
+DynamicShow.getInitialProps = async ({ query }) => {
+ // Get the ID to render
+ const { id } = query
+
+ // Get the data
+ const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
+ const show = await res.json();
+
+ // Set error code if show could not be found
+ const errorCode = res.status > 200 ? res.status : false
+
+ return { errorCode, show }
+}
+
+export default DynamicShow
diff --git a/pages/getInitialProps/show.js b/pages/getInitialProps/show.js
new file mode 100644
index 0000000..0f7ddf7
--- /dev/null
+++ b/pages/getInitialProps/show.js
@@ -0,0 +1,54 @@
+import Link from 'next/link'
+
+const Show = ({ show }) => (
+ <>
+
getInitialProps: basic page
+
+ This page uses getInitialProps() to fetch a TV show from an API.
+
+
+ When navigating client-side, getInitialProps() runs on the client.
+
+ When requesting this page directly, the page is rendered server-side by a Netlify Function.
+
+
+
+
+
+ Go back home
+
+
+ )
+}
+
+export async function getServerSideProps({ params }) {
+ // Get the ID to render
+ const { slug } = params
+ const id = slug[0]
+
+ // Get the data
+ const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
+ const show = await res.json();
+
+ // Set error code if show could not be found
+ const errorCode = res.status > 200 ? res.status : false
+
+ return { props: { errorCode, show, slug } }
+}
+
+export default CatchAllShow
diff --git a/pages/getServerSideProps/[id].js b/pages/getServerSideProps/[id].js
new file mode 100644
index 0000000..9f47c7d
--- /dev/null
+++ b/pages/getServerSideProps/[id].js
@@ -0,0 +1,68 @@
+import Error from 'next/error'
+import Link from 'next/link'
+
+const DynamicShow = ({ errorCode, show }) => {
+
+ // If show was not found, render 404 page
+ if (errorCode) {
+ return
+ }
+
+ return (
+ <>
+
getServerSideProps: with dynamic routing
+
+ This page uses getServerSideProps() to fetch a TV show from an API.
+ The ID is set in the URL: /getServerSideProps/:id
+
+
+ You can change the ID to any number between 1-10000. Try it!
+
+
+
+
+
+ Go back home
+
+
+ )
+}
+
+export async function getServerSideProps({ params }) {
+ // Get the ID to render
+ const { id } = params
+
+ // Get the data
+ const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
+ const show = await res.json();
+
+ // Set error code if show could not be found
+ const errorCode = res.status > 200 ? res.status : false
+
+ return { props: { errorCode, show } }
+}
+
+export default DynamicShow
diff --git a/pages/getServerSideProps/show.js b/pages/getServerSideProps/show.js
new file mode 100644
index 0000000..9b4abab
--- /dev/null
+++ b/pages/getServerSideProps/show.js
@@ -0,0 +1,58 @@
+import Link from 'next/link'
+
+const Show = ({ show }) => (
+ <>
+
getServerSideProps: basic page
+
+ This page uses getServerSideProps() to fetch a TV show from an API.
+
+
+ getServerSideProps() never runs on the client.
+
+ When navigating client-side, getServerSideProps() runs inside a Netlify
+ Function. The resulting JSON data is used to render this page.
+
+ When requesting this page directly, the entire page is rendered
+ server-side by a Netlify Function.
+
+
+
+
+
+ Go back home
+
+
+)
+
+export async function getServerSideProps() {
+ // Get the show
+ const res = await fetch('https://api.tvmaze.com/shows/263');
+ const show = await res.json();
+
+ return { props: { show } }
+}
+
+export default Show
diff --git a/pages/getStaticProps/[...slug].js b/pages/getStaticProps/[...slug].js
new file mode 100644
index 0000000..92a0934
--- /dev/null
+++ b/pages/getStaticProps/[...slug].js
@@ -0,0 +1,109 @@
+import Link from 'next/link'
+
+const CatchAllShow = ({ show, slug }) => (
+ <>
+
getStaticProps: with catch-all routing
+
+ This page uses getStaticProps() to fetch a TV show from an API.
+ It uses catch-all routing.
+
+
+ Because the page uses catch-all routing, the list of paths are
+ pre-defined in getStaticPaths.
+
+ For this page, you can choose between one of the following pre-defined
+ paths:
+
+
+
+
+
+ Go back home
+
+
+)
+
+export async function getStaticPaths() {
+ // Define the paths we want to prerender
+ const paths = [
+ { params: { slug: ['1719', 'mr', 'bean' ] } },
+ { params: { slug: ['143', 'silicon', 'valley' ] } },
+ { params: { slug: ['490', 'star', 'trek' ] } },
+ { params: { slug: ['431', 'friends' ] } },
+ { params: { slug: ['361', 'saturday', 'night', 'live' ] } },
+ { params: { slug: ['6544', 'sesame', 'street' ] } },
+ ]
+
+ // We'll pre-render only these paths at build time.
+ // { fallback: false } means other routes should 404.
+ return { paths, fallback: false }
+}
+
+export async function getStaticProps({ params }) {
+ // Get the ID to render
+ const { slug } = params
+ const id = slug[0]
+
+ // Get the data
+ const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
+ const show = await res.json();
+
+ return { props: { show, slug } }
+}
+
+export default CatchAllShow
diff --git a/pages/getStaticProps/[id].js b/pages/getStaticProps/[id].js
new file mode 100644
index 0000000..057924d
--- /dev/null
+++ b/pages/getStaticProps/[id].js
@@ -0,0 +1,71 @@
+import Link from 'next/link'
+
+const DynamicShow = ({ show }) => (
+ <>
+
getStaticProps: with dynamic routing
+
+ This page uses getStaticProps() to fetch a TV show from an API.
+ The ID is set in the URL: /getStaticProps/:id
+
+
+ Because the page uses dynamic routing, the list of paths are pre-defined
+ in getStaticPaths.
+
+ For this page, you can change the ID to any number between 1-100. Try it!
+
+
+
+
+
+ Go back home
+
+
+)
+
+export async function getStaticPaths() {
+ // Define the paths we want to prerender
+ const paths = []
+ for(let id = 1; id <= 100; id++) {
+ paths.push({ params: { id: String(id) }})
+ }
+
+ // We'll pre-render only these paths at build time.
+ // { fallback: false } means other routes should 404.
+ return { paths, fallback: false }
+}
+
+export async function getStaticProps({ params }) {
+ // Get the ID to render
+ const { id } = params
+
+ // Get the data
+ const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
+ const show = await res.json();
+
+ return { props: { show } }
+}
+
+export default DynamicShow
diff --git a/pages/getStaticProps/show.js b/pages/getStaticProps/show.js
new file mode 100644
index 0000000..dabc114
--- /dev/null
+++ b/pages/getStaticProps/show.js
@@ -0,0 +1,57 @@
+import Link from 'next/link'
+
+const Show = ({ show }) => (
+ <>
+
getStaticProps: basic page
+
+ This page uses getStaticProps() to fetch a TV show from an API.
+
+
+ The page and the page's data are pre-rendered at build time.
+ Both are served from Netlify's super fast CDN.
+
+ When navigating client-side, the page's JSON data is loaded.
+
+ When requesting this page directly, the pre-rendered page is loaded.
+
+
+
+
+
+ Go back home
+
+
+)
+
+export async function getStaticProps() {
+ // Get the show
+ const res = await fetch('https://api.tvmaze.com/shows/151');
+ const show = await res.json();
+
+ return { props: { show } }
+}
+
+export default Show
diff --git a/pages/getStaticProps/withFallback/[id].js b/pages/getStaticProps/withFallback/[id].js
new file mode 100644
index 0000000..10a941b
--- /dev/null
+++ b/pages/getStaticProps/withFallback/[id].js
@@ -0,0 +1,96 @@
+import Error from 'next/error'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+const DynamicShow = ({ errorCode, show }) => {
+ const router = useRouter()
+
+ // On Netlify, isFallback is NEVER true. Pages for any undefined paths are
+ // always server-side-rendered.
+ // See: https://github.com/FinnWoelm/next-on-netlify#fallbacks-for-pages-with-getstaticpaths
+ if (router.isFallback) {
+ return
Loading... (This only renders when using next dev)
+ }
+
+ // If show was not found, render 404 page
+ if (errorCode) {
+ return
+ }
+
+ return (
+ <>
+
getStaticProps: with fallback: true
+
+ This page uses getStaticProps() to fetch a TV show from an API.
+ The ID is set in the URL: /getStaticProps/withFallback/:id
+
+
+ The page uses dynamic routing and some paths are pre-defined in
+ getStaticPaths (IDs 1-10).
+
+ If you request one of those pages, you will see the pre-rendered HTML
+ page.
+
+ If you load this page with any other ID (e.g., 32), the page will be
+ rendered server-side by a Netlify Function.
+
+
+
+
+
+ Go back home
+
+
+ )
+}
+
+export async function getStaticPaths() {
+ // Define the paths we want to prerender
+ const paths = []
+ for(let id = 1; id <= 10; id++) {
+ paths.push({ params: { id: String(id) }})
+ }
+
+ // We'll pre-render only these paths at build time.
+ // { fallback: true } means other routes will be server-side rendered.
+ return { paths, fallback: true }
+}
+
+export async function getStaticProps({ params }) {
+ // Get the ID to render
+ const { id } = params
+
+ // Get the data
+ const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
+ const show = await res.json();
+
+ // Set error code if show could not be found
+ const errorCode = res.status > 200 ? res.status : false
+
+ return { props: { errorCode, show } }
+}
+
+export default DynamicShow
diff --git a/pages/index.js b/pages/index.js
index 784e088..8d810e3 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,12 +1,31 @@
import Link from 'next/link'
-const Index = ({ shows }) => (
-
NextJS on Netlify: Server-Side Rendering Made Easy
This is a demo of a NextJS application with Server-Side Rendering (SSR).
@@ -24,114 +43,143 @@ const Index = ({ shows }) => (
npm package.
-
1. Server-Side Rendering Made Easy
-
- This page is server-side rendered.
-
- It fetches a random list of five TV shows
- from the TVmaze REST API.
-
- Refresh this page to see it change.
-
- Dynamic pages, introduced in NextJS 9.2, are fully supported.
-
- Click on a show to check out a server-side rendered page with dynamic
- routing (/shows/:id).
-
- next-on-netlify automatically determines which pages are dynamic and
- which ones are static.
-
- Only dynamic pages are server-side rendered.
-
- Static pages are pre-rendered and served directly by Netlify's CDN.
-
+
)
-Index.getInitialProps = async function() {
- // Set a random page between 1 and 100
- const randomPage = Math.floor(Math.random()*100) + 1
-
- // Get the data
- const res = await fetch(`https://api.tvmaze.com/shows?page=${randomPage}`);
- const data = await res.json();
-
- return { shows: data.slice(0, 5) }
-}
-
export default Index
diff --git a/pages/previewMode/[id].js b/pages/previewMode/[id].js
new file mode 100644
index 0000000..6c3407a
--- /dev/null
+++ b/pages/previewMode/[id].js
@@ -0,0 +1,122 @@
+import Error from 'next/error'
+import Link from 'next/link'
+
+const DynamicShow = ({ errorCode, object, preview }) => {
+
+ // If object was not found, render 404 page
+ if (errorCode) {
+ return
+ }
+
+ return (
+ <>
+
Preview Mode: page with preview mode
+
+ This page uses getServerSideProps() to fetch either
+ a TV show or a TV actor depending on whether preview mode is enabled.
+
+ The ID is set in the URL: /previewMode/:id
+
+
+ You can change the ID to any number between 1-10000. Try it!
+
+
+ )}
+
+
+
+
+ Go back home
+
+
+ )
+}
+
+export async function getServerSideProps({ params, preview }) {
+ // Get the ID to render
+ const { id } = params
+
+ // Set the resource to fetch, depending on whether preview mode is active
+ const resource = preview ? 'people' : 'shows'
+
+ // Get the data
+ const res = await fetch(`https://api.tvmaze.com/${resource}/${id}`);
+ const object = await res.json();
+
+ // Set error code if object could not be found
+ const errorCode = res.status > 200 ? res.status : false
+
+ return { props: { errorCode, object, preview: Boolean(preview) } }
+}
+
+export default DynamicShow
diff --git a/pages/shows/[...params].js b/pages/shows/[...params].js
deleted file mode 100644
index d489aab..0000000
--- a/pages/shows/[...params].js
+++ /dev/null
@@ -1,64 +0,0 @@
-import Error from 'next/error'
-import Link from 'next/link'
-
-const CatchAll = ({ errorCode, show, params }) => {
-
- // If show item was not found, render 404 page
- if (errorCode) {
- return
- }
-
- // Otherwise, render show
- return (
-
-
- This is a server-side rendered catch-all page. It catches all requests
- made to /shows/:id/any/path/can/go/here... and makes those parameters
- available in getInitialProps():
-
- {params.map((param, index) => (
-
- [{index}]: {param}
-
- ))}
-
- Refresh the page to see server-side rendering in action.
-
- You can also try changing the URL to something random,
- such as /shows/{show.id}/whatever/path/you/want
-
- )
-}
-
-CatchAll.getInitialProps = async ({ res: req, query }) => {
- // Get the params to render
- const { params } = query
-
- // Get the ID to render
- const id = params[0]
-
- // Get the data
- 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 { errorCode, show: data, params }
-}
-
-export default CatchAll
diff --git a/pages/shows/[id].js b/pages/shows/[id].js
deleted file mode 100644
index c724dbd..0000000
--- a/pages/shows/[id].js
+++ /dev/null
@@ -1,53 +0,0 @@
-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
- }
-
- // Otherwise, render show
- return (
-
-
- This page uses getInitialProps() to fetch the show with the ID
- provided in the URL: /shows/:id
-
- Refresh the page to see server-side rendering in action.
-
- You can also try changing the ID to any other number between 1-10000.
-
- )
-}
-
-Show.getInitialProps = async ({ res: req, query }) => {
- // Get the ID to render
- const { id } = query
-
- // Get the data
- 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 { errorCode, show: data }
-}
-
-export default Show
diff --git a/pages/static.js b/pages/static.js
deleted file mode 100644
index 53a2f3b..0000000
--- a/pages/static.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import Link from 'next/link'
-
-const Static = props => (
-
-
- This page does not use getInitialProps.
-
- It is a static page.
-
- It is never server-side rendered.
-
- It is served directly by Netlify's CDN.
-
- The next-on-netlify npm
- package takes care of deciding which pages to render server-side and which
- ones to serve directly via CDN.
-
- This page does not use getInitialProps.
-
- It is a static page.
-
- It is never server-side rendered.
-
- It is served directly by Netlify's CDN.
-
-
- But it has a dynamic URL parameter: /static/:id.
-
- Try changing the ID. It will always render this page, no matter what you
- put.
-
- I am not sure what this is useful for.
-
- But it's a feature of NextJS, so... I'm supporting it.
-
+)
+
+export default RedirectionTarget
diff --git a/patches/next-on-netlify+2.3.0.patch b/patches/next-on-netlify+2.3.0.patch
new file mode 100644
index 0000000..b3bfe59
--- /dev/null
+++ b/patches/next-on-netlify+2.3.0.patch
@@ -0,0 +1,15 @@
+diff --git a/node_modules/next-on-netlify/lib/netlifyFunctionTemplate.js b/node_modules/next-on-netlify/lib/netlifyFunctionTemplate.js
+index f9fd1ab..4e65227 100644
+--- a/node_modules/next-on-netlify/lib/netlifyFunctionTemplate.js
++++ b/node_modules/next-on-netlify/lib/netlifyFunctionTemplate.js
+@@ -24,6 +24,10 @@ const callbackHandler = callback => (
+ )
+
+ exports.handler = (event, context, callback) => {
++ // Enable base64 support
++ console.log(process.env);
++ process.env.BINARY_SUPPORT = "yes";
++
+ // In netlify dev, we currently do not receive headers as multi value headers.
+ // So we manually set them from the plain headers. This should become
+ // redundant as soon as https://github.com/netlify/cli/pull/938 is published.
diff --git a/roll.jpg b/roll.jpg
new file mode 100644
index 0000000..a437347
Binary files /dev/null and b/roll.jpg differ
+const Index = () => (
+ <>
+ 
+ 
+ 
+ 
+