title: Next.js multi language app with 2 different UI structures
body: <p>I have a Next.js, Express web application.</p>
  <p>I want to make my website with 2 languages, which are English and Arabic.</p>
  <p>I read about i18n, but it will not work.</p>
  <p>In most languages, like English and Spanish as an example, they are both LTR directed, so translating will work.</p>
  <p>But I can't only translate in Arabic, because I also have to make the components RTL, so I have to change some CSS in the Arabic version. (different UI structure)</p>
  <p>So the best solution is to make 2 pages for each page, one Arabic and one English.</p>
  <pre class="lang-js prettyprint-override"><code>import { useRouter } from 'next/router'
   
  function BasePage () { 
      const router = useRouter() 
      return ( 
          router.locale === 'en' ? ( 
              &lt;EnglishPage /&gt; 
          ) : ( 
              &lt;ArabicPage /&gt; 
          ) 
      ) 
  }
  </code></pre>
  <p>But this method will not work because it will be very bad for SEO, since nothing is going to be SSRd all pages will be components.</p>
  <p>So is there anything else I can do to make 2 pages for each? Or should I consider finding a solution in redirecting?</p>