Kako napraviti Next.js veb sajt na 10 jezika (Vodič za App Router 2026)

Izgradnja višejezične veb stranice jedna je od investicija sa najvećim uticajem koju možete napraviti u SEO-u i konverziji. Sedamdeset šest posto onlajn kupaca preferira kupovinu proizvoda sa informacijama na svom maternjem jeziku (CSA Research, 2020), a ipak manje od 5% aktivnih veb lokacija podržava više od tri jezika. Nedavno smo pokrenuli Frida Marketing na 10 jezika na Next.js 15 App Routeru — bez next-intl-a, bez SaaS-a za prevođenje i bez 10 odvojenih baza koda. Evo kako smo to tačno izgradili.

Ključne informacije

• 76% kupaca preferira kupovinu na svom maternjem jeziku; 40% nikada neće kupiti sa sajtova koji to ne nude (CSA Research, 2020)
• Engleski pokriva samo 49,7% globalnog veb sadržaja — izgradnja višejezičnog sajta otključava preostalih 50,3% (W3Techs, jun 2026)
• Jedan [lang] dinamički segment + jedna API prefiksna kalkulacija opslužuje 10 jezika iz jednog skupa datoteka stranica
• Gemini 2.5 Flash prevodi kompletan HTML post od 3.000 reči po jeziku za manje od 90 sekundi uz skoro nulte troškove

Zašto je izgradnja višejezičnog sajta jeftinija nego što mislite

Argument troškova protiv višejezičnih sajtova je skoro uvek preuveličan. Next.js 15 App Router obrađuje ceo sloj rutiranja kroz jedan dinamički segment. Sloj sadržaja — naslovi, telo, metapodaci — dolazi iz vašeg API-ja po jeziku. A sloj prevođenja može biti potpuno automatizovan.

Engleski predstavlja 49,7% celokupnog veb sadržaja po jeziku. Španski i nemački drže po 6,0%, japanski 5,0%, a francuski 4,6% (W3Techs, jun 2026). Podrška samo za pet najvažnijih ne-engleskih jezika pokriva otprilike 70% indeksiranog globalnog veb sadržaja. Next.js radi na 2,7% svih veb lokacija globalno, a 17,9% anketiranih programera ga koristi (Stack Overflow Developer Survey, 2024) — što znači da su alati i podrška zajednice za višejezični Next.js bolji nego ikada.

Pravi trošak nije kod — to je sadržaj. Kada je vaše rutiranje postavljeno, dodavanje jezika je jedan API poziv po objavljenom postu. Objavili smo 7 postova na 10 jezika sa nultim troškovima održavanja po jeziku. Odluka o arhitekturi je investicija; izvršavanje je besplatno.

96% kompanija koje su investirale u lokalizaciju prijavile su pozitivan ROI, pri čemu je 65% ostvarilo najmanje 3x povrat (DeepL Business Survey, 2024). Poslovni slučaj je čvrst. Tehnička barijera je daleko niža nego što većina programera očekuje.

Kako strukturirati vaš [lang] dinamički segment

Next.js App Router pretvara vaš sistem datoteka u vaš ruter. Kreirajte direktorijum src/app/[lang]/ i svaka ruta unutar njega automatski dobija params.lang. Taj jedan parametar je celokupna osnova sajta na 10 jezika.

`` 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) ``

Engleski se nalazi u korenu. Svaki drugi jezik se nalazi pod [lang]. Pišete jednu datoteku i dozvoljavate da params.lang pokreće logiku — nikada nema kopija stranica specifičnih za jezik.

Definišite svoju jezičku konfiguraciju u jednoj kanonskoj datoteci:

```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); ```

Dve neobičnosti koje treba odmah dokumentovati: ch (švajcarski nemački) koristi pt_ kao svoj API prefiks iz istorijskih razloga imenovanja, a sw (švedski) koristi sv kao svoj URL prefiks da bi se podudarao sa ISO standardom. Ove neusklađenosti neće izazvati greške ako centralizujete konfiguraciju, ali će zbuniti svakog programera koji se pridruži projektu bez ove dokumentacije.

Povezivanje jezičkih ruta sa vašim bek-end API-jem

Celokupna višejezična API integracija je jedna kalkulacija:

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

Kada je params.lang 'fi', ovo preuzima /api/fi_posts. Kada je undefined (engleski koren), preuzima /api/posts. Svaka stranica, svaki poziv podataka, svaka administratorska operacija koristi isti obrazac. Ne postoji pomoćna funkcija za preuzimanje po jeziku, nema switch izraza, nema posebnog slučaja.

