Një zhvillues përshkruan ndërtimin e një shablloni faqeje prezantuese për SaaS me React, Vite dhe Tailwind CSS, në anglisht, gjermanisht, frëngjisht, kinezisht dhe arabisht. Sfida kryesore ishte arabishtja, e cila kërkon jo vetëm përkthim, por edhe paraqitje nga e djathta në të majtë (RTL).
Zgjidhja përdor i18next, react-i18next dhe i18next-browser-languagedetector, si dhe Tailwind CSS v3.3 ose më të ri për vetitë logjike. Përkthimet ruhen në skedarë JSON të veçantë për çdo gjuhë brenda src, jo public, duke mundësuar importimin e drejtpërdrejtë. Sipas autorit, vendosja në public do të kërkonte një shtojcë HTTP backend dhe Suspense.
Konfigurimi përcakton anglishten si gjuhë rezervë dhe përditëson atributet dir dhe lang të elementit rrënjë të dokumentit në nisje dhe sa herë ndryshon gjuha. Për arabishten vendoset rtl, ndërsa për gjuhët e tjera ltr. Opsioni escapeValue: false shmang shfaqjen e karaktereve të koduara gjatë përdorimit të variablave, pasi React e kryen vetë këtë mbrojtje.
Në komponentë, përkthimet përdoren përmes useTranslation dhe funksionit t. Tekstet mund të përmbajnë variabla, si emri i planit të abonimit, ndërsa returnObjects mundëson marrjen e listave, për shembull për vlerësimet e përdoruesve ose veçoritë e planeve.
Burimi: DEV Community (Web Dev Feed) — lexoni artikullin e plotë në anglisht.
