searchParams are not working

Unanswered

Yellowfin tuna posted this in #help-forum

Yellowfin tunaOP

2024-02-21T16:01:09.000Z

export async function GET(req: NextRequest) {
    try {
        const searchParams = req.nextUrl.searchParams;

        const condition = searchParams.get("condition")

        console.log(condition)
    } catch (error) {
        console.error('GET_PRODUCTS', error);
        return new NextResponse('Internal error', { status: 500 });
    }
}

in console am getting undefined but this is url am currently on ".../electronics?condition=used" why I can't get value of condition?

18 Replies

Toyger

2024-02-21T16:21:58.000Z

Is that an API function?

How are you calling it?

not-milo.tsx

2024-02-21T16:31:41.000Z

searchParams is an object so you should access values using the dot notation (req.nextUrl.searchParams.condition).

[From the docs](https://nextjs.org/docs/app/api-reference/functions/next-request#nexturl):

// Given a request to /home?name=lee, searchParams is { 'name': 'lee' }
request.nextUrl.searchParams

@Toyger Is that an API function? How are you calling it?

Yellowfin tunaOP

2024-02-21T16:34:04.000Z

yeah

@not-milo.tsx `searchParams` is an object so you should access values using the dot notation (`req.nextUrl.searchParams.condition`). [From the docs](<https://nextjs.org/docs/app/api-reference/functions/next-request#nexturl>): ts // Given a request to /home?name=lee, searchParams is { 'name': 'lee' } request.nextUrl.searchParams

Yellowfin tunaOP

2024-02-21T16:34:27.000Z

yeah I tried everything but always returns null

export async function GET(req: NextRequest) {
    try {
        const condition = req.nextUrl.searchParams.condition;

        console.log(condition)
    } catch (error) {
        console.error('GET_PRODUCTS', error);
        return new NextResponse('Internal error', { status: 500 });
    }
}

error:

Property 'condition' does not exist on type 'URLSearchParams'.ts(2339)
any

and am still on

http://localhost:3000/products/electronics?condition=used

url

and this is weird

export async function GET(req: NextRequest) {
    try {
        const url = new URL(req.url);

        console.log(url)
    } catch (error) {
        console.error('GET_PRODUCTS', error);
        return new NextResponse('Internal error', { status: 500 });
    }
}

when I console url it returns this :

URL {
  href: 'http://localhost:3000/api/products',
  origin: 'http://localhost:3000',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'localhost:3000',
  hostname: 'localhost',
  port: '3000',
  pathname: '/api/products',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}

I guess in URL href should be

http://localhost:3000/products/electronics?condition=used

instead of

http://localhost:3000/api/products

am really confused right now.

not-milo.tsx

2024-02-21T16:42:38.000Z

And doing it like this still returns null?

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const condition = searchParams.get('condition')

  // ...
}

@not-milo.tsx And doing it like this still returns null? ts export async function GET(request: Request) { const { searchParams } = new URL(request.url) const condition = searchParams.get('condition') // ... }

Yellowfin tunaOP

2024-02-21T16:43:42.000Z

yup still null

am stuck here all day trying various things but nothing seems to work...

@Yellowfin tuna and this is weird js export async function GET(req: NextRequest) { try { const url = new URL(req.url); console.log(url) } catch (error) { console.error('GET_PRODUCTS', error); return new NextResponse('Internal error', { status: 500 }); } } when I console url it returns this : URL { href: 'http://localhost:3000/api/products', origin: 'http://localhost:3000', protocol: 'http:', username: '', password: '', host: 'localhost:3000', hostname: 'localhost', port: '3000', pathname: '/api/products', search: '', searchParams: URLSearchParams {}, hash: '' }

Yellowfin tunaOP

2024-02-21T16:45:23.000Z

but this is really weird, why am I getting api url

and when I did this :

const { pathname } = new URL(request.url)
console.log(pathname)

in console returns this :

/api/products

not-milo.tsx

2024-02-21T16:50:58.000Z

For some reason your search params are getting removed from the url in the request object...

Yellowfin tunaOP

2024-02-21T16:56:21.000Z

omg am retarded, I didn't pass params to my api

my bad bro

not-milo.tsx

2024-02-21T17:01:26.000Z

that's hilarious, but it happens to everyone sooner or later ðŸ˜‚