Ovaj obrazac primenjujemo na 10 jezika i 5 tipova sadržaja — postovi, proizvodi, stranice, autori i kategorije — u produkciji. Jedini granični slučaj na koji smo naišli: neke API krajnje tačke imaju različite strukture za engleski u odnosu na verzije specifične za jezik. U našem podešavanju, /api/{lang}_posts/by-url/{slug} postoji za svaki jezik, ali engleski ekvivalent je potpuno drugačiji kontroler (/api/resolve-route?url=...). Uvek proverite svoje engleske API rute odvojeno — često su strukturirane drugačije od onih specifičnih za jezik, posebno na Laravel bek-endima gde su engleske rute prvo izgrađene.

Administratorski panel koristi isti obrazac prefiksa:

``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} } ``

Jedna komponenta AdminPostsPage opslužuje svih 10 administratorskih panela za jezike. Engleski admin se nalazi na /admin/posts; finski na /fi/admin/posts. Ista datoteka.

Generisanje statičkih stranica za svih 10 jezika

Statičko generisanje je mesto gde višejezični Next.js sajtovi dobijaju svoju prednost u performansama. Koristite generateStaticParams za prethodno renderovanje svake jezičke varijante u vreme izgradnje:

```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 })); } ```

Statičke stranice se pojavljuju kao ● u izlazu next build. One se prethodno renderuju u HTML u vreme implementacije, šalju se na Vercel-ov edge CDN i učitavaju se u milisekundama globalno. Za sajt na 10 jezika, ovo je razlika između 50ms TTFB-a i 800ms origin hita na svaki zahtev.

Jedno pravilo koje treba zapamtiti: nikada ne kombinujte generateStaticParams sa { cache: 'no-store' } preuzimanjima na istoj stranici. U Next.js 15 produkcijskim verzijama, ovo baca Error: Page changed from static to dynamic at runtime — grešku koja se pojavljuje samo u produkciji, ne u razvoju. Umesto toga koristite 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 beleži 2,3 miliona nedeljnih npm preuzimanja od juna 2026, što ga čini dominantnom bibliotekom u ovoj oblasti. To je pravi izbor ako vam je potrebno formatiranje svesno lokaliteta ili upravljanje hardkodovanim UI stringovima. Za CMS sajtove vođene podacima, to je opciono — čisto App Router rutiranje obrađuje sve što vam je zaista potrebno.

SEO za sajt na 10 jezika: Hreflang i generateMetadata

Hreflang govori Google-u koju jezičku verziju da posluži kojoj publici. Bez toga, vaših 10 jezičkih stranica se takmiči jedna protiv druge za iste upite. Implementacija App Routera je čista:

```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, }; } ```

Koristite ga u generateMetadata na svakoj stranici:

``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), }; } ``

Ovo generiše kompletan hreflang set za svaku stranicu — x-default, en i svih 9 jezičkih varijanti — bez ručnog održavanja. Nema XML sitemap hreflang blokova za sinhronizaciju; Next.js ih ubacuje kao tagove u renderovani .

Prema istraživanju višejezičnog SEO-a, preduzeća koja investiraju u lokalizaciju beleže 300–500% više organskog saobraćaja sa međunarodnih tržišta (MotionPoint, 2025). Hreflang sloj je ono što hvata taj saobraćaj. Bez njega, Google ili ignoriše jezičke signale ili prikazuje pogrešnu verziju za svaki lokalitet.

Automatizacija prevođenja: Gemini API u vašem objavljivačkom toku

Ručno prevođenje na 10 jezika je pogrešan model za bilo koji tim bez namenskog budžeta za lokalizaciju. Ljudsko prevođenje košta 0,15–0,30 dolara po reči — post od 2.500 reči košta 375–750 dolara po jeziku, ili 3.375–6.750 dolara za svih 9 (Seatongue, 2025). Post-editovanje mašinskog prevođenja smanjuje to za 50–70%. Ali za strukturirani HTML sadržaj iz CMS-a, potpuno automatizovano API prevođenje sa preciznim promptom je još bolje.

Evo osnovnog poziva za prevođenje koji koristimo sa Gemini 2.5 Flash:

