'next/router' to 'next/navigation' migration cheatsheet

When migrating from next/router to next/navigation, there are several key differences to keep in mind. Here's a quick cheatsheet to help you navigate the changes.

Router Methods

Old Way (next/router)

import { useRouter } from "next/router";

const router = useRouter();
router.push("/dashboard");
router.replace("/login");
router.back();

New Way (next/navigation)

import { useRouter } from "next/navigation";

const router = useRouter();
router.push("/dashboard");
router.replace("/login");
router.back();

Query Parameters

The biggest change is how query parameters are handled:

Old Way

const { query } = useRouter();
const { id } = query;

New Way

const searchParams = useSearchParams();
const id = searchParams.get("id");

Remember to update your dependencies and test thoroughly after migration!