title: Nextjs page goes to 404 on refresh
body: <p>I'm using nextjs and graphql for a shopify POC.</p>
  
  <p>I have a component that shows a list of products with links on them that point to the product page </p>
  
  <pre><code>&lt;Link
     as={`${handle}/product/${url}`}
     href={`/product?id=${item.id};`}&gt;
     &lt;a&gt;{item.title}&lt;/a&gt;
  &lt;/Link&gt;
  </code></pre>
  
  <p>handle is the collection name so the url in the browser will look like 
  <a href="http://localhost:3000/new-releases/product/Plattan-2-Bluetooth" rel="noreferrer">http://localhost:3000/new-releases/product/Plattan-2-Bluetooth</a> but behind the scenes its really just using a page called products and i'm passing the product id.</p>
  
  <p>Now in product.js (pasted below) i'm getting the query string value of the id and doing another query to get the product. All works fine but then if i hit refresh or copy and paste the url into a new window i get 404. </p>
  
  <p>I know this is something to do with routing but i'm not sure what i need to do to fix this. Thanks</p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { Query } from 'react-apollo';
  import gql from 'graphql-tag';
  
  
  class product extends Component {
    static async getInitialProps({query}) {
      console.log("query", query)
      return query ? { id: query.id.replace(';', '') } : {}
    }
  
    render() {
  
      const PRODUCT_FRAGMENT = gql`
          fragment ProductPage on Product {
            title
            description
            descriptionHtml
            id
            images(first: 10, maxWidth: 600) {
              edges {
                node {
                  id
                  altText
                  originalSrc
                }
              }
            }
          }
        `;
  
      const PRODUCT_FETCH_QUERY = gql`
        query PRODUCT_FETCH_QUERY {
          node(id: "${this.props.id}") {
            __typename
            ...ProductPage
          } 
        }
        ${PRODUCT_FRAGMENT}
      `;
  
      return (
        &lt;div&gt;
           &lt;Query query={PRODUCT_FETCH_QUERY}&gt;
                {({ data, error, loading }) =&gt; {
                  console.log("data", data)
                  if (loading) return &lt;p&gt;Loading...&lt;/p&gt;
                  if (error) return &lt;p&gt;Error: {error.message}&lt;/p&gt;
                  return null}
                }
              &lt;/Query&gt;
        &lt;/div&gt;
      );
    }
  }
  
  product.propTypes = {
  
  };
  
  export default product;
  </code></pre>