Add support for dynamically routed SSG pages without fallback

Copy pre-rendered, dynamically routed pages with SSG to Netlify publish
directory and copy SSG page JSON data to _next/data/ directory.
Makes sure that the page source is not treated as an SSR page.
Otherwise, a Netlify Function would be created and they page would have
a (server-side-rendered) fallback.

See: #7

Author: FinnWoelm

cypress/fixtures/pages/getStaticProps/[id].js

@@ -0,0 +1,51 @@
+import Link from 'next/link'
+
+const Show = ({ show }) => (
+  <div>
+    <p>
+      This page uses getStaticProps() to pre-fetch a TV show.
+    </p>
+
+    <hr/>
+
+    <h1>Show #{show.id}</h1>
+    <p>
+      {show.name}
+    </p>
+
+    <hr/>
+
+    <Link href="/">
+      <a>Go back home</a>
+    </Link>
+  </div>
+)
+
+export async function getStaticPaths() {
+  // Set the paths we want to pre-render
+  const paths = [
+    { params: { id: '1' } },
+    { params: { id: '2' } }
+  ]
+
+  // We'll pre-render only these paths at build time.
+  // { fallback: false } means other routes should 404.
+  return { paths, fallback: false }
+}
+
+
+export async function getStaticProps({ params }) {
+  // The ID to render
+  const { id } = params
+
+  const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
+  const data = await res.json();
+
+  return {
+    props: {
+      show: data
+    }
+  }
+}
+
+export default Show

cypress/fixtures/pages/index.js

@@ -100,6 +100,16 @@ const Index = ({ shows }) => (
           <a>getStaticProps/static</a>
         </Link>
       </li>
+      <li>
+        <Link href="/getStaticProps/1">
+          <a>getStaticProps/1 (dynamic route)</a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/getStaticProps/2">
+          <a>getStaticProps/2 (dynamic route)</a>
+        </Link>
+      </li>
     </ul>
 
     <h1>5. Static Pages Stay Static</h1>

cypress/integration/default_spec.js

@@ -144,6 +144,49 @@ describe('getStaticProps', () => {
       cy.get('p').should('contain',  'Dancing with the Stars')
     })
   })
+
+  context('with dynamic route and no fallback', () => {
+    it('loads shows 1 and 2', () => {
+      cy.visit('/getStaticProps/1')
+      cy.get('h1').should('contain', 'Show #1')
+      cy.get('p').should('contain',  'Under the Dome')
+
+      cy.visit('/getStaticProps/2')
+      cy.get('h1').should('contain', 'Show #2')
+      cy.get('p').should('contain',  'Person of Interest')
+    })
+
+    it('loads page props from data .json file when navigating to it', () => {
+      cy.visit('/')
+      cy.window().then(w => w.noReload = true)
+
+      // Navigate to page and test that no reload is performed
+      // See: https://glebbahmutov.com/blog/detect-page-reload/
+      cy.contains('getStaticProps/1').click()
+      cy.window().should('have.property', 'noReload', true)
+
+      cy.get('h1').should('contain', 'Show #1')
+      cy.get('p').should('contain',  'Under the Dome')
+
+      cy.contains('Go back home').click()
+      cy.contains('getStaticProps/2').click()
+
+      cy.get('h1').should('contain', 'Show #2')
+      cy.get('p').should('contain',  'Person of Interest')
+    })
+
+    it('returns 404 when trying to access non-defined path', () => {
+      cy.request({
+        url: '/getStaticProps/3',
+        failOnStatusCode: false
+      }).then(response => {
+        expect(response.status).to.eq(404)
+        cy.state('document').write(response.body)
+      })
+
+      cy.get('h2').should('contain', 'This page could not be found.')
+    })
+  })
 })
 
 describe('API endpoint', () => {

lib/allNextJsPages.js

@@ -12,7 +12,7 @@ const getAllPages = () => {
   )
 
   // Read prerender manifest that tells us which SSG pages exist
-  const { routes: ssgPages } = readJSONSync(
+  const { routes: ssgPages, dynamicRoutes: dynamicSsgPages } = readJSONSync(
     join(NEXT_DIST_DIR, "prerender-manifest.json")
   )
 
@@ -23,7 +23,7 @@ const getAllPages = () => {
       return
 
     // Skip page if it is actually an SSG page
-    if(route in ssgPages)
+    if(route in ssgPages || route in dynamicSsgPages)
       return
 
     // Check if we already have a page pointing to this file

tests/__snapshots__/defaults.test.js.snap

@@ -8,6 +8,8 @@ exports[`Routing creates Netlify redirects 1`] = `
 /static  /static.html  200
 /404  /404.html  200
 /getStaticProps/static  /getStaticProps/static.html  200
+/getStaticProps/1  /getStaticProps/1.html  200
+/getStaticProps/2  /getStaticProps/2.html  200
 /api/shows/:id  /.netlify/functions/next_api_shows_id  200
 /api/shows/*  /.netlify/functions/next_api_shows_params  200
 /shows/:id  /.netlify/functions/next_shows_id  200

tests/defaults.test.js

@@ -98,6 +98,8 @@ describe('SSG Pages with getStaticProps', () => {
     const OUTPUT_PATH = join(PROJECT_PATH, "out_publish")
 
     expect(existsSync(join(OUTPUT_PATH, "getStaticProps", "static.html"))).toBe(true)
+    expect(existsSync(join(OUTPUT_PATH, "getStaticProps", "1.html"))).toBe(true)
+    expect(existsSync(join(OUTPUT_PATH, "getStaticProps", "2.html"))).toBe(true)
   })
 
   test('creates data .json file in /_next/data/ directory', () => {
@@ -107,6 +109,8 @@ describe('SSG Pages with getStaticProps', () => {
     const dataDir = join(PROJECT_PATH, "out_publish", "_next", "data", dirs[0])
 
     expect(existsSync(join(dataDir, "getStaticProps", "static.json"))).toBe(true)
+    expect(existsSync(join(dataDir, "getStaticProps", "1.json"))).toBe(true)
+    expect(existsSync(join(dataDir, "getStaticProps", "2.json"))).toBe(true)
   })
 })
 

tests/fixtures/pages/getStaticProps/[id].js

@@ -0,0 +1,51 @@
+import Link from 'next/link'
+
+const Show = ({ show }) => (
+  <div>
+    <p>
+      This page uses getStaticProps() to pre-fetch a TV show.
+    </p>
+
+    <hr/>
+
+    <h1>Show #{show.id}</h1>
+    <p>
+      {show.name}
+    </p>
+
+    <hr/>
+
+    <Link href="/">
+      <a>Go back home</a>
+    </Link>
+  </div>
+)
+
+export async function getStaticPaths() {
+  // Set the paths we want to pre-render
+  const paths = [
+    { params: { id: '1' } },
+    { params: { id: '2' } }
+  ]
+
+  // We'll pre-render only these paths at build time.
+  // { fallback: false } means other routes should 404.
+  return { paths, fallback: false }
+}
+
+
+export async function getStaticProps({ params }) {
+  // The ID to render
+  const { id } = params
+
+  const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
+  const data = await res.json();
+
+  return {
+    props: {
+      show: data
+    }
+  }
+}
+
+export default Show