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
Sign up
Appearance settings

Commit 4e61be6

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /