Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 4ffddca

Browse filesBrowse 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
Copy full SHA for 4ffddca

File tree

Expand file treeCollapse file tree

27 files changed

+1161
-257
lines changed
Filter options
Expand file treeCollapse file tree

27 files changed

+1161
-257
lines changed

‎package-lock.json

Copy file name to clipboardExpand all lines: package-lock.json
+6Lines 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

Copy file name to clipboardExpand all lines: package.json
+3Lines 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

Copy file name to clipboard
+41Lines 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

Copy file name to clipboard
+38Lines 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

Copy file name to clipboard
+12Lines 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

Copy file name to clipboard
+13Lines 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

Copy file name to clipboard
+4Lines 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

Copy file name to clipboard
+11Lines 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

Copy file name to clipboard
+13Lines 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

Copy file name to clipboard
+82Lines 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

‎pages/getInitialProps/[id].js

Copy file name to clipboard
+69Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import Error from 'next/error'
2+
import Link from 'next/link'
3+
4+
const DynamicShow = ({ errorCode, show }) => {
5+
6+
// If show was not found, render 404 page
7+
if (errorCode) {
8+
return <Error statusCode={errorCode} />
9+
}
10+
11+
// Otherwise, render show
12+
return (
13+
<>
14+
<h1>getInitialProps: with dynamic routing</h1>
15+
<p>
16+
This page uses getInitialProps() to fetch a TV show from an API.<br/>
17+
The ID is set in the URL: /getInitialProps/:id
18+
</p>
19+
<p>
20+
You can change the ID to any number between 1-10000. Try it!
21+
</p>
22+
<a
23+
href="https://github.com/FinnWoelm/next-on-netlify-demo/tree/master/pages/getInitialProps/[id].js"
24+
target="_blank">
25+
View code on GitHub
26+
</a>
27+
28+
<hr/>
29+
30+
<h2>Show #{show.id}: {show.name}</h2>
31+
<a
32+
href={`https://api.tvmaze.com/shows/${show.id}`}
33+
target='_blank'>
34+
https://api.tvmaze.com/shows/{show.id}
35+
</a>
36+
37+
<p>
38+
Type: {show.type} <br/>
39+
Language: {show.language} <br/>
40+
Status: {show.status} <br/>
41+
Premiered: {show.premiered} <br/>
42+
Official Site: {show.officialSite} <br/>
43+
Rating (average): {show.rating?.average}
44+
</p>
45+
46+
<hr/>
47+
48+
<Link href="/">
49+
<a>Go back home</a>
50+
</Link>
51+
</>
52+
)
53+
}
54+
55+
DynamicShow.getInitialProps = async ({ query }) => {
56+
// Get the ID to render
57+
const { id } = query
58+
59+
// Get the data
60+
const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
61+
const show = await res.json();
62+
63+
// Set error code if show could not be found
64+
const errorCode = res.status > 200 ? res.status : false
65+
66+
return { errorCode, show }
67+
}
68+
69+
export default DynamicShow

‎pages/getInitialProps/show.js

Copy file name to clipboard
+54Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import Link from 'next/link'
2+
3+
const Show = ({ show }) => (
4+
<>
5+
<h1>getInitialProps: basic page</h1>
6+
<p>
7+
This page uses getInitialProps() to fetch a TV show from an API.
8+
</p>
9+
<p>
10+
When navigating client-side, getInitialProps() runs on the client.
11+
<br/>
12+
When requesting this page directly, the page is rendered server-side by a Netlify Function.
13+
</p>
14+
<a
15+
href="https://github.com/FinnWoelm/next-on-netlify-demo/tree/master/pages/getInitialProps/show.js"
16+
target="_blank">
17+
View code on GitHub
18+
</a>
19+
20+
<hr/>
21+
22+
<h2>Show #{show.id}: {show.name}</h2>
23+
<a
24+
href={`https://api.tvmaze.com/shows/${show.id}`}
25+
target='_blank'>
26+
https://api.tvmaze.com/shows/{show.id}
27+
</a>
28+
29+
<p>
30+
Type: {show.type} <br/>
31+
Language: {show.language} <br/>
32+
Status: {show.status} <br/>
33+
Premiered: {show.premiered} <br/>
34+
Official Site: {show.officialSite} <br/>
35+
Rating (average): {show.rating?.average}
36+
</p>
37+
38+
<hr/>
39+
40+
<Link href="/">
41+
<a>Go back home</a>
42+
</Link>
43+
</>
44+
)
45+
46+
Show.getInitialProps = async () => {
47+
// Get the show
48+
const res = await fetch('https://api.tvmaze.com/shows/768');
49+
const show = await res.json();
50+
51+
return { show }
52+
}
53+
54+
export default Show

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.