title: Next.js doesn't return slug with useRouter in console log
body: <p>I am using a dynamic router in Next.js, and this is the code</p>
  <pre><code>import { useRouter } from &quot;next/router&quot;;
  
  const exampleFunction = () =&gt; {
  
    const router = useRouter();
    const {slug}  = router.query;
    console.log(slug);
  
    return (
      &lt;h1&gt;{slug}&lt;/h1&gt;
    );
  };
  
  export default exampleFunction;
  </code></pre>
  <p>The location of the file is:</p>
  <blockquote>
  <p>lms/client/pages/teacher/course/test/[slug].js</p>
  </blockquote>
  <p>When I access the link like this:</p>
  <blockquote>
  <p>http://localhost:3000/teacher/course/test/testmw</p>
  </blockquote>
  <p>I can see the slug is being rendered in the browser; however when I look at the console, I see <code>undefined</code> value before the actual value of the slug.</p>
  <p>I wonder this is something I've done wrong or this is the expected behavior of Next.js?</p>
  <p>I've been suggested a similar <a href="https://stackoverflow.com/questions/63691329/nextjs-ssr-userouter-does-not-work-when-refresh-page">question</a>. However, the answer is mostly about getting the route in server-side, I wonder if I can effectively do the same thing on the client-side.</p>