Miten rakentaa 10-kielinen Next.js-verkkosivusto (App Router -opas 2026)

Monikielisen verkkosivuston rakentaminen on yksi korkeimman tuoton investoinneista, jonka voit tehdä hakukoneoptimoinnin ja konversion osalta. Seitsemänkymmentäkuusi prosenttia verkko-ostajista mieluummin ostaa tuotteita, joiden tiedot ovat heidän äidinkielellään (CSA Research, 2020), mutta alle 5 % aktiivisista verkkosivustoista tukee yli kolmea kieltä. Julkaisimme hiljattain Frida Marketingin 10 kielellä Next.js 15 App Routerilla – ilman next-intliä, ilman käännöspalvelu SaaS:ää ja ilman 10 erillistä koodipohjaa. Näin rakensimme sen.

Tärkeimmät huomiot

• 76 % ostajista mieluummin ostaa omalla äidinkielellään; 40 % ei koskaan osta sivustoilta, jotka eivät sitä tarjoa (CSA Research, 2020)
• Englanti kattaa vain 49,7 % globaalista verkkosisällöstä – monikielisyyden rakentaminen avaa loput 50,3 % (W3Techs, kesäkuu 2026)
• Yksi [lang] dynaaminen segmentti + yksi API-etuliitteen laskenta palvelee 10 kieltä yhdestä sivutiedostojen joukosta
• Gemini 2.5 Flash kääntää täyden 3 000 sanan HTML-julkaisun kieltä kohden alle 90 sekunnissa lähes nollakustannuksella

Miksi monikielisen sivuston rakentaminen on edullisempaa kuin luulet

Kustannusargumentti monikielisiä sivustoja vastaan on lähes aina liioiteltu. Next.js 15 App Router hoitaa koko reitityskerroksen yhden dynaamisen segmentin kautta. Sisältökerros – otsikot, leipäteksti, metatiedot – tulee API:stasi kieltä kohden. Ja käännöskerroksen voi automatisoida täysin.

Englanti edustaa 49,7 % kaikesta verkkosivuston sisällöstä kielen mukaan. Espanja ja saksa kumpikin 6,0 %, japani 5,0 % ja ranska 4,6 % (W3Techs, kesäkuu 2026). Pelkästään viiden suurimman muun kuin englanninkielisen kielen tukeminen kattaa noin 70 % indeksoidusta globaalista verkkosisällöstä. Next.js pyörii 2,7 %:lla kaikista verkkosivustoista maailmanlaajuisesti ja 17,9 % kyselyyn vastanneista kehittäjistä käyttää sitä (Stack Overflow Developer Survey, 2024) – mikä tarkoittaa, että monikielisen Next.js:n työkalut ja yhteisön tuki ovat parempia kuin koskaan.

Todellinen kustannus ei ole koodi – se on sisältö. Kun reititys on valmis, kielen lisääminen on yksi API-kutsu julkaistua julkaisua kohden. Olemme julkaisseet 7 julkaisua 10 kielellä ilman kielikohtaisia ylläpitokustannuksia. Arkkitehtuuripäätös on investointi; ajonaikainen käyttö on ilmaista.

96 % lokalisointiin investoineista yrityksistä raportoi positiivisen sijoitetun pääoman tuoton, ja 65 % saavutti vähintään 3-kertaisen tuoton (DeepL Business Survey, 2024). Liiketoimintaperuste on vankka. Tekninen este on paljon alhaisempi kuin useimmat kehittäjät odottavat.

Kuinka jäsentää [lang] dynaaminen segmentti

Next.js App Router muuttaa tiedostojärjestelmäsi reitittimeksi. Luo src/app/[lang]/-hakemisto ja jokainen sen sisällä oleva reitti saa params.lang:n automaattisesti. Tämä yksi parametri on koko 10-kielisen sivuston perusta.

`` src/app/ ├── page.tsx ← English homepage (/) ├── blog/[slug]/page.tsx ← English blog posts ├── admin/layout.tsx ← English admin └── [lang]/ ├── page.tsx ← All other language homepages (/fi, /fr, /de…) ├── blog/[slug]/page.tsx ← Language blog posts └── admin/ └── layout.tsx ← Language admin (same file, reads params.lang) ``

