1
1
import { useRouter } from 'next/router'
2
2
import Link from 'next/link'
3
3
4
- const Show = ( { show } ) => {
5
- const router = useRouter ( )
6
-
7
- // This is never shown on Netlify. We just need it for NextJS to be happy,
8
- // because NextJS will render a fallback HTML page.
9
- if ( router . isFallback ) {
10
- return < div > Loading...</ div >
11
- }
12
-
13
- return (
14
- < div >
15
- < p > This page uses getStaticProps() to pre-fetch a TV show.</ p >
16
-
17
- < hr />
18
-
19
- < h1 > Show #{ show . id } </ h1 >
20
- < p > { show . name } </ p >
21
-
22
- < hr />
23
-
24
- < Link href = "/" >
25
- < a > Go back home</ a >
26
- </ Link >
27
- </ div >
28
- )
29
- }
4
+ const Show = ( { show, time } ) => (
5
+ < div >
6
+ < p > This page uses getStaticProps() to pre-fetch a TV show.</ p >
7
+ < p > Ids 1 and 2 are prerendered and others should render on-demand.</ p >
8
+ < hr />
9
+
10
+ < h1 > Show #{ show . id } </ h1 >
11
+ < p > { show . name } </ p >
12
+ < p > Rendered at { time } </ p >
13
+ < hr />
14
+
15
+ < Link href = "/" >
16
+ < a > Go back home</ a >
17
+ </ Link >
18
+ </ div >
19
+ )
30
20
31
21
export async function getStaticPaths ( ) {
32
22
// Set the paths we want to pre-render
33
- const paths = [ { params : { id : '3 ' } } , { params : { id : '4 ' } } ]
23
+ const paths = [ { params : { id : '1 ' } } , { params : { id : '2 ' } } ]
34
24
35
25
// We'll pre-render these paths at build time.
36
26
// { fallback: blocking } means routes will be built when visited for the
@@ -44,10 +34,12 @@ export async function getStaticProps({ params }) {
44
34
45
35
const res = await fetch ( `https://api.tvmaze.com/shows/${ id } ` )
46
36
const data = await res . json ( )
37
+ const time = new Date ( ) . toLocaleTimeString ( )
47
38
48
39
return {
49
40
props : {
50
41
show : data ,
42
+ time,
51
43
} ,
52
44
}
53
45
}
0 commit comments