Skip to content

Commit 4ffddca

Browse files
FinnWoelmFinnWoelm
committed
Add examples for GIP, GSSP, GSP, API, and preview mode
Completely rewrite the demo page, showcasing the features of next-on-netlify v2: basic and dynamic routing for getInitialProps, getServerSideProps, getStaticProps, API endpoints, and preview mode.
1 parent 5be1b79 commit 4ffddca

File tree

27 files changed

+1161
-257
lines changed

27 files changed

+1161
-257
lines changed

‎package-lock.json‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,8 @@
1010
"next-on-netlify": "^2.0.0",
1111
"react": "^16.13.1",
1212
"react-dom": "^16.13.1"
13+
},
14+
"devDependencies": {
15+
"buffer-loader": "^0.1.0"
1316
}
1417
}

‎pages/api/[...slug].js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
export default async (req, res) => {
2+
// Get the ID to show
3+
const { query } = req
4+
const { slug } = query
5+
const id = slug[0]
6+
7+
// Get the data
8+
const fetchRes = await fetch(`https://api.tvmaze.com/shows/${id}`);
9+
const show = await fetchRes.json();
10+
11+
// Show could not be found
12+
if(fetchRes.status > 200) {
13+
res.status(404)
14+
res.json({
15+
error: 'Show could not be found :('
16+
})
17+
return
18+
}
19+
20+
res.status(200)
21+
res.json({
22+
title: 'API route: catch-all endpoint',
23+
description: 'This endpoint fetches a TV show from an external API. ' +
24+
'It is a catch-all endpoint. ' +
25+
'The first URL parameter determines the ID of the show to fetch. ' +
26+
'You can change the URL to anything else, such as /api/1871/whatever/path/you/want',
27+
slug: slug,
28+
viewCode: 'https://github.com/FinnWoelm/next-on-netlify-demo/tree/master/pages/api/[...slug].js',
29+
goHome: 'https://next-on.netlify.app',
30+
show: {
31+
id: show.id,
32+
name: show.name,
33+
type: show.type,
34+
language: show.language,
35+
status: show.status,
36+
premiered: show.premiered,
37+
officialSite: show.officialSite,
38+
averageRating: show.rating?.average
39+
}
40+
})
41+
}

‎pages/api/[id].js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
export default async (req, res) => {
2+
// Get the ID to show
3+
const { query } = req
4+
const { id } = query
5+
6+
// Get the data
7+
const fetchRes = await fetch(`https://api.tvmaze.com/shows/${id}`);
8+
const show = await fetchRes.json();
9+
10+
// Show could not be found
11+
if(fetchRes.status > 200) {
12+
res.status(404)
13+
res.json({
14+
error: 'Show could not be found :('
15+
})
16+
return
17+
}
18+
19+
res.status(200)
20+
res.json({
21+
title: 'API route: dynamic endpoint',
22+
description: 'This endpoint fetches a TV show from an external API. ' +
23+
'The ID is set in the URL: /api/:id. ' +
24+
'You can change the ID to any number between 1-10000. Try it!',
25+
viewCode: 'https://github.com/FinnWoelm/next-on-netlify-demo/tree/master/pages/api/[id].js',
26+
goHome: 'https://next-on.netlify.app',
27+
show: {
28+
id: show.id,
29+
name: show.name,
30+
type: show.type,
31+
language: show.language,
32+
status: show.status,
33+
premiered: show.premiered,
34+
officialSite: show.officialSite,
35+
averageRating: show.rating?.average
36+
}
37+
})
38+
}

‎pages/api/enterPreview/[id].js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default (req, res) => {
2+
// Get the ID to redirect to
3+
const { query } = req
4+
const { id } = query
5+
6+
// Enable Preview Mode by setting preview mode cookies
7+
res.setPreviewData({})
8+
9+
// Redirect to a page with support for preview mode
10+
res.writeHead(307, { Location: `/previewMode/${id}` })
11+
res.end()
12+
}

‎pages/api/exitPreview/[id].js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default (req, res) => {
2+
// Get the ID to redirect to
3+
const { query } = req
4+
const { id } = query
5+
6+
// Clear the preview mode cookies.
7+
// This function accepts no arguments.
8+
res.clearPreviewData()
9+
10+
// Redirect to a page with support for preview mode
11+
res.writeHead(307, { Location: `/previewMode/${id}` })
12+
res.end()
13+
}

‎pages/api/redirect.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export default (req, res) => {
2+
res.writeHead(307, { Location: '/you-have-been-redirected' })
3+
res.end()
4+
}

‎pages/api/show.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export default (req, res) => {
2+
res.status(200)
3+
res.json({
4+
title: 'API route: basic endpoint',
5+
description: 'API endpoints are handled by Netlify Functions. ' +
6+
'You can run all sorts of code and return all sorts of responses. ' +
7+
'This one simply returns some JSON.',
8+
viewCode: 'https://github.com/FinnWoelm/next-on-netlify-demo/tree/master/pages/api/show.js',
9+
goHome: 'https://next-on.netlify.app'
10+
})
11+
}

‎pages/api/xml.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default (req, res) => {
2+
res.status(200)
3+
res.setHeader('Content-Type', 'application/xml')
4+
res.send(
5+
`<?xml version="1.0" encoding="UTF-8"?>
6+
<root>
7+
<title>API route: with content-type XML</title>
8+
<description>API endpoints are handled by Netlify Functions. This one returns XML.</description>
9+
<view_code>https://github.com/FinnWoelm/next-on-netlify-demo/tree/master/pages/api/xml.js</view_code>
10+
<go_home>https://next-on.netlify.app</go_home>
11+
</root>`
12+
)
13+
}

‎pages/getInitialProps/[...slug].js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import Error from 'next/error'
2+
import Link from 'next/link'
3+
4+
const CatchAllShow = ({ errorCode, show, slug }) => {
5+
6+
// If show was not found, render 404 page
7+
if (errorCode) {
8+
return <Error statusCode={errorCode} />
9+
}
10+
11+
// Otherwise, render the page
12+
return (
13+
<>
14+
<h1>getInitialProps: with catch-all routing</h1>
15+
<p>
16+
This page uses getInitialProps() to fetch a TV show from an API.<br/>
17+
It uses catch-all routing.
18+
</p>
19+
<p>
20+
URL parameters are made available in getInitialProps:
21+
<br/>
22+
{slug.map((item, index) => (
23+
<span key={index}>
24+
[{index}]: {item}<br/>
25+
</span>
26+
))}
27+
</p>
28+
<p>
29+
The first URL parameter determines the ID of the TV show to fetch.
30+
</p>
31+
<p>
32+
You can change the URL to anything else, such as /getInitialProps/1871/whatever/path/you/want. Try it!
33+
</p>
34+
<a
35+
href="https://github.com/FinnWoelm/next-on-netlify-demo/tree/master/pages/getInitialProps/[...slug].js"
36+
target="_blank">
37+
View code on GitHub
38+
</a>
39+
40+
<hr/>
41+
42+
<h2>Show #{show.id}: {show.name}</h2>
43+
<a
44+
href={`https://api.tvmaze.com/shows/${show.id}`}
45+
target='_blank'>
46+
https://api.tvmaze.com/shows/{show.id}
47+
</a>
48+
49+
<p>
50+
Type: {show.type} <br/>
51+
Language: {show.language} <br/>
52+
Status: {show.status} <br/>
53+
Premiered: {show.premiered} <br/>
54+
Official Site: {show.officialSite} <br/>
55+
Rating (average): {show.rating?.average}
56+
</p>
57+
58+
<hr/>
59+
60+
<Link href="/">
61+
<a>Go back home</a>
62+
</Link>
63+
</>
64+
)
65+
}
66+
67+
CatchAllShow.getInitialProps = async ({ query }) => {
68+
// Get the ID to render
69+
const { slug } = query
70+
const id = slug[0]
71+
72+
// Get the show
73+
const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
74+
const show = await res.json();
75+
76+
// Set error code if show could not be found
77+
const errorCode = res.status > 200 ? res.status : false
78+
79+
return { errorCode, show, slug }
80+
}
81+
82+
export default CatchAllShow

0 commit comments

Comments
 (0)