Get URL Query Params in Next.js using getInitialProps()

As the title says, this is a simple code snippet to get URL Query params in Next.js using getInitialProps() method.

In Next.js, getInitialProps() have context property where URL query can be fetched using query. See example code below.

URL: http://localhost:3000/?title=Awesome&desc=Content

Page.getInitialProps = async (context) => {
  return { 
    title: context.query.title, 
    desc: context.query.desc 
  };
};

Now we can get these values in our function like this:

export default function Page({ title, desc }) {
 return (
    <>
       Title: {title}
       Desc: {desc}
    </>
}