Translator Template

What it does

18 languages

The most-used languages, from Spanish and French to Japanese, Hindi and Arabic. Add more with a line each.

Swap in one click

Flip source and target, and the translation becomes the new source text.

Up to 2,000 characters

Enough for emails and support replies, and a limit that keeps a deployed copy from being misused.

Keeps your key private

The page calls a Vercel function in api/, which holds the key, checks the input and limits each visitor to 10 translations a minute.

Runs locally in one command

npm run dev serves the page and runs the api/ functions together, the same way Vercel does, with no CLI to install.

How it works

The Vercel function: it checks the text and languages, then calls Translator.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { guard, callApi, respond, fail, str } from '../lib/apiverve.js';

// The languages the page offers. Add codes here and in src/App.vue to offer more.
const LANGUAGES = ['en', 'es', 'fr', 'de', 'it', 'pt', 'nl', 'ru', 'ja', 'ko', 'zh', 'ar', 'hi', 'tr', 'pl', 'vi', 'th', 'sv'];

/** POST /api/translate { text, source, target }: the text translated from source to target. */
export async function POST(request) {
  const blocked = guard(request);
  if (blocked) return blocked;

  const body = await request.json().catch(() => ({}));
  const text = str(body.text, 2000);
  const { source, target } = body;
  if (!text) return fail('Enter text to translate');
  if (!LANGUAGES.includes(source) || !LANGUAGES.includes(target)) return fail('Pick a language from the list');
  if (source === target) return fail('Source and target languages must be different');

  return respond(() => callApi('translator', { json: { text, source, target } }));
}

See the whole file on GitHub →

Deploy it

1. Get a free API key

   The free plan includes 200 credits a month, no card needed. Create your key.

2. Deploy it

   Click Deploy to Vercel. Vercel copies the repo to your GitHub account and asks for APIVERVE_API_KEY: paste your key there.

3. Open your app

   Vercel builds it and gives you a live URL, usually in about a minute. Every push to the repo redeploys it.

Try the Translator API — the call this template makes

1
2
3
4
5
6
7
8
9

{
  "status": "ok",
  "error": null,
  "data": {
    "sourceLang": "en",
    "targetLang": "es",
    "translatedText": "¡Qué emoción que mañana hará sol! ¡Qué ganas!"
  }
}