title: Next.js dynamic route - 404 on page reload after added SLUG
body: <p>I'm used Next.js and Node.js for my project. </p>
  
  <p>What we have:
  Pages structure:</p>
  
  <p>pages/products/PageSomeName.js</p>
  
  <p>pages/products/PageEnotherName.js</p>
  
  <p>pages/products/PageName.js</p>
  
  <p>Pages name in <strong>products</strong> folder is can be different</p>
  
  <p><strong>routes.js</strong></p>
  
  <pre><code>routes.add("/products/:id", "/products/[id].js");
  </code></pre>
  
  <p><strong>server.js</strong></p>
  
  <pre><code>app.prepare().then(() =&gt; {
    const server = express();
  
    server.use(
      "./images",
      express.static(path.join(__dirname, "images"), {
        maxAge: dev ? "0" : "365d"
      })
    );
  
    server.use(bodyParser.json());
  
    server.get("*", (req, res) =&gt; {
      return handle(req, res);
    });
  
    const PORT = process.env.PORT || 9001;
  
    server.listen(PORT, err =&gt; {
      if (err) throw err;
      console.log(`&gt; Read on http://${process.env.SITE_URL_FULL}`);
    });
  });
  </code></pre>
  
  <p><strong>Link component</strong></p>
  
  <pre><code> &lt;Link href={`/products/${data.link}`} as={`/products/${data.slug}`}/&gt;
  </code></pre>
  
  <p><strong>data array</strong></p>
  
  <pre><code>export const storeProducts = [
    {
      id: 1,
      title: "Title1",
      link: "product_name_some",
      slug: "product-1-slug",
    },
    {
      id: 2,
      title: "Title2",
      link: "product_name_different_some_name",
      slug: "product-2-slug"
    },
  </code></pre>
  
  <p><strong>There was a problem when I added slug for my links.</strong></p>
  
  <p>By client side everything works fine. I take localhost:3000/product-2-slug  in browser url.  But after reload, I take 404 error page from Next.js</p>
  
  <p>What I must added by server side in server.js for normal server reloading? 
  Maybe I need change Link component or next-route settings in <strong>routes.js</strong></p>
  
  <p>Thanks!</p>