title: How can I ensure that the Next.js router.query is not undefined?
body: <p>I'm using <code>next.js</code> and the <code>import { useRouter } from 'next/router'</code>.</p>
  <p>However on initial load, <code>router.query.id</code> is <code>undefined</code>. It quickly fills in, but that initial load is a killer.</p>
  <p>I'm trying to figure out how to do it, and tried:</p>
  <pre><code>export async function getStaticProps({ params }) {
    // params contains the post `id`.
    // If the route is like /posts/1, then params.id is 1
    // const res = await fetch(`https://.../posts/${params.id}`)
    // const post = await res.json()
    console.log(params)
    // Pass post data to the page via props
    return { props: { params } }
  }
  </code></pre>
  <p>but this returns an error:</p>
  <pre><code>Error: getStaticPaths is required for dynamic SSG pages and is missing for '/app/d/[id]'.
  </code></pre>
  <p>I can't use <code>getStaticPaths</code>, since <code>[id]</code> is variable and can be any number of things.</p>
  <p>So what's the best way to handle this?</p>