Client Component – useSearchParams (next/navigation)
“use client”;
import { useSearchParams } from “next/navigation”;
export default function Page() {
const searchParams = useSearchParams();
const name = searchParams.get(“name”); // Get ‘name’ from URL
return <div>Hello, {name || “Guest”}!</div>;
}
Example URL:
http://localhost:3000?name=John
Output:Hello, John!
Server Component – searchParams Prop
export default function Page({ searchParams }: { searchParams: { [key: string]: string } }) {
return <div>Hello, {searchParams.name || “Guest”}!</div>;
}
📌 2. Pages Router (pages/ directory) – Using useRouter (Client) & context.query (Server)
🔹 Client Component – useRouter from next/router
import { useRouter } from “next/router”;
export default function Page() {
const router = useRouter();
const { name } = router.query; // Get ‘name’ from URL
return <div>Hello, {name || “Guest”}!</div>;
}
Server-side Rendering (SSR) – context.query
export async function getServerSideProps(context) {
return {
props: {
name: context.query.name || “Guest”,
},
};
}
export default function Page({ name }) {
return <div>Hello, {name}!</div>;
}
🔹 Constructing URLs in Next.js (Pages & App Router)
const url = new URL(“/profile”, window.location.origin);
url.searchParams.set(“id”, “123”);
console.log(url.toString()); // “http://localhost:3000/profile?id=123”