next.jsbootstrap-5multilingualdirection

NextJS conditionally import bootstrap based on HTML document direction

I have multi-lingual app and i want to import bootstrap.min.css if locale is en and import rtl.min.css if locale is ar:

layout.js

  if (locale === "ar") {
    import("bootstrap/dist/css/bootstrap.rtl.min.css");
  } else {
    import("bootstrap/dist/css/bootstrap.min.css");
  }

this approach is not working as it will import both files for some reason, how to import them conditionally based on locale ?

Solution

  • I had to use link in head tag:

    export default async function RootLayout({ children, params }) {
...

    locale === "ar"
      ? "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.rtl.min.css"
      : "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css";

  return (
    <html lang={locale} dir={dir}>
      <head>
        <link rel="stylesheet" href={bootstrapCss} />
      </head>
      <body className={`${roboto.className} sans-serif`}>
        <NextIntlClientProvider messages={messages}>
          <Header />
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );

}