title: Get product permalink and ID using Next JS and Commerce.js
body: <p>I'm wondering if anybody can point me in the right direction. I'm following the dynamic routes documentation on Next JS site - <a href="https://nextjs.org/docs/routing/dynamic-routes" rel="nofollow noreferrer">https://nextjs.org/docs/routing/dynamic-routes</a></p>
  <p>Currently I'm rendering all products on the <code>products</code> page. I'm using <code>getServersideProps</code> to make the API call. Here is the products page:</p>
  <pre><code>import Link from &quot;next/link&quot;;
  
  const Products = ({ data }) =&gt; {
    const products = data;
    return (
      &lt;&gt;
        {products.map(({ id, name, seo: { description } }) =&gt; (
          &lt;div className=&quot;product&quot; key={id}&gt;
            &lt;h2&gt;{name}&lt;/h2&gt;
            &lt;p&gt;{description}&lt;/p&gt;
            &lt;Link href={`/products/${permalink}`}&gt;
              &lt;a&gt;View&lt;/a&gt;
            &lt;/Link&gt;
          &lt;/div&gt;
        ))}
      &lt;/&gt;
    );
  };
  
  export async function getServerSideProps() {
    const headers = {
      &quot;X-Authorization&quot;: process.env.CHEC_API_KEY,
      Accept: &quot;application/json&quot;,
      &quot;Content-Type&quot;: &quot;application/json&quot;,
    };
    const res = await fetch(&quot;https://api.chec.io/v1/products&quot;, {
      method: &quot;GET&quot;,
      headers: headers,
    });
    const data = await res.json();
  
    if (!data) {
      return {
        redirect: {
          destination: &quot;/&quot;,
          permanent: false,
        },
      };
    }
  
    return {
      props: data, // will be passed to the page component as props
    };
  }
  
  export default Products;
  </code></pre>
  <p>In the Link I am using the permalink to direct people to a single product</p>
  <pre><code>&lt;Link href={`/products/${permalink}`}&gt;
              &lt;a&gt;View&lt;/a&gt;
            &lt;/Link&gt;
  </code></pre>
  <p>This is set up as <code>products/[name].js</code> in the structure, with <code>index.js</code> being the all products page.</p>
  <p>Now on my single product page, <code>[name].js</code> I would like to run another <code>getServersideProps</code> to call the API and get the product - but I want to use the <code>product id</code> however I'd only like to display the <code>permalink/slug</code> in the URL.</p>
  <p>Here is the <code>[name].js</code> page:</p>
  <pre><code>import { useRouter } from &quot;next/router&quot;;
  
  const Product = () =&gt; {
    const router = useRouter();
    console.log(router);
  
    return &lt;p&gt;&lt;/p&gt;;
  };
  
  export default Product;
  </code></pre>
  <p>Of course this is just logging out the Object with what I can access. The query shows [name]: &quot;product-name&quot;, which is great - I could now make a call for all products and filter the product the that matches this slug but I want to use the product <code>id</code> instead. Commerce.js has an request where I can <code>request</code> a single product just by using its <code>id</code>. How would I go about this?</p>
  <p>Thanks.</p>