As I work on my multilanguage application with Next.js, I'm encountering a challenge in dynamically importing the RTL CSS file for Arabic language support. My aim is to seamlessly switch between RTL and LTR layouts based on the selected language.
My initial attempt was to use lazy loading within a component for importing, but I faced an error from Next.js indicating that CSS can only be imported in the _app component. Learn More
I then experimented with conditionally applying styles by importing a variable from a CSS file, but the application seemed to ignore the conditions specified. Importing Styles Example
Further attempts involved using conditional rendering like {lang === "ar" && } but Next.js struggled to locate the CSS file. Applying Link Tag Conditionally
Importing within a conditional statement worked when switching to Arabic but caused issues reverting back to other languages. Conditional Import Example
One strategy involved storing all classes in JavaScript variables then embedding them in style tags, yet some styles were not applied correctly. Storing CSS Classes in JS String Approach
I welcome any suggestions or alternative solutions from the community on how to effectively switch CSS between RTL and LTR layouts based on language selection within my Next.js application.