Next.js Discord

Discord Forum

Reading Url from a server component

Answered
Saltwater Crocodile posted this in #help-forum
Open in Discord
Saltwater CrocodileOP
Hi, I am trying retrieve the value from URLParams into my server component, however , searchParams returns an empty object, I have read and followed Nextjs tutorial doc on it, but it is not working in my application. Here is my code below and i have also attached my app folder directory.

Here is the code in my Search component
"use client";

import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useDebouncedCallback } from "use-debounce";

const Search = ({ placeholder }) => {
const searchParams = useSearchParams();
const router = useRouter();
const pathname = usePathname();

const handleSearch = useDebouncedCallback((e) => {
const params = new URLSearchParams(searchParams);

if (e.target.value) {
e.target.value.length > 2 && params.set("q", e.target.value);
} else {
params.delete("q");
}
router.replace(${pathname}?${params});
}, 300);

return (
<div>
<input type="text" placeholder={placeholder} onChange={handleSearch} />
</div>
);
};

export default Search;

Here is the server component code

import Search from "./search-bar";

const UsersPage = async ({ searchParams }) => {
const q = searchParams?.q || "";

console.log(searchParams, "searchparams");

return (
<div>
<Search placeholder="Search for a user..." />
</div>
);
};

export default UsersPage;
Answered by Saltwater Crocodile
Problem solved by extracting the searchParams in the middleware and passing it to the Next Response Url

export function middleware(request) {


const {
nextUrl: { search },
} = request;
const urlSearchParams = new URLSearchParams(search);
const params = Object.fromEntries(urlSearchParams.entries());

const urlParams = "?" + new URLSearchParams(params);



const pathname = request.nextUrl.pathname;

const pathnameIsMissingLocale = i18n.locales.every(
(locale) => !pathname.startsWith(/${locale}/) && pathname !== /${locale}
);

if (pathnameIsMissingLocale) {
const locale = getLocale(request);
if (locale === i18n.defaultLocale) {
return NextResponse.rewrite(
new URL(
/${locale}${ pathname.startsWith("/") ? "" : "/" }${pathname}${urlParams},
request.url
)
);
}
return NextResponse.redirect(
new URL(
/${locale}${ pathname.startsWith("/") ? "" : "/" }${pathname}${urlParams},
request.url
)
);
}
}
View full answer

2 Replies

Saltwater CrocodileOP
This started happening since i implemented the localisation feature
Saltwater CrocodileOP
Problem solved by extracting the searchParams in the middleware and passing it to the Next Response Url

export function middleware(request) {


const {
nextUrl: { search },
} = request;
const urlSearchParams = new URLSearchParams(search);
const params = Object.fromEntries(urlSearchParams.entries());

const urlParams = "?" + new URLSearchParams(params);



const pathname = request.nextUrl.pathname;

const pathnameIsMissingLocale = i18n.locales.every(
(locale) => !pathname.startsWith(/${locale}/) && pathname !== /${locale}
);

if (pathnameIsMissingLocale) {
const locale = getLocale(request);
if (locale === i18n.defaultLocale) {
return NextResponse.rewrite(
new URL(
/${locale}${ pathname.startsWith("/") ? "" : "/" }${pathname}${urlParams},
request.url
)
);
}
return NextResponse.redirect(
new URL(
/${locale}${ pathname.startsWith("/") ? "" : "/" }${pathname}${urlParams},
request.url
)
);
}
}
Answer