title: Access the route in different way in next js
body: <p>I have an application in nextjs. There i built the next route:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> &lt;Link
      href="colors/[type]"
      as={`colors/${type}`}
    &gt;
      &lt;a&gt;click&lt;/a&gt;
  &lt;/Link&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This route redirect me on <code>/colors/red</code>, or <code>colors/blue</code> and so on, depending by the user. <code>type</code> here is a varible = dynamic element.</p>
  <p>Also i have other link:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> &lt;Link href="colors"&gt;
      &lt;a&gt;click to colors&lt;/a&gt;
  &lt;/Link&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This route should redirect me on <code>/colors</code>, but when  i click i get error, because the first url <code>colors/red</code> is not equal with this type: <code>colors</code>. So i have to put something after <code>colors</code> to make things happen. <br>
  How to solve the issue? and how to make my first route to accept the last parameter as optional.?</p>