Skip to content

Commit 130c5bc

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 130c5bc

File tree

28 files changed

+1176
-257
lines changed

28 files changed

+1176
-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/image.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import roll from 'buffer-loader!../../roll.jpg'
2+
3+
export default (req, res) => {
4+
res.status(200)
5+
res.setHeader('Content-Type', 'image/jpeg')
6+
// Send the image buffer. There are many other ways to send images and other
7+
// files. For example, you can create a buffer from a base64-encoded string
8+
// of an image: https://stackoverflow.com/a/28440633/6451879
9+
res.send(roll)
10+
}

‎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+
}

0 commit comments

Comments
 (0)