``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()); } ```

Ovo smo pokrenuli u produkciji za 7 objavljenih postova, svaki automatski preveden na 9 jezika. Kvalitet je spreman za objavljivanje za finski, francuski, nemački, španski i italijanski bez ručne provere. Norveški i švedski zahtevaju povremene provere. Srpski zahteva prolaz lektora — Gemini je manje pouzdan sa ćirilicom u složenim HTML kontekstima. Za sajt bogat sadržajem, ovaj pristup smanjuje troškove prevođenja za preko 90% u poređenju sa čak i radnim tokovima post-editovanja mašinskog prevođenja.

Vreme je važno. HTML post od 3.000 reči traje Gemini 2.5 Flash približno 60–90 sekundi po jeziku. To je 9–13 minuta za svih 9 prevoda. Uvek postavite vremensko ograničenje od 150 sekundi za prekid svakog API poziva i implementirajte eksponencijalno povlačenje — model povremeno zastane pod velikim opterećenjem:

``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% marketara kaže da im je lokalizacija sadržaja pomogla da povećaju prihode, a preduzeća koja su investirala u prevođenje imala su 1,5 puta veću verovatnoću da će zabeležiti povećanje prihoda (Redokun, 2025). Automatizacija uklanja poslednju pravu prepreku — operativne troškove masovnog prevođenja.

---

Gradite višejezični Next.js sajt? Dizajniramo i gradimo Next.js veb sajtove za globalnu publiku — uključujući potpuno i18n rutiranje, hreflang SEO i automatizovane tokove prevođenja. Pogledajte naše usluge razvoja Next.js ili stupite u kontakt da razgovaramo o vašem projektu.

---

Često postavljana pitanja

Da li mi je potreban next-intl za izgradnju višejezičnog Next.js sajta?

Ne. Next.js 15 App Router nativno obrađuje višejezično rutiranje kroz [lang] dinamički segment. Biblioteke poput next-intl dodaju vrednost za formatiranje svesno lokaliteta (datumi, valute, pluralizacija) i upravljanje hardkodovanim UI stringovima. Ako vaš sadržaj dolazi iz CMS-a ili API-ja, nisu vam potrebni za rutiranje, statičko generisanje ili SEO.

Kako da mapiram prefikse URL jezika na API krajnje tačke u Next.js-u?

Izračunajte prefiks u runtime-u: const prefix = params.lang ? \`${params.lang}_\` : '';. Koristite ga u svakom fetch pozivu — na primer, /api/${prefix}posts. Ovaj obrazac obrađuje svih 10 jezika iz jedne zajedničke datoteke stranice. Nema stranica specifičnih za jezik, nema switch izraza, nema posebnih slučajeva.

Koji je najbolji način za automatsko prevođenje Next.js sajta na više jezika?

Koristite Gemini 2.5 Flash ili GPT-4 u vašem objavljivačkom toku. Pošaljite engleski sadržaj kao JSON sa sistemskim promptom za prevođenje svih tekstualnih vrednosti uz očuvanje HTML tagova i generisanje lokalizovanog URL slug-a. Dodajte vremensko ograničenje od 150 sekundi i eksponencijalno povlačenje. Post-editovanje mašinskog prevođenja košta 50–70% manje od potpunog ljudskog prevođenja (Seatongue, 2025), a potpuna API automatizacija to dodatno smanjuje.

Kako da dodam hreflang tagove na Next.js 15 App Router sajt?

Izgradite funkciju getAlternates(routeKey, lang) koja vraća Next.js alternates objekat. Mapirajte interne URL kodove na BCP 47 lang kodove — sw → sv za švedski, ch → de-CH za švajcarski nemački — i uključite x-default koji pokazuje na engleski kanonski. Vratite ga iz alternates.languages unutar generateMetadata exporta svake stranice.

Koliko jezika bi moj veb sajt trebalo da podržava?

Započnite sa 2–3 koja odgovaraju vašim glavnim izvorima saobraćaja, a zatim proširite. Engleski pokriva samo 49,7% globalnog veb sadržaja (W3Techs, jun 2026), tako da bilo koji drugi jezik otvara novu ciljnu publiku sa skoro nultim marginalnim troškovima kada su vaše rutiranje i tok prevođenja postavljeni. Preduzeća koja investiraju u lokalizaciju prijavljuju 96% pozitivan ROI, pri čemu 65% postiže najmanje 3x povrat (DeepL, 2024).

Zaključak

Sajt na 10 jezika u Next.js-u nije 10 puta više posla. To je jedan [lang] dinamički segment, jedna API prefiksna kalkulacija, jedan hreflang pomoćnik i skripta za prevođenje — umnoženo kroz vaš objavljivački tok. Ovo smo izgradili za Frida Marketing i radi u produkciji na 10 jezika bez troškova održavanja po jeziku i bez pretplate na SaaS za lokalizaciju.

Rutiranje je posao za jedno jutro. Hreflang je posao za jedno popodne. Tok prevođenja je vikend projekat. A nagrada — dosezanje 50,3% veba koji nije na engleskom — je trajna.

Započnite sa [lang] segmentom danas. Dodajte hreflang ove nedelje. Povežite Gemini prevodilački API ovog meseca.