4

I have two different CSS files. One for English and One for Arabic. I am using next-i18next for internationalized routing in my next js App.

What I want is to load the CSS files based on the route. I have managed to make it work in my local system with this below code but when I host it in vercel It gives me an Error that both style.css and style-rtl.css are bundled as one.

_app.js file

import { appWithTranslation } from 'next-i18next';
import Router, { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  if (router.locale === 'en' || router.locale === 'ru') {
    require('../styles/css/style.min.css');
  } else if (router.locale === 'ar') {
    require('../styles/css/style-rtl.min.css');
  }
  return (
          <Layout>
              <Component {...pageProps} />
          </Layout>
        )
}

export default appWithTranslation(MyApp);

I also tried this second method of using next/head still no results _app.js file

import { appWithTranslation } from 'next-i18next';
import Router, { useRouter } from 'next/router';
import Head from 'next/head';

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  return (
<>
 {router.locale === 'en' || router.locale === 'ru' ? (
          <Head>
            <link rel="stylesheet" href="../styles/css/style.min.css" />
          </Head>
        ) : (
          <Head>
            <link rel="stylesheet" href="../styles/css/style-rtl.min.css" />
          </Head>
        )}
          <Layout>
              <Component {...pageProps} />
          </Layout>
<>
        )
}

export default appWithTranslation(MyApp);

How do I overcome this issue ???

Life Smile
  • 53
  • 1
  • 4

0 Answers0