Englanti sijaitsee juurihakemistossa. Kaikki muut kielet sijaitsevat [lang]-segmentin alla. Kirjoitat yhden tiedoston ja annat params.lang:n ohjata logiikkaa – ei koskaan kielikohtaisia sivukopioita.

Määritä kielikonfiguraatiosi yhdessä kanonisessa tiedostossa:

```typescript // src/lib/languages.ts export const LANGUAGES = [ { code: 'fi', urlPrefix: 'fi', apiPrefix: 'fi_', name: 'Finnish' }, { code: 'fr', urlPrefix: 'fr', apiPrefix: 'fr_', name: 'French' }, { code: 'de', urlPrefix: 'de', apiPrefix: 'de_', name: 'German' }, { code: 'it', urlPrefix: 'it', apiPrefix: 'it_', name: 'Italian' }, { code: 'no', urlPrefix: 'no', apiPrefix: 'no_', name: 'Norwegian' }, { code: 'ch', urlPrefix: 'ch', apiPrefix: 'pt_', name: 'Swiss German' }, // ⚠️ API uses pt_ { code: 'sr', urlPrefix: 'sr', apiPrefix: 'sr_', name: 'Serbian' }, { code: 'es', urlPrefix: 'es', apiPrefix: 'es_', name: 'Spanish' }, { code: 'sw', urlPrefix: 'sv', apiPrefix: 'sw_', name: 'Swedish' }, // ⚠️ URL uses sv ];

export const LANG_CODES = LANGUAGES.map(l => l.code); ```

Kaksi omituisuutta, jotka on dokumentoitava välittömästi: ch (sveitsinsaksa) käyttää pt_:tä API-etuliitteenä historiallisten nimeämissyiden vuoksi, ja sw (ruotsi) käyttää sv:tä URL-etuliitteenä ISO-standardin mukaisesti. Nämä epäjohdonmukaisuudet eivät aiheuta virheitä, jos keskität konfiguraation, mutta ne hämmentävät jokaista kehittäjää, joka liittyy projektiin ilman tätä dokumentaatiota.

Kielireittien yhdistäminen taustaohjelman API:iin

Koko monikielinen API-integraatio on yksi laskutoimitus:

``typescript const prefix = params.lang ? ${params.lang}_ : ''; const posts = await fetch(${API_URL}/api/${prefix}posts); ``

Kun params.lang on 'fi', tämä hakee /api/fi_posts. Kun se on undefined (englanninkielinen juuri), se hakee /api/posts. Jokainen sivu, jokainen datakutsu, jokainen hallintatoiminto käyttää samaa mallia. Ei ole kielikohtaista hakutoimintoa, ei switch-lausetta, ei erikoistapausta.

Käytämme tätä mallia tuotannossa 10 kielellä ja 5 sisältötyypillä – julkaisut, tuotteet, sivut, kirjoittajat ja kategoriat. Ainoa poikkeustapaus, johon törmäsimme: joillakin API-päätepisteillä on erilaiset rakenteet englanninkielisille ja kielikohtaisille versioille. Meidän asetuksessamme /api/{lang}_posts/by-url/{slug} on olemassa jokaiselle kielelle, mutta englanninkielinen vastaava on täysin erilainen ohjain (/api/resolve-route?url=...). Tarkista aina englanninkieliset API-reitit erikseen – ne on usein jäsennelty eri tavalla kuin kielikohtaiset, erityisesti Laravel-taustaohjelmissa, joissa englanninkieliset reitit rakennettiin ensin.

Hallintapaneeli käyttää samaa etuliitemallia:

``typescript // src/app/[lang]/admin/posts/page.tsx export default function AdminPostsPage({ params }: { params: { lang?: string } }) { const prefix = params.lang ? ${params.lang}_ : ''; // Fetch from /api/${prefix}posts // Build edit/delete links with /${params.lang}/admin/edit-post/${id} } ``

Yksi AdminPostsPage-komponentti palvelee kaikkia 10 kielen hallintapaneelia. Englanninkielinen hallinta sijaitsee osoitteessa /admin/posts; suomenkielinen osoitteessa /fi/admin/posts. Sama tiedosto.

