Next/13/Replace Use Search Params

A recent update in Next.js brought a breaking change: the useSearchParams hook no longer includes params. To ease the migration, the new useCompatSearchParams hook can be used. This hook mimics the behavior of the old useSearchParams in two ways:

• it includes both params and searchParams
• params overwrite any conflicting values in searchParams

Example

Before

import { useSearchParams } from 'next/navigation';

export async function Component() {
 const params = useSearchParams();
 return <div>My Component</div>;
}

After

import { useCompatSearchParams } from 'hooks/utils';

export async function Component() {
 const params = useCompatSearchParams();

 return <div>My Component</div>;
}