How can I get query string parameters from the URL in Next js

Question

When I click on a link in my  index js  it brings me to  about js page  However  when I m passing parameter name through URL  like  about name leangchhean  from  index js to  about js  I don t know how to get it in the  about js page  index js import Link from  next link   export default      gt       lt div gt      Click           lt Link href    pathname   about   query    name   leangchhean       gt         lt a gt here lt  a gt       lt  Link gt           to read more    lt  div gt

User · Answer

x000D   x000D  Post getInitialProps   async function context    x000D   x000D    const data      x000D    try  x000D      data queryParam   queryString parse context req url split      1    x000D     catch err   x000D      data queryParam   queryString parse window location search   x000D      x000D    return   data    x000D     x000D   x000D   x000D

User · Answer

If you need to retrieve a URL query from outside a component  import router from  next router   console log router query

User · Answer

import   useRouter   from  next router    function componentName         const router   useRouter        console log  router obj   router      We can find the query object inside a router using which we can get all query string parameters

User · Answer

Use router-hook  You can use the useRouter hook in any component in your application  https   nextjs org docs api-reference next router userouter pass Param import Link from  quot next link quot     lt Link href    pathname    search   query    keyword   this way       gt  lt a gt path lt  a gt  lt  Link gt   Or import Router from  next router   Router push       pathname    search       query    keyword   this way         In Component import   useRouter   from  next router   export default      gt      const router   useRouter     console log router query

User · Answer

Using Next js 9 or above you can get query parameters  With router  import   useRouter   from  next router   const Index        gt      const router   useRouter     const  id    router query    return  lt div gt  id  lt  div gt      With getInitialProps  const Index     id     gt      return  lt div gt  id  lt  div gt      Index getInitialProps   async    query      gt      const  id    query    return  id

User · Answer

url prop is deprecated as of Next js version 6  https   github com zeit next js blob master errors url-deprecated md To get the query parameters  use getInitialProps  For stateless components import Link from  next link  const About     query     gt       lt div gt Click  lt Link href    pathname   about   query    name   leangchhean      gt  lt a gt here lt  a gt  lt  Link gt  to read more lt  div gt     About getInitialProps     query     gt      return  query     export default About   For regular components class About extends React Component      static getInitialProps  query         return  query         render         console log this props query     The query is available in the props object     return  lt div gt Click  lt Link href    pathname   about   query    name   leangchhean      gt  lt a gt here lt  a gt  lt  Link gt  to read more lt  div gt          The query object will be like  url com a 1 amp b 2 amp c 3 becomes   a 1  b 2  c 3

User · Answer

Get it by using the below code in the about js page      x000D   x000D     pages about js import Link from  next link  export default    url    query    name          gt       lt p gt Welcome to About    name   lt  p gt    x000D   x000D   x000D

User · Answer

For those looking for a solution that works with static exports  try the solution listed here  https   github com zeit next js issues 4804 issuecomment-460754433 In a nutshell  router query works only with SSR applications  but router asPath still works  So can either configure the query pre-export in next config js with exportPathMap  not dynamic       return                page                 about     page    about   query    title   about-us                 Or use router asPath and parse the query yourself with a library like query-string  import   withRouter   from  quot next router quot   import queryString from  quot query-string quot    export const withPageRouter   Component   gt      return withRouter    router     props      gt        router query   queryString parse router asPath split       1         return  lt Component     props  router  router    gt

[next.js] How can I get (query string) parameters from the URL in Next.js?

Examples related to next.js

Examples related to query-string