Fix redirects for data routes of catch-all pages

When the user navigates client-side (using NextJS Link) to a page that
uses `getServerSideProps` or `getStaticProps`, NextJS makes a request
for the page's data.
This request goes to a special path that follows this pattern:
@_next/data/%BUILD_ID%/path/to/page.json

For pages with fallback: true, we need to redirect that route to the
page's Netlify Function. Dynamic parameters in the data route are
already converted correctly, but until now, this was not true for
catch-all routes.

This commit fixes that by converting data routes with catch-all into
the Netlify-compatible redirect using the * symbol.

For example, /_next/data/%BUILD_ID%/path/to/page/:...slug.json
becomes      /_next/data/%BUILD_ID%/path/to/page/*

Author: FinnWoelm

cypress/fixtures/pages/getStaticProps/withFallback/[...slug].js

@@ -0,0 +1,63 @@
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+
+const Show = ({ show }) => {
+  const router = useRouter()
+
+  // This is never shown on Netlify. We just need it for NextJS to be happy,
+  // because NextJS will render a fallback HTML page.
+  if (router.isFallback) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <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: { slug: ['my', 'path', '1'] } },
+    { params: { slug: ['my', 'path', '2'] } }
+  ]
+
+  // We'll pre-render these paths at build time.
+  // { fallback: true } means other routes will be rendered at runtime.
+  return { paths, fallback: true }
+}
+
+
+export async function getStaticProps({ params }) {
+  // The ID to render
+  const { slug } = params
+  const id = slug[slug.length-1]
+
+  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

@@ -125,6 +125,21 @@ const Index = ({ shows }) => (
           <a>getStaticProps/withFallback/75 (dynamic route, not pre-rendered)</a>
         </Link>
       </li>
+      <li>
+        <Link href="/getStaticProps/withFallback/[...slug]" as="/getStaticProps/withFallback/my/path/1">
+          <a>getStaticProps/withFallback/my/path/1 (catch-all route)</a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/getStaticProps/withFallback/[...slug]" as="/getStaticProps/withFallback/my/path/2">
+          <a>getStaticProps/withFallback/my/path/2 (catch-all route)</a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/getStaticProps/withFallback/[...slug]" as="/getStaticProps/withFallback/my/undefined/path/75">
+          <a>getStaticProps/withFallback/my/undefined/path/75 (catch-all route, not pre-rendered)</a>
+        </Link>
+      </li>
     </ul>
 
     <h1>5. getServerSideProps? Yes!</h1>

cypress/integration/default_spec.js

@@ -307,6 +307,53 @@ describe('getStaticProps', () => {
       })
     })
   })
+
+  context('with catch-all route', () => {
+    context('with fallback', () => {
+      it('loads pre-rendered shows 1 and 2', () => {
+        cy.visit('/getStaticProps/withFallback/my/path/1')
+        cy.get('h1').should('contain', 'Show #1')
+        cy.get('p').should('contain',  'Under the Dome')
+
+        cy.visit('/getStaticProps/withFallback/my/path/2')
+        cy.get('h1').should('contain', 'Show #2')
+        cy.get('p').should('contain',  'Person of Interest')
+      })
+
+      it('loads non-pre-rendered TV show', () => {
+        cy.visit('/getStaticProps/withFallback/undefined/catch/all/path/75')
+
+        cy.get('h1').should('contain', 'Show #75')
+        cy.get('p').should('contain',  'The Mindy Project')
+      })
+
+      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/withFallback/my/path/1').click()
+
+        cy.get('h1').should('contain', 'Show #1')
+        cy.get('p').should('contain',  'Under the Dome')
+
+        cy.contains('Go back home').click()
+        cy.contains('getStaticProps/withFallback/my/path/2').click()
+
+        cy.get('h1').should('contain', 'Show #2')
+        cy.get('p').should('contain',  'Person of Interest')
+
+        cy.contains('Go back home').click()
+        cy.contains('getStaticProps/withFallback/my/undefined/path/75').click()
+
+        cy.get('h1').should('contain', 'Show #75')
+        cy.get('p').should('contain',  'The Mindy Project')
+
+        cy.window().should('have.property', 'noReload', true)
+      })
+    })
+  })
 })
 
 describe('API endpoint', () => {

lib/getNetlifyRoute.js

@@ -9,7 +9,7 @@
 // also handles catch all routes /[...param]/ -> /:*
 module.exports = dynamicRoute => {
   // replace any catch all group first
-  const expressified = dynamicRoute.replace(/\[\.\.\.(.*)]$/, "*");
+  const expressified = dynamicRoute.replace(/\[\.\.\.(.*)](.json)?$/, "*");
 
   // now replace other dynamic route groups
   return expressified.replace(/\[(.*?)]/g, ":$1");

tests/__snapshots__/defaults.test.js.snap

@@ -9,9 +9,11 @@ exports[`Routing creates Netlify redirects 1`] = `
 /  /.netlify/functions/next_index  200
 /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
-/getStaticProps/static  /getStaticProps/static.html  200
+/getStaticProps/withFallback/my/path/1  /getStaticProps/withFallback/my/path/1.html  200
+/getStaticProps/withFallback/my/path/2  /getStaticProps/withFallback/my/path/2.html  200
 /getStaticProps/withFallback/3  /getStaticProps/withFallback/3.html  200
 /getStaticProps/withFallback/4  /getStaticProps/withFallback/4.html  200
 /api/shows/:id  /.netlify/functions/next_api_shows_id  200
@@ -20,6 +22,8 @@ exports[`Routing creates Netlify redirects 1`] = `
 /_next/data/%BUILD_ID%/getServerSideProps/:id.json  /.netlify/functions/next_getServerSideProps_id  200
 /getStaticProps/withFallback/:id  /.netlify/functions/next_getStaticProps_withFallback_id  200
 /_next/data/%BUILD_ID%/getStaticProps/withFallback/:id.json  /.netlify/functions/next_getStaticProps_withFallback_id  200
+/getStaticProps/withFallback/*  /.netlify/functions/next_getStaticProps_withFallback_slug  200
+/_next/data/%BUILD_ID%/getStaticProps/withFallback/*  /.netlify/functions/next_getStaticProps_withFallback_slug  200
 /shows/:id  /.netlify/functions/next_shows_id  200
 /shows/*  /.netlify/functions/next_shows_params  200
 /static/:id  /static/[id].html  200"

tests/defaults.test.js

@@ -104,6 +104,8 @@ describe('SSG Pages with getStaticProps', () => {
     expect(existsSync(join(OUTPUT_PATH, "getStaticProps", "2.html"))).toBe(true)
     expect(existsSync(join(OUTPUT_PATH, "getStaticProps", "withFallback", "3.html"))).toBe(true)
     expect(existsSync(join(OUTPUT_PATH, "getStaticProps", "withFallback", "4.html"))).toBe(true)
+    expect(existsSync(join(OUTPUT_PATH, "getStaticProps", "withFallback", "my", "path", "1.html"))).toBe(true)
+    expect(existsSync(join(OUTPUT_PATH, "getStaticProps", "withFallback", "my", "path", "2.html"))).toBe(true)
   })
 
   test('creates data .json file in /_next/data/ directory', () => {
@@ -117,11 +119,16 @@ describe('SSG Pages with getStaticProps', () => {
     expect(existsSync(join(dataDir, "getStaticProps", "2.json"))).toBe(true)
     expect(existsSync(join(dataDir, "getStaticProps", "withFallback", "3.json"))).toBe(true)
     expect(existsSync(join(dataDir, "getStaticProps", "withFallback", "4.json"))).toBe(true)
+    expect(existsSync(join(dataDir, "getStaticProps", "withFallback", "my", "path", "1.json"))).toBe(true)
+    expect(existsSync(join(dataDir, "getStaticProps", "withFallback", "my", "path", "2.json"))).toBe(true)
   })
 
-  test('creates Netlify Function for pages with fallback', () => {
-    const functionPath = "next_getStaticProps_withFallback_id/next_getStaticProps_withFallback_id.js"
-    expect(existsSync(join(PROJECT_PATH, "out_functions", functionPath))).toBe(true)
+  test('creates Netlify Functions for pages with fallback', () => {
+    const functionPath1 = "next_getStaticProps_withFallback_id/next_getStaticProps_withFallback_id.js"
+    expect(existsSync(join(PROJECT_PATH, "out_functions", functionPath1))).toBe(true)
+
+    const functionPath2 = "next_getStaticProps_withFallback_slug/next_getStaticProps_withFallback_slug.js"
+    expect(existsSync(join(PROJECT_PATH, "out_functions", functionPath2))).toBe(true)
   })
 })
 

tests/fixtures/pages/getStaticProps/withFallback/[...slug].js

@@ -0,0 +1,63 @@
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+
+const Show = ({ show }) => {
+  const router = useRouter()
+
+  // This is never shown on Netlify. We just need it for NextJS to be happy,
+  // because NextJS will render a fallback HTML page.
+  if (router.isFallback) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <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: { slug: ['my', 'path', '1'] } },
+    { params: { slug: ['my', 'path', '2'] } }
+  ]
+
+  // We'll pre-render these paths at build time.
+  // { fallback: true } means other routes will be rendered at runtime.
+  return { paths, fallback: true }
+}
+
+
+export async function getStaticProps({ params }) {
+  // The ID to render
+  const { slug } = params
+  const id = slug[slug.length-1]
+
+  const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
+  const data = await res.json();
+
+  return {
+    props: {
+      show: data
+    }
+  }
+}
+
+export default Show