Next.js doesn't return slug with useRouter in console log

"query: Object - The query string parsed to an object. It will be an empty object during prerendering if the page doesn't have data fetching requirements. Defaults to {}"

Initially, "query" object will be {} so "slug" will be undefined. This is what you should do :

return (
   {slug &&  <h1>slug</h1>}
  );

If "slug" is not defined, do not render element.

To solve this problem, you need to get the "slug" on the server with "getServerSideProps" and pass it to the component:

export const getServerSideProps = async (context) => {
  const { slug } = context.query;
  // If slug is "undefined", since "undefined" cannot be serialized, server will throw error
  // But null can be serializable
  if (!slug) {
    slug = null;
  }
  // now we are passing the slug to the component
  return { props: { slug:slug } };
};

Now your component has props.slug.

const exampleFunction = (props) => {
const {slug}=props // you could just pass {slug} to the component

  return (
     {slug &&  <h1>slug</h1>}
  );
};

export default exampleFunction;