"isomorphic-unfetch": "^3.0.0",

import fetch from 'isomorphic-unfetch'

import Link from 'next/link'

const Index = ({ shows }) => (

<div>

<img

src="/next-on-netlify.png" alt="NextJS on Netlify Banner"

style={{ maxWidth: '100%' }}/>

<h1>NextJS on Netlify</h1>

<p>

This is a demo of a NextJS application with Server-Side Rendering (SSR).

<br/>

It is hosted on Netlify.

<br/>

Server-side rendering is handled by Netlify Functions.

<br/>

Minimal configuration is required.<br/>

Everything is handled by the

{' '}

<a href="https://www.npmjs.com/package/next-on-netlify">

next-on-netlify

</a>

{' '}

npm package.

</p>

<hr/>

<p>

This page is server-side rendered.

<br/>

It fetches a random list of five TV shows

from the TVmaze REST API.

<br/>

Refresh this page to see it change.

</p>

<h3>TV Shows</h3>

<ul>

{shows.map(({ id, name }) => (

<li key={id}>

<Link href="/shows/[id]" as={`/shows/${id}`}>

<a>#{id}: {name}</a>

</Link>

</li>

))}

</ul>

<p>

Click on a show to check out a server-side rendered page with dynamic

routing (/shows/:id).

<br/>

<br/>

Or check out one of these other pages:

</p>

<ul>

<li>

<Link href="/static">

<a>Static NextJS page: /static</a>

</Link>

</li>

<li>

<Link href="/static/[id]" as="/static/123456789">

<a>Static NextJS page with dynamic routing: /static/:id</a>

</Link>

</li>

</ul>

<p>

Or check out the

{' '}

<a href="https://github.com/FinnWoelm/next-on-netlify-demo">

source code on GitHub

</a>.

</p>

</div>

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

import fetch from 'isomorphic-unfetch'

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>

)

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

import Link from 'next/link'

const Static = props => (

<div>

<p>

This page does not use getInitialProps.

<br/>

It is a static page.

<br/>

It is never server-side rendered.

<br/>

It is served directly by Netlify's CDN.

<br/>

The <a href="https://www.npmjs.com/package/next-on-netlify">next-on-netlify</a> npm

package takes care of deciding which pages to render server-side and which

ones to serve directly via CDN.

</p>

<hr/>

<Link href="/">

<a>Go back home</a>

</Link>

</div>

export default Static

import Link from 'next/link'

const StaticWithID = props => (

<div>

<p>

This page does not use getInitialProps.

<br/>

It is a static page.

<br/>

It is never server-side rendered.

<br/>

It is served directly by Netlify's CDN.

<br/>

<br/>

But it has a dynamic URL parameter: /static/:id.

<br/>

Try changing the ID. It will always render this page, no matter what you

put.

<br/>

I am not sure what this is useful for.

<br/>

But it's a feature of NextJS, so... I'm supporting it.

</p>

<hr/>

<Link href="/">

<a>Go back home</a>

</Link>

</div>

export default StaticWithID