I'm working on a multilingual app that needs to support both english and arabic, knowing that bootstrap provides support for rtl, i'm trying to apply the styles based on locale, so i made a variable that conditionally holds imported file based on locale change and inserting it in the link element in the header, but i have noticed this doesn't work properly, for example if i visit page login then navigated back to homepage the class offset-md-1 will be applied twice from both files so it will apply both margin-left and margin-right and it will mess up the layout
layout.js
export default async function RootLayout({ children, params }) {
...
const bootstrapCss =
locale === "ar"
? "/[email protected]/dist/css/bootstrap.rtl.min.css"
: "/[email protected]/dist/css/bootstrap.min.css";
return (
<html lang={locale} dir={dir}>
<head>
<link rel="stylesheet" href={bootstrapCss} key={locale} />
</head>
<body className={`${rubik.className} sans-serif`}>
<NextIntlClientProvider messages={messages}>
<Header />
{children}
<Footer />
</NextIntlClientProvider>
</body>
</html>
);
}