Surjith S M
Surjith's Blog

Follow

Surjith's Blog

Follow

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

Surjith S M's photo
Surjith S M
·Dec 1, 2020·

1 min read

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