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