next-url-params.jsx

/**
 * Function component with Hooks
 * @see: https://reactjs.org/docs/hooks-intro.html
 */
import { useRouter } from "next/router";

function FunctionComponentPage() {
  const router = useRouter();
  return <h1>{`ID: ${router.query.id}`}</h1>;
}

export default FunctionComponentPage;

/**
 * Class component with Higher-Order Components
 * @see: https://reactjs.org/docs/higher-order-components.html
 */
import { withRouter } from 'next/router';

class ClassComponentPage extends React.Component {
  render() {
    const { router } = this.props;
    return <h1>{`ID: ${router.query.id}`}</h1>;
  }
}

export default withRouter(ClassComponentPage)