SearchParams works well in local but not in production

[mkalsi25]

I am trying to use app router using Search Params. Here some code you can see

// app/page.tsx

export default async function page(props: any) {
  let id = "SOMEID";

  const { searchParams } = props;

  if (searchParams.id) {
    id = searchParams.id;
  }

  const data = getData(id)

  return { \\ SOME COMPONENT TO RENDER \\ }

It works well in local routes such as :

http://localhost:3000 // working
http://localhost:3000?id="123" // working 

but doesn't seems to be working in production routes such as:

https://production-url  // working
https://production-url?id="123"` // NOT working

Keep in mind, I deployed my NextJs app to AWS. so if there's something I need to configure in AWS kindly let me know or if I am doing it wrong way, please elaborate!

Looking forward to hear.

[icyJoseph]

Maybe you have some kind of redirect? I think sometimes a redirect might not carry over the query parameters.

[mkalsi25]

Apologies for delayed response.

I don't think there's any kind of redirect while using query parameters url.

[icyJoseph]

Right, not even from the deploy environment configuration? If you setup middleware do you see the URL arriving with queries?

[mkalsi25]

Thank you for your response.

use of NEXTJS Link and useRouter fixed this issue for me. I was using window.open(url, _self) (not sure why it is not working with it but anyways my issue is solved!)

[icyJoseph]

Don't forget to mark as resolved. I think your own comment is a good answer.

[mkalsi25]

Sure.

Thank you for your time and efforts, mate @icyJoseph

[Amanullah-M360ict]

@mkalsi25 How did you fix it?

[mkalsi25]

@mkalsi25 How did you fix it?

with the help of NEXTJS Link and useRouter.

If still doesn't work, please share your case with good explaination / or maybe share code. Thanks.

[bnohad]

[icyJoseph]

How something as basic as QUERY PARAMS is not working on a framework like Next.js?

after reading this doc: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
i tried the following:

export const dynamic='force-dynamic';
export const runtime='edge';

after deploying to Vercel, query params are just being ignored by the app! this issue occurs on every mobile browser i have tried so far. this makes Vercel & next.js useless for developing basic applications to be supported on mobile devices.

Show us some code? Is your app behind another layer? Like a CDN? Isn't it odd that it would happen on mobile too? Perhaps you have some sort of Middleware or user agent based logic?

[bnohad]

it seems like a problem with NextUI with the combination of IOS devices, on Android it seems to work fine.
init project using the nextui-cli:

nextui init my-nextui-app

you can see the code here: https://github.com/bnohad/nextui-bad-queris-mobile
live demo: https://queryparams-notworking.vercel.app/?dothis=ok&whendothis=soonokay&whynotnow=okay

the demo works fine on a computer, but doesn't work on IOS mobile devices.

i will also post it in their repo because it seems like this issue doesn't occur on vanilla nextjs projects.

[mutuotakelvin]

i am having the same problem... the app works on localhost but not when i deploy:
"use client";

import { useMutation } from "convex/react";
import { useEffect, useState } from "react";
import { api } from "@/convex/_generated/api";
import { infomation } from "@/data/constants";
import { ShopList } from "./_component/shop-list";
import { SearchInput } from "./_component/search-input";
import Image from "next/image";
import dynamic from "next/dynamic";
import { useRouter, useSearchParams } from 'next/navigation';

// Dynamically import Map with SSR disabled
const Map = dynamic(() => import('@/components/map/Map'), { ssr: false });

interface DashboardProps {
searchParams: {
search?: string;
favorites?: string;
filter?: string;
};
}

const Dashboard = ({ searchParams }: DashboardProps) => {
const store = useMutation(api.users.store);
const [searchQuery, setSearchQuery] = useState('');
const [isClient, setIsClient] = useState(false);

const sp = useSearchParams()

useEffect(() => {
const storeUser = async () => {
await store({});
};
storeUser();
setIsClient(true);
}, [store]);

const isEmptySearchParams = !searchParams.search && !searchParams.filter;

return (

{isEmptySearchParams ? (

) : (

)}

);
};

export default Dashboard;

the isEmptySearchParams is false when is i do filters and searches on localhost but not on production as it state it is undefined... and remains to true