"I don't want to leave my friends out, but I also refuse to do manual labor."
Living in Canada, I occasionally met English-speaking friends, whom I wanted to share my project, Insprana.com, with. The problem? Insprana is a Chinese-language website.
The Pain Point
I did not want to shut the door on my English-speaking friends, but it is a dilemma. The site has nearly 30 articles so far. Translating them manually would be double the workload. Even copying and pasting into ChatGPT is a nightmare—this loses all the formatting, the images break, and requires rebuilding every table and bullet point from scratch.
I wanted a solution that kills two birds with one stone:
- Zero Maintenance: I am lazy (in a smart way). I don't want to spend my evenings translating.
- Scalability: Currently, the site is primary in Chinese. What if testing the waters in different languages like Japanese or French later? I needed a system where the translated content becomes an asset I own, ready to be deployed whenever needed.
Why Not Just Use Plugins?
You might ask, "Amice, why not just use a standard plugin?"
Yes, I there are options at the market, but they didn't fit my philosophy:
- The WordPress Way (TranslatePress/Weglot): These services are great, but they charge per word. As my content grows, and so does my bill. Plus, it’s "Vendor Lock-in"—if I stop paying, my translations disappear.
- The Browser Way (Chrome Translate): It’s unpredictable. Sometimes the bar does not pop up. More importantly, the translation is often stiff and robotic. Insprana has a specific "Cyberpunk Zen" vibe; standard Google Translate ruins the atmosphere.
My Stance: Insprana is custom Next.js platform built from scratch (Amice.Dev is also, built from scratch but in Django). I built them for Uniqueness, Ownership, and Scalability. I refuse to be limited by "canned" platforms.
The "In-House AI Colleague"
Instead of renting a translation service, I decided to "recruit" a digital employee. I hired Gemini (and GPT-4o) to be my on-demand translator.
The concept is simple but powerful:
- The Trigger: A reader (or me, the Admin) clicks the "Translate" button.
- The Work: The AI translates the content instantly via API.
- The Asset: The result is saved permanently in my database.
- The Result: The next time someone visits, the translation loads instantly from the DB. Google SEO can read it, and I own the data forever.
Cost? Practically $0.
The Architecture & The "Surgery"
This sounds easy, but the execution was a technical war.
The Stack: Next.js + NeonDB (Prisma) + BlockNote + Gemini/OpenAI.
* Challenge 1 * The Data Structure (It's not just text!)
I use BlockNote as my editor. It is beautiful and highly compatible. I even added custom buttons to it, as shared in another blog. However, BlockNote doesn't save "text" in a simple manner. Instead, it saves a complex, nested JSON structure, as follows. Those "text"'s are in Chinese before translation.
If I just threw this raw JSON at an LLM, it would panic. It might translate the formatting keys, hallucinate new data, or even translate numerical values into written words (converting 4 to "Four"). This would definitely breaks the code.
The Solution: Surgical Extraction.
I built a logic that acts like a surgeon. It extracts the "meat" (text) from the "bones" (JSON structure), sends only the meat to the AI kitchen to be cooked (translated), and then carefully reattaches it to the bones. These are the translated results.
* Challenge 2 * The Hallucinations
Most of you would agree with me: AI is "creative". AI agents are being "too helpful" creating things that they "think" are "good" for us! This is particularly bad for code. Sometimes it eats spaces; sometimes it changes the length of the array.
The Solution: Force them to undergo one-to-one translation.
Remember the challenge #1? BlockNote saved not just sentence-by-sentence, it saves phrase-by-phrase (we called them blocks). This turned out to be a massive advantage to enforce AI phrase-to-phrase translation technically.
More than that, I use Strict Prompting and code logic that checks for structure integrity before accepting the translation. This is so much self-healing!
* Challenge 3 * Reliability
What if Gemini is busy?
The Solution: A Failover Mechanism.
If Google Gemini times out, the system switches to OpenAI GPT-4o-mini to ensure the job gets done. Below is a High-Level Architecture Flowchart discussed in detail in my book "Building an Instant Translator for Your Next.js WebApp".
The Admin Superpower
As the administrator, I can browse my own site, click "Translate" on a new article, wait 3 seconds, and boom—the English version is generated and saved to the database forever. It becomes my ASSETS! I have effectively proofread and deployed a new language version with a single click. See the demo:
Future Roadmap
This is not just about English. The architecture is language-agnostic.
With a few tweaks, I can create insprana.com/jp/blog or insprana.com/fr/blog. The system simply looks up the Japanese or French column in the database.
I am essentially building a global content management system, one block at a time.
Call to Action
I built this because I wanted full control and zero monthly fees. It turns out to be one of the most practical features I've added to my SaaS.
Want to build this for your own Next.js app?
I have packaged the source code, the "Surgical Extraction and Injection" logic, and the exact Prompts I use into a guide.
-> Get the Source Code & Guide on My Store
Curious to see it in action?
-> Visit Insprana.com to try the button (click the Translate button)
Want to enable it on your website?
-> Book an appointment with me
