Next.js Replace useSearchParams with useCompatSearchParams

This automation replaces useSearchParams with useCompatSearchParams.

Next.js
Filemod
Estimated time saving
2 minutes/occurrence
Change mode
Autonomous
Applicability criteria

Next.js version is greater or equal to 13.4.

Made by
Codemod.com
Codemod.com

Usage →

Codemod CLI:

intalling vs code extension tooltip icon
codemod next/13/replace-use-search-params
copy CLI command icon

Codemod VS Code extension:

intalling vs code extension tooltip icon
vs code logo
Run in VS Code

Description

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>;
}