0

I'm currently working on a multilanguage application using Next.js, and I'm facing an issue with dynamically importing the RTL (Right-to-Left) CSS file when switching to the Arabic language. My goal is to have the application switch between RTL and LTR (Left-to-Right) layouts based on the selected language.

  1. I attempted to put the import statement inside a component and use lazy loading, but Next.js threw an error stating that I can only import CSS in the _app component. Global Css cannot be imported from files other than your custom

  2. I also tried importing a variable from a CSS file and using it to conditionally apply styles, but the application seemed to ignore the condition entirely (the rtl styles all applied no matter what).Importing the styles from css file image:2 applying the styles conditionally

  3. Additionally, I experimented with using a conditional rendering approach like {lang === "ar" && <link rel="stylesheet" href="style.css" />}, but Next.js was unable to locate the CSS file regardless of what I tried. applying the link tag conditionally

  4. I tried importing it in a conditional statement : it works when i switch to arabic, but statys like that and i cant switch back to other languages (ignore the squiggly line importing styles in a condition

  5. I even tried putting all the classes in a javascript variables and then using them in the style tag. But for some reason, some styles get applied correctly and others get messed up storing css classes in a js string

I'd greatly appreciate any insights or alternative solutions from the community to dynamically switch the CSS between RTL and LTR layouts based on the selected language in my Next.js application.

Gandrick
  • 1
  • 1
  • Please show a [mre] of at least one of the things you listed here as having tried. All three will probably work, no need for alternatives, just need to debug the problem you had with one of them. – TylerH Jul 20 '23 at 21:01
  • Hello @TylerH. Thank you for your comment. I edited the post and added all the screenshots for the solutions that i have tried. – Gandrick Jul 21 '23 at 07:09
  • Please provide enough code so others can better understand or reproduce the problem. – Community Jul 21 '23 at 07:48

1 Answers1

0

I think you need to check Next.js internationalization (i18n)

NextJs Docs link: https://nextjs.org/docs/app/building-your-application/routing/internationalization

And here is the i18n for NextJs: https://next-intl-docs.vercel.app/docs/getting-started

If it is just for RTL Behaviour you can check this guide from "Ahmed Shadeed" he is specialized in RTL

RTL Guide: https://rtlstyling.com/ https://rtlstyling.com/posts/rtl-styling

Mahmoud Abd Al-Aziz
  • 21
  • 3
  • Hello @Mahmoud Abd Al-Aziz, Thank you for your answer. I don't think it's a next.js internalization problem. The multilanguage works fine and it is configured correctly. But here i have a CSS file that i want to import if the arabic language is chosen and i want to "un-import" it if another ltr language is chosen. I read the guide of Ahmed Shadeed but the css file that i got was not made by me, and i can't go through 2000 lines to change them the way it is shown in the guide. – Gandrick Jul 21 '23 at 07:17
  • In this case, you are looking for conditional-style rendering. You want to render styles depending on a specific value which is the RTL/LTR. The first point will be to get this value first and then create a conditional rendering depending on the RTL/LTR value I don't how to achieve that direct but my first approach will be that you create a checker function that checks if the user is in RTL or LTR and then depending on the result value you will render the Styles. – Mahmoud Abd Al-Aziz Jul 21 '23 at 14:47
  • Check this: https://stackoverflow.com/questions/13071717/how-to-identify-if-user-is-typing-in-rtl-or-ltr-language Another approach would be that you set the RTL/LTR value with some condition when the condition is true then LTR and if False RTL But as I understand you can do this with some classes not full CSS Styles unless you will Check this: https://stackoverflow.com/questions/62706952/style-only-elements-with-direction-rtl – Mahmoud Abd Al-Aziz Jul 21 '23 at 14:57
  • This could help, I tried to implement the idea of conditional rendering with different CSS style-sheets. https://jsbin.com/parayodobe/edit?js And yes the link tag can be used outside the head. check here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link Navigate to the part: Other usage notes: These are all I could help with. I hope that was beneficial to you. – Mahmoud Abd Al-Aziz Jul 21 '23 at 15:13
  • Hello Mahmoud Abd Al-Aziz ! Thank you so much for your help ! I am having a trouble locating the rtl css file in the next js project :/. Because i think that the path in the href of the link tag is not the same in the import. The _app is located at the /pages folder and the rtl.css is located at the /styles i tried using the absolute path (@/styles/rtl.css) or relative path (../styles/rtl.css) and i tried all the possible paths but i am still not getting the styles applied :/ (just to give you more information about the project, i have a global css (ltr) and an rtl one) Thank you – Gandrick Jul 21 '23 at 22:22