Fix catch-all routes: Only match if at least one param is present

The default behavior of NextJS catch-all routes is to match only if at
least one URL parameter is present.

So far, next-on-netlify matched catch-all routes even when no URL
parameter was present. For example, /pages/shows/[...slug] would
match /shows/2, shows/3/my/path, but also /shows. This does not match
the NextJS behavior described here:
https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes

This commit matches catch-all routes only when at least one URL
parameter is present. It is in preparation for #15, which will introduce
support for optional catch-all routes. Optional catch-all routes also
match the page's base path without URL parameters (e.g. /shows).

Author: FinnWoelm

cypress/fixtures/pages/getServerSideProps/catch/all/[...slug].js

@@ -0,0 +1,58 @@
+import Error from 'next/error'
+import Link from 'next/link'
+
+const Show = ({ errorCode, show }) => {
+
+  // If show item was not found, render 404 page
+  if (errorCode) {
+    return <Error statusCode={errorCode} />
+  }
+
+  // Otherwise, render show
+  return (
+    <div>
+      <p>
+        This page uses getInitialProps() to fetch the show with the ID
+        provided in the URL: /shows/:id
+        <br/>
+        Refresh the page to see server-side rendering in action.
+        <br/>
+        You can also try changing the ID to any other number between 1-10000.
+      </p>
+
+      <hr/>
+
+      <h1>Show #{show.id}</h1>
+      <p>
+        {show.name}
+      </p>
+
+      <hr/>
+
+      <Link href="/">
+        <a>Go back home</a>
+      </Link>
+    </div>
+  )
+}
+
+export const getServerSideProps = async ({ params }) => {
+  // The ID to render
+  const { slug } = params
+  const id = slug[0]
+
+  const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
+  const data = await res.json();
+
+  // Set error code if show item could not be found
+  const errorCode = res.status > 200 ? res.status : false
+
+  return {
+    props: {
+      errorCode,
+      show: data
+    }
+  }
+}
+
+export default Show

cypress/fixtures/pages/index.js

@@ -163,6 +163,16 @@ const Index = ({ shows }) => (
           <a>getServerSideProps/1338 (dynamic route)</a>
         </Link>
       </li>
+      <li>
+        <Link href="/getServerSideProps/catch/all/[...slug]" as="/getServerSideProps/catch/all/1337">
+          <a>getServerSideProps/catch/all/1337 (catch-all route)</a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/getServerSideProps/catch/all/[...slug]" as="/getServerSideProps/catch/all/1338">
+          <a>getServerSideProps/catch/all/1338 (catch-all route)</a>
+        </Link>
+      </li>
     </ul>
 
     <h1>6. Static Pages Stay Static</h1>

cypress/integration/default_spec.js

@@ -153,14 +153,14 @@ describe('getServerSideProps', () => {
 
   context('with dynamic route', () => {
     it('loads TV show', () => {
-      cy.visit('/shows/1337')
+      cy.visit('/getServerSideProps/1337')
 
       cy.get('h1').should('contain', 'Show #1337')
       cy.get('p').should('contain',  'Whodunnit?')
     })
 
     it('loads TV show when SSR-ing', () => {
-      cy.ssr('/shows/1337')
+      cy.ssr('/getServerSideProps/1337')
 
       cy.get('h1').should('contain', 'Show #1337')
       cy.get('p').should('contain',  'Whodunnit?')
@@ -186,6 +186,54 @@ describe('getServerSideProps', () => {
       cy.window().should('have.property', 'noReload', true)
     })
   })
+
+  context('with catch-all route', () => {
+    it('does not match base path (without params)', () => {
+      cy.request({
+        url: '/getServerSideProps/catch/all',
+        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.')
+    })
+
+    it('loads TV show with one param', () => {
+      cy.visit('/getServerSideProps/catch/all/1337')
+
+      cy.get('h1').should('contain', 'Show #1337')
+      cy.get('p').should('contain',  'Whodunnit?')
+    })
+
+    it('loads TV show with multiple params', () => {
+      cy.visit('/getServerSideProps/catch/all/1337/multiple/params')
+
+      cy.get('h1').should('contain', 'Show #1337')
+      cy.get('p').should('contain',  'Whodunnit?')
+    })
+
+    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('getServerSideProps/catch/all/1337').click()
+
+      cy.get('h1').should('contain', 'Show #1337')
+      cy.get('p').should('contain',  'Whodunnit?')
+
+      cy.contains('Go back home').click()
+      cy.contains('getServerSideProps/catch/all/1338').click()
+
+      cy.get('h1').should('contain', 'Show #1338')
+      cy.get('p').should('contain',  'The Whole Truth')
+
+      cy.window().should('have.property', 'noReload', true)
+    })
+  })
 })
 
 describe('getStaticProps', () => {

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(/\[\.\.\.(.*)](.json)?$/, "*");
+  const expressified = dynamicRoute.replace(/\[\.\.\.(.*)](.json)?$/, ":$1/*");
 
   // now replace other dynamic route groups
   return expressified.replace(/\[(.*?)]/g, ":$1");

tests/__snapshots__/defaults.test.js.snap

@@ -17,14 +17,14 @@ exports[`Routing creates Netlify redirects 1`] = `
 /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
-/api/shows/*  /.netlify/functions/next_api_shows_params  200
+/api/shows/:params/*  /.netlify/functions/next_api_shows_params  200
 /getServerSideProps/:id  /.netlify/functions/next_getServerSideProps_id  200
 /_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
+/getStaticProps/withFallback/:slug/*  /.netlify/functions/next_getStaticProps_withFallback_slug  200
+/_next/data/%BUILD_ID%/getStaticProps/withFallback/:slug/*  /.netlify/functions/next_getStaticProps_withFallback_slug  200
 /shows/:id  /.netlify/functions/next_shows_id  200
-/shows/*  /.netlify/functions/next_shows_params  200
+/shows/:params/*  /.netlify/functions/next_shows_params  200
 /static/:id  /static/[id].html  200"
 `;