Next.js multi language app with 2 different UI structures

I have a Next.js, Express web application.

I want to make my website with 2 languages, which are English and Arabic.

I read about i18n, but it will not work.

In most languages, like English and Spanish as an example, they are both LTR directed, so translating will work.

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)

So the best solution is to make 2 pages for each page, one Arabic and one English.

import { useRouter } from 'next/router'
 
function BasePage () { 
    const router = useRouter() 
    return ( 
        router.locale === 'en' ? ( 
            <EnglishPage /> 
        ) : ( 
            <ArabicPage /> 
        ) 
    ) 
}

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.

So is there anything else I can do to make 2 pages for each? Or should I consider finding a solution in redirecting?