NextJS on Netlify (imported Header component)

This is a demo of a NextJS application with Server-Side Rendering (SSR).

Server-Side Rendering

This page is server-side rendered. It fetches a random list of five TV shows from the TVmaze REST API. Refresh this page to see it change.

• #12250: Teenage Fairytale Dropouts
• #12251: Inside the Human Body
• #12252: The Roseanne Show
• #12253: Busytown Mysteries
• #12254: The Runner-Up

Dynamic Pages

Click on a show to check out a server-side rendered page with dynamic routing (/shows/:id).

• #12250: Teenage Fairytale Dropouts
• #12251: Inside the Human Body
• #12252: The Roseanne Show

Catch-All Routes

• /shows/73/whatever/path/you/want
• /shows/94/whatever/path/you
• /shows/106/whatever/path

Static Pages

• Static NextJS page: /static
• Static NextJS page with dynamic routing: /static/:id

Localization

Localization (i18n) is supported! This demo uses fr with en as the default locale (at /).

Click on the links below to see the above text change

• /fr
• /en (default locale)

Page types

• /getServerSideProps/1
• /getServerSideProps/static
• /getServerSideProps/all/1
• /getStaticProps/1
• /getStaticProps/static
• /getStaticProps/with-revalidate
• /getStaticProps/withFallback/3 (pre-rendered)
• /getStaticProps/withFallback/300 (SSR)
• /getStaticProps/withFallbackBlocking/300 (SSR)
• /getStaticProps/withRevalidate/2
• /getStaticProps/withRevalidate/withFallback/200
• Rewrite (should display image)
• Rewrite to static (should show getStaticProps/1)
• Middleware

Preview mode

Preview mode:

• Check for preview mode
• Enter preview
• Exit preview