Automatic page directions #1739

AliAlmasi · 2025-02-21T20:25:11Z

AliAlmasi
Feb 21, 2025

When I want to use Persian Language on my page, it requires me to toggle page direction to "rtl". I am using pages router and I tried a couple tricks people used on their app router using projects, like this one:

import { Html, Head, Main, NextScript } from "next/document";
import { getLocale } from "next-intl/server";

export default async function Document() {
	const locale = await getLocale();

	return (
		<Html lang="en">
			<Head>
				<link rel="shortcut icon" href="/favicon.png" type="image/png" />
				<link rel="apple-touch-icon" href="/favicon.png" />
				<link rel="manifest" href="/api/manifest" />
			</Head>
			<body className="antialiased" dir={locale === "fa" ? "rtl" : "ltr"}>
				<Main />
				<NextScript />
			</body>
		</Html>
	);
}

As you can see in the code, a getLocale function is being used to determine the locale user is reading. This seems right, but it gives this error:

Error: `getLocale` is not supported in Client Components.

This is because I'm using page router and I've implemented this in the _document.js file.

Any idea what should I do instead?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Automatic page directions #1739

{{title}}

Replies: 0 comments

Select a reply

Automatic page directions #1739

AliAlmasi Feb 21, 2025

Replies: 0 comments

AliAlmasi
Feb 21, 2025