title: Next.js prepending current path for nested dynamic routes in Link components
body: <p>How would you go about dealing with nested dynamic routes and using Next.js Link component?</p>
  <p>Say I have 2 file paths:</p>
  <pre><code>/pages/projects/index.js
  </code></pre>
  <pre><code>&lt;Link href={`/projects/${project.id}`} key={index}&gt;
    &lt;a&gt;Project Name&lt;/a&gt;
  &lt;/Link&gt;
  </code></pre>
  <p>This will take me to <code>localhost:3000/projects/some-id/</code></p>
  <p>and</p>
  <pre><code>/pages/projects/[pid]/index.js
  </code></pre>
  <p>This is where I'm having trouble figuring out how to prepend the path of <code>localhost:3000/projects/some-id/</code></p>
  <pre><code>&lt;Link href={`/${router.pathname}/apple`}&gt;
    &lt;a&gt;Business name&lt;/a&gt;
  &lt;/Link&gt;
  </code></pre>
  <p>If I use <code>router.pathname</code>, I get <code>/projects/[pid]/apple</code>, and its missing the domain name, if I use <code>router.asPath</code>, I get the correct path, but its still missing the domain. I don't know if this is the correct way, because i shouldn't be adding the domain name into Link's <code>href</code>.</p>