Staattisten sivujen luominen kaikille 10 kielelle

Staattinen generointi on se, mistä monikieliset Next.js-sivustot saavat suorituskykyetunsa. Käytä generateStaticParams-funktiota esirenderöimään jokainen kieliversio rakennusvaiheessa:

```typescript // src/app/[lang]/page.tsx — static language homepages export async function generateStaticParams() { return LANG_CODES.map(lang => ({ lang })); // Returns: [{lang:'fi'},{lang:'fr'},{lang:'de'},...] }

// src/app/[lang]/blog/[slug]/page.tsx — static blog posts per language export async function generateStaticParams({ params }: { params: { lang: string } }) { const prefix = params.lang ? ${params.lang}_ : ''; const res = await fetch(${API_URL}/api/${prefix}posts); const data = await res.json(); return data.data.map((post: { url: string }) => ({ slug: post.url })); } ```

Staattiset sivut näkyvät ●-merkkinä next build -tulosteessa. Ne esirenderöidään HTML:ksi käyttöönoton yhteydessä, siirretään Vercelin reuna-CDN:ään ja latautuvat millisekunneissa maailmanlaajuisesti. 10-kielisellä sivustolla tämä on ero 50 ms:n TTFB:n ja 800 ms:n alkuperäisen osuman välillä jokaisella pyynnöllä.

Yksi sääntö muistaa: älä koskaan yhdistä generateStaticParams-funktiota { cache: 'no-store' } -hakuihin samalla sivulla. Next.js 15 -tuotantorakenteissa tämä heittää virheen Error: Page changed from static to dynamic at runtime – virheen, joka ilmenee vain tuotannossa, ei kehityksessä. Käytä sen sijaan ISR:ää:

``typescript const res = await fetch(${API_URL}/api/${prefix}posts, { next: { revalidate: 3600 }, // Regenerate stale pages every hour }); export const dynamicParams = true; // Allow new slugs without a full rebuild ``

next-intl kerää 2,3 miljoonaa viikoittaista npm-latausta kesäkuussa 2026, mikä tekee siitä hallitsevan kirjaston alallaan. Se on oikea valinta, jos tarvitset paikallisuuteen perustuvaa muotoilua tai kovakoodattujen käyttöliittymämerkkijonojen hallintaa. Datapohjaisille CMS-sivustoille se on valinnainen – puhdas App Router -reititys hoitaa kaiken, mitä todella tarvitset.

SEO 10-kieliselle sivustolle: Hreflang ja generateMetadata

Hreflang kertoo Googlelle, mikä kieliversio tulee tarjoilla millekin yleisölle. Ilman sitä 10 kielisivuasi kilpailevat keskenään samoista hauista. App Router -toteutus on selkeä:

```typescript // src/lib/hreflang.ts const HREFLANG_CODE: Record = { fi: 'fi', fr: 'fr', de: 'de', it: 'it', no: 'no', ch: 'de-CH', // Swiss German internal code → BCP 47 de-CH sr: 'sr', es: 'es', sw: 'sv', // Internal code sw → ISO sv (Swedish) };

export function getAlternates(routeKey: string, lang?: string) { const BASE = 'https://fridamarketing.com'; const enUrl = ${BASE}/${routeKey};

const languages: Record = { 'x-default': enUrl, en: enUrl, };

for (const [code, hreflang] of Object.entries(HREFLANG_CODE)) { const urlPrefix = code === 'sw' ? 'sv' : code; languages[hreflang] = ${BASE}/${urlPrefix}/${routeKey}; }

return { canonical: lang ? ${BASE}/${lang === 'sw' ? 'sv' : lang}/${routeKey} : enUrl, languages, }; } ```

Käytä sitä generateMetadata-funktiossa jokaisella sivulla:

``typescript export async function generateMetadata({ params }: Props): Promise { const post = await fetchPost(params.lang, params.slug); return { title: post.meta_title, description: post.meta_description, alternates: getAlternates(blog/${post.url}, params.lang), }; } ``

Tämä luo täydellisen hreflang-joukon jokaiselle sivulle – x-default, en ja kaikki 9 kieliversiota – ilman manuaalista ylläpitoa. Ei XML-sivukartta hreflang-lohkoja synkronoitavaksi; Next.js lisää ne -tageina renderöityyn -osioon.

Monikielisen SEO-tutkimuksen mukaan lokalisointiin investoivat yritykset saavat 300–500 % enemmän orgaanista liikennettä kansainvälisiltä markkinoilta (MotionPoint, 2025). Hreflang-kerros on se, joka vangitsee tämän liikenteen. Ilman sitä Google joko jättää kielisignaalit huomiotta tai näyttää väärän version kullekin alueelle.

Käännösten automatisointi: Gemini API julkaisuketjussasi

Manuaalinen käännös 10 kielellä on väärä malli mille tahansa tiimille, jolla ei ole omaa lokalisointibudjettia. Ihmiskäännös maksaa 0,15–0,30 dollaria per sana – 2 500 sanan julkaisu maksaa 375–750 dollaria kieltä kohden, tai 3 375–6 750 dollaria kaikille 9 kielelle (Seatongue, 2025). Konekäännöksen jälkieditointi leikkaa tätä 50–70 %. Mutta jäsennellyn HTML-sisällön osalta CMS:stä, täysin automatisoitu API-käännös tarkalla kehotteella on vieläkin parempi.

Tässä on ydinkäännöskutsu, jota käytämme Gemini 2.5 Flashin kanssa:

``javascript async function translatePost(content, targetLang) { const prompt = Translate the following JSON to ${targetLang}. Rules: - Translate all text values: title, intro, body, meta_title, meta_description - Preserve ALL HTML tags, attributes, and structure in body exactly as-is - Generate a URL-safe localized slug and return it as "url" - Keep brand names, code examples, and proper nouns in English - Return valid JSON only: { title, intro, body, meta_title, meta_description, url }

Content: ${JSON.stringify(content)}`;

const response = await gemini.generateContent(prompt); return JSON.parse(response.text()); } ```

Olemme käyttäneet tätä tuotannossa 7 julkaistun julkaisun osalta, joista jokainen on käännetty 9 kielelle automaattisesti. Laatu on julkaisuvalmis suomeksi, ranskaksi, saksaksi, espanjaksi ja italiaksi ilman manuaalista tarkistusta. Norja ja ruotsi tarvitsevat satunnaisia pistokokeita. Serbia tarvitsee oikolukijan tarkistuksen – Gemini on vähemmän luotettava kyrillisillä kirjaimilla monimutkaisissa HTML-konteksteissa. Sisältörikkaalla sivustolla tämä lähestymistapa leikkaa käännöskustannuksia yli 90 % verrattuna jopa konekäännöksen jälkieditointityönkulkuihin.

Ajoitus on tärkeää. 3 000 sanan HTML-julkaisun kääntäminen kestää Gemini 2.5 Flashilla noin 60–90 sekuntia kieltä kohden. Se on 9–13 minuuttia kaikille 9 käännökselle. Aseta aina 150 sekunnin keskeytysaikakatkaisu jokaiselle API-kutsulle ja toteuta eksponentiaalinen takaisinkytkentä – malli jumittuu joskus suuren kysynnän vuoksi:

``javascript const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 150000); try { const res = await fetch(GEMINI_URL, { signal: controller.signal, ...opts }); clearTimeout(timeoutId); return res; } catch (err) { clearTimeout(timeoutId); if (err.name === 'AbortError') { // Retry with exponential backoff await new Promise(r => setTimeout(r, Math.pow(2, attempt) * 5000)); } } ``

84 % markkinoijista sanoo, että sisällön lokalisointi on auttanut kasvattamaan heidän tulojaan, ja käännöksiin investoineet yritykset näkivät 1,5 kertaa todennäköisemmin tulojen kasvun (Redokun, 2025). Automaatio poistaa viimeisen todellisen esteen – käännösten skaalautuvan suorittamisen operatiiviset kustannukset.

---

Rakennatko monikielistä Next.js-sivustoa? Suunnittelemme ja rakennamme Next.js-verkkosivustoja globaaleille yleisöille – sisältäen täyden i18n-reitityksen, hreflang-hakukoneoptimoinnin ja automatisoidut käännösketjut. Katso Next.js-kehityspalvelumme tai ota yhteyttä keskustellaksesi projektistasi.

---

Usein kysytyt kysymykset

Tarvitsenko next-intliä rakentaakseni monikielisen Next.js-sivuston?

Ei. Next.js 15 App Router hoitaa monikielisen reitityksen natiivisti [lang] dynaamisen segmentin kautta. Kirjastot kuten next-intl lisäävät arvoa paikallisuuteen perustuvaan muotoiluun (päivämäärät, valuutat, monikkomuodot) ja kovakoodattujen käyttöliittymämerkkijonojen hallintaan. Jos sisältösi tulee CMS:stä tai API:sta, et tarvitse niitä reititykseen, staattiseen generointiin tai hakukoneoptimointiin.

Kuinka yhdistän URL-kielietuliitteet API-päätepisteisiin Next.js:ssä?

Laske etuliite ajonaikaisesti: const prefix = params.lang ? \`${params.lang}_\` : '';. Käytä sitä jokaisessa hakukutsussa – esimerkiksi /api/${prefix}posts. Tämä malli käsittelee kaikki 10 kieltä yhdestä jaetusta sivutiedostosta. Ei kielikohtaisia sivuja, ei switch-lauseita, ei erikoistapauksia.

Mikä on paras tapa kääntää Next.js-sivusto automaattisesti useille kielille?

Käytä Gemini 2.5 Flashia tai GPT-4:ää julkaisuketjussasi. Lähetä englanninkielinen sisältö JSON-muodossa järjestelmäkehotteella kääntämään kaikki tekstiarvot säilyttäen HTML-tagit ja luoden lokalisoidun URL-slugin. Lisää 150 sekunnin aikakatkaisu ja eksponentiaalinen takaisinkytkentä. Konekäännöksen jälkieditointi maksaa 50–70 % vähemmän kuin täysi ihmiskäännös (Seatongue, 2025), ja täysi API-automaatio vähentää sitä entisestään.

Kuinka lisään hreflang-tageja Next.js 15 App Router -sivustolle?

Rakenna getAlternates(routeKey, lang) -funktio, joka palauttaa Next.js alternates-objektin. Yhdistä sisäiset URL-koodit BCP 47 -kielikoodeihin – sw → sv ruotsille, ch → de-CH sveitsinsaksalle – ja sisällytä x-default, joka osoittaa englanninkieliseen kanoniseen. Palauta se alternates.languages-osiosta jokaisen sivun generateMetadata-viennin sisältä.

Kuinka monta kieltä verkkosivustoni tulisi tukea?

Aloita 2–3 kielellä, jotka vastaavat tärkeimpiä liikennelähteitäsi, ja laajenna sitten. Englanti kattaa vain 49,7 % globaalista verkkosisällöstä (W3Techs, kesäkuu 2026), joten mikä tahansa toinen kieli avaa uuden tavoitettavissa olevan yleisön lähes nollakustannuksella, kun reititys- ja käännösketju ovat valmiina. Lokalisointiin investoivat yritykset raportoivat 96 % positiivisen sijoitetun pääoman tuoton, ja 65 % saavuttaa vähintään 3-kertaisen tuoton (DeepL, 2024).

Johtopäätös

10-kielinen Next.js-sivusto ei ole 10-kertainen työ. Se on yksi [lang] dynaaminen segmentti, yksi API-etuliitteen laskenta, yksi hreflang-apuohjelma ja käännöskomentosarja – kerrottuna julkaisuketjussasi. Rakensimme tämän Frida Marketingille, ja se toimii tuotannossa 10 kielellä ilman kielikohtaisia ylläpitokustannuksia ja ilman lokalisointi-SaaS-tilausta.

Reititys on aamupäivän työtä. Hreflang on iltapäivän työtä. Käännösketju on viikonloppuprojekti. Ja tuotto – saavuttaa 50,3 % verkosta, joka ei ole englanninkielinen – on pysyvä.

Aloita [lang]-segmentistä tänään. Lisää hreflang tällä viikolla. Kytke Gemini-käännös-API käyttöön tässä kuussa.