Next.js website · AI translation, per-language SEO
An export website in four languages
Machine translation of an export website makes predictable mistakes: the Belukha brand turns into “beluga”, cream honey into face cream, and the word “healing” creeps into the description — which gets a listing removed in the UAE or Chinese market. Here the neural network’s draft isn’t published straight away: the studio checks it against the glossary, the numbers in the original, search engine length limits and a list of forbidden claims, fixes everything unambiguous itself and leaves only disputed points to a human. A buyer from Dubai sees the site right to left with prices in dirhams and sea freight times, and the manager receives the request in Russian with a summary.
Scenario: Belukha honey company from Barnaul — fictional: six products (honey, cream honey, fireweed tea, pine nuts), shipments to China, Central Asia, Mongolia, the UAE, Saudi Arabia and Turkey.
Open the demo
The language is chosen from your browser settings; the translation studio is linked in the site footer.
Leads from the demo website are visible only to you, in the “Owner dashboard”: the server validates the form and stores nothing.
What the demo shows
How to try it
Open it in another language
Switch the language in the header to 中文 or العربية: the page URL is translated too, and the Arabic version flips right to left.
Price a shipment
In the calculator, choose cream honey, 5,000 kg and DAP Dubai — you’ll see the volume discount, delivery and transit time. Press “Request an exact price”.
Send a request
The calculator parameters are already in the form. Leave the email empty — an error appears in the page language before sending.
Check a translation
Open the “Translation studio” in the footer: the Chinese draft calls the brand “beluga”. Press “Fix automatically”, then “Approve”.
Open the owner dashboard
The request is in the “Leads” tab in Russian — with the country, volume, delivery terms and site language.
No paid neural networks
There are no paid neural network requests: the translation drafts in the studio are prepared in advance, while the checks and auto-fixes are real and run in the browser. In production, the draft is written by a language model with the glossary in the prompt. Forms are validated on the server, but nothing is stored: the lead is returned to your browser and visible only to you in the “Owner dashboard”. The company, prices and exchange rates are fictional.
The demo runs without OpenAI, YandexGPT or GigaChat API keys. Wherever a production system calls a model, there’s a local stub with the same interface — so the demo is free, always available and never makes things up.
What a production project adds
- Translation by a language model (YandexGPT, GPT or DeepL) with a glossary and translation memory in the request; new pages are translated on publication
- Pre-publication checks in the CMS: the same rule set plus proofreading by a native speaker for disputed cases
- Central Bank exchange rates and carrier rates on a schedule, so calculator prices are always current
- Requests in amoCRM or Bitrix24 with the client’s message translated into Russian, and the manager’s reply translated back into the client’s language
- Search engines by market: Yandex and Google, Baidu for China, separate counters and goals for each language version
Stack
- All demos by stack:
- Next.js
- React
- TypeScript
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Server Actions
Based on
Books and university courses whose ideas are at work in this demo.
Book · John Little
The Warrior Within
The site changes shape for the language: four languages, including right-to-left Arabic, with their own fonts, currency and page addresses.
Developer’s comment
Anton Goncharov
AI systems developer · Python
For business
- A foreign buyer sees the site in their language, in their currency and with delivery times to their city — and sends an inquiry instead of going to a competitor with a clear website.
- Machine translation errors are caught before publication: the brand doesn’t turn into “beluga”, and health claims forbidden for food don’t reach the UAE and Chinese markets.
- The manager gets the inquiry in Russian with all supply parameters and doesn’t spend three days in correspondence clarifying volume and terms.
For developers
- The root layout lives in the [lang] segment: each version has its own lang and dir, fonts for Chinese characters and Arabic load only on their pages; section and product URLs are translated and mapped through a dictionary.
- On the first visit proxy.ts picks the language by cookie and Accept-Language; metadata with hreflang and the sitemap are built from one SEO data module.
- Translation checks are pure functions with tests: glossary, normalization of numbers from different numeral systems, length limits, forbidden claims, auto-correction of unambiguous errors.
Tips
Tip 01
Translate page URLs and link versions with hreflang — otherwise a search engine will show a Chinese user the English page or merge the versions as duplicates.
Tip 02
Keep a glossary of the brand and terms from day one: a neural network translates well, but differently every time.
Want the same for your business?
Tell me about your task — I’ll tell you what from the demo fits, how long it will take and what I’ll need from you.
Other demos in this section
All demos- live
Next.js website · service landing page
Dental clinic landing page
A one-page clinic website that brings in patients: a quiz suggests a treatment, a calculator prices the plan with installments, online booking shows doctors’ free time, and an AI consultant answers from the price list. The headline is A/B-tested; leads and goals are visible in the owner dashboard.
- Next.js
- React
- TypeScript
- live
Next.js website · B2B, multi-page
Manufacturing company website
A multi-page website for a steel structures plant that sells on its own: a calculator prices a building with a live drawing, a builder assembles a technical specification, case studies filter by industry, you can apply for a job with a CV, and site search understands queries in plain words.
- Next.js
- React
- TypeScript
- live
Next.js website · catalog, map, comparison
Real estate catalog with smart search
A real estate agency’s apartment catalog: type “two-bedroom near the metro under 12 million” and the search sets the filters itself, shows apartments on a city map, compares up to four and sends new ones to Telegram.
- Next.js
- React
- TypeScript
- live
Next.js website · customer account, AI assistant, Telegram
Customer account portal
A print shop’s customer account: orders with production stages, layout approval with comments right on the layout, invoices paid via SBP, documents with an electronic signature, a new order with a price calculation, a chat with an AI assistant and a manager, notifications in Telegram.
- Next.js
- React
- TypeScript
- live
Next.js website · Python in the browser, AI mentor
Online school with a student account
An online analytics school: a landing page with a Python task checked right in the browser, a level test with a personal curriculum, installments with a tax deduction estimate, a student account with homework and AI review, an AI mentor that answers from course materials and a certificate verified by QR code.
- Next.js
- React
- TypeScript
- live
Next.js website · booking by plate number, photo report, approval
Car service with booking and repair status
A car service website: booking by plate number or VIN into free bay slots, a “what’s knocking?” diagnosis with likely causes and a price range, repair status with a photo report, approval of extra work and payment by link, and a garage with service history and a forecast of the next maintenance.
- Next.js
- React
- TypeScript
- live
Next.js website · case analysis, claim letters, calculators
Law firm with AI case analysis
A law firm website: describe your situation in your own words right in the hero, get an AI analysis with an assessment of prospects, a claim letter in Word, court fee, penalty and limitation period calculators, a document checklist, case progress in a client account, a price builder and booking with a lawyer.
- Next.js
- React
- TypeScript
- live
Next.js SaaS website · sandbox, dashboard, API
SaaS: AI replies to WB and Ozon reviews
The website and dashboard of a SaaS service that replies to Wildberries and Ozon reviews: a sandbox with review analysis and checks, autopilot by rating, a queue with approval, topic analytics, plans with a payback calculator, store connection by key, an invoice by tax ID and API documentation with a live console.
- Next.js
- React
- TypeScript
- live
Next.js restaurant website · menu, table booking, delivery
Restaurant with delivery
A restaurant website with delivery: a menu with allergen and diet filters, AI dinner selection from a plain phrase, table booking on a floor plan showing free tables for the chosen time, a cart with delivery zones, a minimum order and promo codes, and order tracking with the courier on a map.
- Next.js
- React
- TypeScript
- live
Next.js fitness studio website · booking, memberships, account
Fitness studio
A small-group fitness studio website: a weekly schedule with spots and two-click booking, a waiting list that moves you into the group automatically, memberships you can freeze from your account, an AI 4-week training plan from five questions and a personal account with attendance stats.
- Next.js
- React
- TypeScript
- live
Next.js IT conference website · program, tickets, networking
Conference website
A two-day conference website: a program by room and track with a personal schedule, AI selection of talks without overlaps by role and free text, tickets in price waves with promo codes and a team discount, a QR code for every attendee checked at the entrance, and networking with matching and meetings during breaks.
- Next.js
- React
- TypeScript
- live
Next.js corporate logistics website · calculator, tracking, AI request
Transport company website
A transport company’s corporate website: a calculator that compares groupage and a dedicated truck at once, shipment tracking with the truck on a map, AI parsing of a request from an email or waybill with missing fields highlighted, a map of warehouses and terminals with a storage calculation, a carrier application with an eligibility check, and company details with checksum validation.
- Next.js
- React
- TypeScript