Skip to content

Commit 4e61be6

Browse files
committed
Add demo page for catch-all route feature
The /pages/shows/[...all].js page is a demo of the newly added support for NextJS' catch-all routes feature: https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes Support for this was introduced in next-on-netlify v1.1.0.
1 parent 74a7b00 commit 4e61be6

File tree

1 file changed

+65
-0
lines changed

1 file changed

+65
-0
lines changed

pages/shows/[...params].js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import fetch from 'isomorphic-unfetch'
2+
import Error from 'next/error'
3+
import Link from 'next/link'
4+
5+
const CatchAll = ({ errorCode, show, params }) => {
6+
7+
// If show item was not found, render 404 page
8+
if (errorCode) {
9+
return <Error statusCode={errorCode} />
10+
}
11+
12+
// Otherwise, render show
13+
return (
14+
<div>
15+
<p>
16+
This is a server-side rendered catch-all page. It catches all requests
17+
made to /shows/:id/any/path/can/go/here... and makes those parameters
18+
available in getInitialProps():
19+
<br/>
20+
{params.map((param, index) => (
21+
<span key={index}>
22+
[{index}]: {param}<br/>
23+
</span>
24+
))}
25+
<br/>
26+
Refresh the page to see server-side rendering in action.
27+
<br/>
28+
You can also try changing the URL to something random,
29+
such as /shows/{show.id}/whatever/path/you/want
30+
</p>
31+
32+
<hr/>
33+
34+
<h1>Show #{show.id}</h1>
35+
<p>
36+
{show.name}
37+
</p>
38+
39+
<hr/>
40+
41+
<Link href="/">
42+
<a>Go back home</a>
43+
</Link>
44+
</div>
45+
)
46+
}
47+
48+
CatchAll.getInitialProps = async ({ res: req, query }) => {
49+
// Get the params to render
50+
const { params } = query
51+
52+
// Get the ID to render
53+
const id = params[0]
54+
55+
// Get the data
56+
const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
57+
const data = await res.json();
58+
59+
// Set error code if show item could not be found
60+
const errorCode = res.status > 200 ? res.status : false
61+
62+
return { errorCode, show: data, params }
63+
}
64+
65+
export default CatchAll

0 commit comments

Comments
 (0)