title: How can I specify the optional parameters in the dynamic routing?
body: <p>Suppose I have a <code>page</code> that will show the details of each chapter in the book. User can navigate to other chapters from that page, as the screen has buttons of chapters in the sidebar, and the main content shows the details of the chapter.</p>
  <p>Now the user will navigate to that page from a list of books. At the page information, there's no chapter information of that book.</p>
  <p>Now if the URL is <code>\bookSlug</code>, so the page will show the details of the first chapter, even it is not mentioned in the URL, it will fetch the list of chapters then fetch the details of the first chapter from that list. This behaviour remains the same for URL <code>\bookSlug\firstChapterSlug</code>.</p>
  <hr />
  <p>So, in <code>react-router</code> I used to do it like this.</p>
  <pre><code>&lt;Route path={'/:bookId/:chapterId?'} component={ChapterDetails} &gt;
  </code></pre>
  <p>And on the page, I handle the params, that id the <code>chapterId</code> is undefined to just fetch the first chapter or just fetch the chapter mentioned in the chapterId param.</p>
  <p>Now, I'm stuck here,</p>
  <pre><code>&lt;Link href={'/[bookSlug]/[chapterSlug]' as={'/someBookName'} &gt;
  </code></pre>
  <p>It is just not working, even I have marked the params in the <code>getStaticPaths</code> optional <code>GetStaticPaths&lt;Props, {bookSlug: string, chapterSlug?: string}&gt;</code> s that I can write logic.</p>
  <p>How can I achieve that react-router behaviour here in nextJS dynamic routing?</p>