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

Subscribe to my newsletter and never miss my upcoming articles

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}
    </>
}

No Comments Yet