I am using next-intl
package to make internalization on my Next app. In the server side I need to get the URL so I can look to param and make a request to my backend with it. Using referer
header worked fine in local but when I deployed my app to Vercel it doesn’t worked. To troubleshoot, I logged every header in there and find out there is no header I can use to get the url params.
My question is what can I use in getUserLocale
function to get url other than referer to make my call.
This is request.ts
file which is default file called for next-intl package:
import { getUserLocale } from "@/services/locale";
import { getRequestConfig } from "next-intl/server";
export default getRequestConfig(async () => {
// Provide a static locale, fetch a user setting,
// read from `cookies()`, `headers()`, etc.
const locale = await getUserLocale();
return {
locale,
messages: (await import(`../messages/${locale}.json`)).default,
};
});
and here I need to read URL so I can make the request I need.
"use server";
import { cookies, headers } from "next/headers";
import { Locale, defaultLocale } from "../i18n/config";
const COOKIE_NAME = "language";
const languageMap = {
English: "en",
} as const;
export async function getUserLocale() {
// WHEN I LOG THIS ON PRODUCTION THERE IS NO ITEM TO GET URL
console.log(
"headers",
(await headers()).forEach((value, key) => {
console.log("header", key, value);
}),
);
const referer = (await headers()).get("referer");
console.log("referer", referer);
if (!referer) {
return defaultLocale;
}
const url = new URL(referer); //http://localhost:3002/?some-id-that-i-need=123
const id = url.searchParams.get("some-id-that-i-need");
console.log("id", id);
// So I can use that Id to make a request to the backend and get the language
return defaultLocale;
}
export async function setUserLocale(locale: Locale) {
(await cookies()).set(COOKIE_NAME, locale);
}