Surjith S M
Surjith's Blog

Surjith's Blog

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

Surjith S M
·Dec 1, 2020·

1 min read

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