我正在使用 NextJS 13.4 和应用程序目录（服务器组件）和 date-fns。我还使用 next-intl 作为国际化库。
我想在应用程序开始在服务器端渲染之前设置正确的区域设置和用户的时区，以便服务器上渲染的内容与浏览器渲染的内容相匹配。
// arc/app/[locale]/layout.tsx
export default async function RootLayout({ children, params }: Props) {
const locale = useLocale();
// Show a 404 error if the user requests an unknown locale
if (params.locale !== locale) {
notFound();
}
// set locale for date-fns
try {
const dateFnsLocale = (
(await import(`date-fns/locale`)) as Record<string, Locale>
)[locale];
setDefaultOptions({
locale: dateFnsLocale,
});
} catch (error) {
throw new Error("invalid locale for date-fns", { cause: error });
}
...
return (
<html lang={locale}>
<head />
<body className={classNames(aeonicFontClassName, "text-tixy-1000")}>
{children}
<DateFnsLocaleLoader locale={locale} />
</body>
</html>
);
// DateFnsLocaleLoader
"use client";
import { FC, useEffect } from "react";
import { setDefaultOptions } from "date-fns";
type Props = {
locale: string;
};
export const DateFnsLocaleLoader: FC<Props> = ({ locale }) => {
useEffect(() => {
const load = async () => {
try {
const dateFnsLocale = (
(await import(`date-fns/locale`)) as Record<string, Locale>
)[locale];
setDefaultOptions({
locale: dateFnsLocale,
});
} catch (error) {
throw new Error("invalid locale for date-fns", { cause: error });
}
};
load();
}, [locale]);
return null;
};
问题在于服务器与客户端上渲染的内容仍然不匹配。
有同样的问题。这对我有用：
'use client'
import { setDefaultOptions } from 'date-fns';
import { ka } from 'date-fns/locale';
export function ClientComponent({ initialLocale }) {
setDefaultOptions({
locale: {
ka,
en: undefined,
}[initialLocale],
});
return null;
}