@@ -6,6 +6,7 @@ const Index = ({ shows }) => (
66 < img
77 src = "/next-on-netlify.png" alt = "NextJS on Netlify Banner"
88 style = { { maxWidth : '100%' } } />
9+ 910 < h1 > NextJS on Netlify</ h1 >
1011 < p >
1112 This is a demo of a NextJS application with Server-Side Rendering (SSR).
@@ -24,8 +25,7 @@ const Index = ({ shows }) => (
2425 npm package.
2526 </ p >
2627
27- < hr />
28- 28+ < h1 > 1. Server-Side Rendering Made Easy</ h1 >
2929 < p >
3030 This page is server-side rendered.
3131 < br />
@@ -35,7 +35,6 @@ const Index = ({ shows }) => (
3535 Refresh this page to see it change.
3636 </ p >
3737
38- < h3 > TV Shows</ h3 >
3938 < ul >
4039 { shows . map ( ( { id, name } ) => (
4140 < li key = { id } >
@@ -46,12 +45,59 @@ const Index = ({ shows }) => (
4645 ) ) }
4746 </ ul >
4847
48+ < h1 > 2. Full Support for Dynamic Pages</ h1 >
4949 < p >
50+ Dynamic pages, introduced in NextJS 9.2, are fully supported.
51+ < br />
5052 Click on a show to check out a server-side rendered page with dynamic
5153 routing (/shows/:id).
54+ </ p >
55+ 56+ < ul >
57+ { shows . slice ( 0 , 3 ) . map ( ( { id, name } ) => (
58+ < li key = { id } >
59+ < Link href = "/shows/[id]" as = { `/shows/${ id } } >
60+ < a > #{ id } : { name } </ a >
61+ </ Link >
62+ </ li >
63+ ) ) }
64+ </ ul >
65+ 66+ < h1 > 3. Catch-All Routes? Included ✔</ h1 >
67+ < p > You can even take advantage of
68+ { ' ' }
69+ < a href = "https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes" >
70+ NextJS' catch-all routes feature
71+ </ a > .
72+ < br />
73+ Here are three examples:
74+ </ p >
75+ < ul >
76+ < li >
77+ < Link href = "/shows/[...params]" as = { `/shows/73/whatever/path/you/want` } >
78+ < a > /shows/73/whatever/path/you/want</ a >
79+ </ Link >
80+ </ li >
81+ < li >
82+ < Link href = "/shows/[...params]" as = { `/shows/94/whatever/path/you` } >
83+ < a > /shows/94/whatever/path/you</ a >
84+ </ Link >
85+ </ li >
86+ < li >
87+ < Link href = "/shows/[...params]" as = { `/shows/106/whatever/path` } >
88+ < a > /shows/106/whatever/path</ a >
89+ </ Link >
90+ </ li >
91+ </ ul >
92+ 93+ < h1 > 4. Static Pages Stay Static</ h1 >
94+ < p >
95+ next-on-netlify automatically determines which pages are dynamic and
96+ which ones are static.
5297 < br />
98+ Only dynamic pages are server-side rendered.
5399 < br />
54- Or check out one of these other pages:
100+ Static pages are pre-rendered and served directly by Netlify's CDN.
55101 </ p >
56102
57103 < ul >
@@ -67,8 +113,9 @@ const Index = ({ shows }) => (
67113 </ li >
68114 </ ul >
69115
116+ < h1 > Want to Learn More?</ h1 >
70117 < p >
71- Or check out the
118+ Check out the
72119 { ' ' }
73120 < a href = "https://github.com/FinnWoelm/next-on-netlify-demo" >
74121 source code on GitHub
0 commit comments