Getting query parameter with hyphen in nextJS 13 - step by step tutorial

Question

Getting query parameter with hyphen in nextJS 13 - step by step tutorial

One of the challenges I am facing involves accessing a query parameter with a hyphen in its name within a route:

/?previous-page=building-details

Within my Page component:

import EnergyEfficiency from "@/ui/energy-check/energy-efficiency"

const Page = ({
  params,
  searchParams,
}: {
  params: { id: string }
  searchParams: { modernization: string; previousPage: string }
}) => {
  const { modernization, previousPage } = searchParams

  console.log(previousPage) // undefined

  return <EnergyEfficiency addressID={params.id} />
}

export default Page

I'm trying to figure out how to access this specific parameter from the props of the page, any tips on achieving that?

javascript next.js next.js13

Answer 1

Answer №1

One way to access query parameters from your route is by using the useSearchParams hook.

The useSearchParams hook is a client-side component hook that allows you to retrieve the query string from the current URL.

import { useSearchParams } from 'next/navigation'

export default function Page() {

  const searchParams = useSearchParams()
  
  const previousPage = searchParams.get('previous-page')
  console.log('previousPage', previousPage) // prints 'building-details' to the console

  return (
    <h1>Welcome</h1>
  )
}

If we're discussing a Server Component, here is how it can be implemented:

Note: Make sure to use the app folder as specified below.

You need to create a new contact folder within the app folder, and then add a page.tsx file inside the newly created contact folder with the provided code snippet.

File Structure

https://i.sstatic.net/9dNYf.png

const Page = ({
  searchParams,
}: {
  searchParams: { [key: string]: string | string[] | undefined }
}) => {
    const contactWay = searchParams["contact-way"]
    return (
        <>
            <h1>Contact Page</h1>
            <h2>Contact Way: {contactWay}</h2>
        </>
    )
}

export default Page

Go to http://localhost:3000/contact?contact-way=email to see the result:

https://i.sstatic.net/8NkAV.png

CodeSandbox: https://codesandbox.io/p/sandbox/upbeat-leaf-6scwsm?file=%2Fapp%2Fcontact%2Fpage.tsx%3A3%2C5

Answer 2

One way to access query parameters from your route is by using the useSearchParams hook.

The useSearchParams hook is a client-side component hook that allows you to retrieve the query string from the current URL.

import { useSearchParams } from 'next/navigation'

export default function Page() {

  const searchParams = useSearchParams()
  
  const previousPage = searchParams.get('previous-page')
  console.log('previousPage', previousPage) // prints 'building-details' to the console

  return (
    <h1>Welcome</h1>
  )
}

If we're discussing a Server Component, here is how it can be implemented:

Note: Make sure to use the app folder as specified below.

You need to create a new contact folder within the app folder, and then add a page.tsx file inside the newly created contact folder with the provided code snippet.

File Structure

https://i.sstatic.net/9dNYf.png

const Page = ({
  searchParams,
}: {
  searchParams: { [key: string]: string | string[] | undefined }
}) => {
    const contactWay = searchParams["contact-way"]
    return (
        <>
            <h1>Contact Page</h1>
            <h2>Contact Way: {contactWay}</h2>
        </>
    )
}

export default Page

Go to http://localhost:3000/contact?contact-way=email to see the result:

https://i.sstatic.net/8NkAV.png

CodeSandbox: https://codesandbox.io/p/sandbox/upbeat-leaf-6scwsm?file=%2Fapp%2Fcontact%2Fpage.tsx%3A3%2C5

Getting query parameter with hyphen in nextJS 13 - step by step tutorial

Answer №1

Similar questions

Having trouble with playing the appended HTML5 Video?

After logging out, Next-auth redirects me straight back to the dashboard

The CSS and JavaScript in pure form are not functioning properly upon deployment in Django

Updating an HTML element by using the input value in a text field with JavaScript/jQuery

The progress bar for uploading a file is causing issues with the redirect function in the

Tips for updating multiple bundled javascript files with webpack

Leveraging jQuery to extract a key-value pair and assign it to a new property by

Allow images to be uploaded using the browser-policy package in Meteor

The React forwardRef Higher Order Component is failing to provide a reference to the container element

Greetings! I am looking for information on how to activate CORS in a Ruby on Rails API application deployed on OpenShift for use with an Angular

Facing an issue with importing types in Prisma database seeding using TypeScript with the `type:module` configuration

Is it possible to execute the .push() method on an array a specific number of times without using a for loop?

What is the process for using the CLI to downgrade an NPM package to a previous minor version by utilizing the tilde version tag?

Keyboard control of Material UI Checkbox

intl-tel-input's getExtension function is returning a value of 'null'

Having trouble with setting up ENV variables while deploying the app on Heroku

Exclude React Native module and import web module in Webpack

"Converting an object to a JSON string using URLSearchParams: A step-by

Creating evenly spaced PHP-generated divs without utilizing flexbox