Question: Performance Issues with RTL Language Internationalization in Next.js App

Answered

Asiatic Lion posted this in #help-forum

Asiatic LionOP

2023-11-23T08:19:16.000Z

Main Concern
I have implemented internationalization for a right-to-left (RTL) language in my Next.js application. However, I've noticed that the initial loading time of the application has significantly increased since this implementation. Could there be something in my code that's affecting performance?

Seeking Solutions
I am looking for insights or suggestions on whether there might be issues in my current implementation that could be causing this slowdown. Additionally, if there are more efficient or performance-friendly alternatives for implementing RTL language support in a Next.js application, I would be very eager to explore and implement them.

--code reference

``import type { Metadata } from "next";
import { Poppins, Tajawal } from "next/font/google";
import "./globals.css";
import Navbar from "@/components/header/navbar";
import Footer from "@/components/footer/Footer";
import { NextIntlClientProvider, useLocale } from "next-intl";

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700", "800", "900"],
});
const arabic = Tajawal({
  subsets: ["arabic"],
  weight: ["400", "500", "700", "800", "900"],
});
export const metadata: Metadata = {
  title: "= Ai",
  description: "Generated by create next app",
};


export default async function RootLayout({ children }: { children: React.ReactNode; params: { locale: string } }) {
  const locale = useLocale();
  let messages;
  try {
    messages = (await import(

@/lang/${locale}.json

)).default;
  } catch (error) {
    messages = (await import(

@/lang/ar.json`)).default;
}

return (
<html lang={locale} translate="no" dir={locale === "en" ? "ltr" : "rtl"}>
<body className={locale === "en" ? poppins.className : arabic.className}>
<NextIntlClientProvider locale={locale} messages={messages}>
<Navbar />
{children}
<Footer />
</NextIntlClientProvider>
</body>
</html>
);
}

Answered by B33fb0n3

I recommend you to use this one: https://nextjs.org/docs/app/building-your-application/routing/internationalization
It's working fine for me and everything loads fast

View full answer