Panduan Arsitektur Situs Global: Next.js, Hreflang & Edge Routing

Dilema URL: ccTLD vs. Subfolder untuk Bisnis Inggris

Keputusan besar pertama dalam setiap panduan arsitektur situs global yang praktis adalah bagaimana Anda menyusun URL Anda. Pilihan antara domain tingkat atas kode negara (ccTLD) seperti .co.uk dan .de, versus subfolder seperti /uk/ dan /de/, memiliki dampak jangka panjang yang mendalam pada SEO, biaya, dan pemeliharaan.

Bagi bisnis di Inggris, keputusan ini sering kali bergantung pada keseimbangan antara sinyal SEO ccTLD vs subfolder dan beban operasional dalam mengelola beberapa domain.

Matriks Keputusan: ccTLD vs. Subfolder

Faktor	ccTLD (mis., .de, .fr)	Subfolder (mis., .com/de/)
Kekuatan Sinyal SEO	Paling kuat. Secara eksplisit memberi tahu Google bahwa situs tersebut untuk negara tertentu.	Kuat. Memerlukan konfigurasi Search Console untuk menentukan pengaturan penargetan geografis.
Otoritas Domain	Terfragmentasi. Setiap domain dimulai dari nol dan membangun otoritas secara independen.	Terkonsolidasi. Semua wilayah mendapat manfaat dari backlink dan otoritas domain induk.
Biaya Awal & Pemeliharaan	Tinggi. Memerlukan pembelian beberapa domain, pengelolaan sertifikat SSL terpisah, dan potensi persyaratan hukum di beberapa negara.	Rendah. Satu domain, satu sertifikat SSL, basis kode terpadu.
Fleksibilitas Lokasi Server	Tinggi. Lebih mudah untuk melakukan hosting secara eksplisit di dalam negara jika diperlukan untuk undang-undang data yang ketat.	Sedang. Terikat pada satu origin, meskipun dapat dimitigasi oleh caching edge CDN.
Persepsi Merek	Kepercayaan Lokal Tinggi. Pengguna sering kali lebih memercayai domain lokal (mis., orang Jerman lebih suka .de).	Merek Global. Sering dianggap sebagai entitas internasional yang besar.

Konteks Inggris

Bagi bisnis Inggris yang menargetkan Uni Eropa pasca-Brexit, kedaulatan data dan struktur url internasional sangat penting. Meskipun ccTLD memungkinkan Anda untuk menyimpan data secara fisik di dalam batas negara tertentu (misalnya, Jerman), infrastruktur cloud modern sering kali membuat hal ini tidak relevan untuk data yang tidak sensitif.

Namun, perdebatan tentang arsitektur situs uk vs us adalah hal yang umum. Jika Anda berekspansi ke AS, .com dengan subfolder /uk/ dan /us/ sering kali menjadi rute yang paling efisien. Menurut dokumentasi Google Search Central tentang penargetan internasional, menggunakan domain tingkat atas generik (gTLD) dengan subfolder memungkinkan pemeliharaan yang lebih mudah sambil tetap memberikan sinyal lokal melalui pengaturan Search Console[2].

Putusan: Bagi sebagian besar UKM Inggris yang melakukan ekspansi internasional, strategi subfolder menawarkan keseimbangan terbaik antara kontrol SEO dan total biaya kepemilikan. Namun, untuk bisnis tingkat enterprise yang memerlukan otoritas lokal maksimum dan hosting di dalam negeri, pendekatan ccTLD mungkin dapat dibenarkan.

---

Implementasi Hreflang Teknis di Next.js

Mengimplementasikan tag hreflang dengan benar adalah hal yang tidak bisa ditawar untuk memberi tahu mesin pencari bahasa dan negara mana yang dituju oleh setiap halaman. Dalam arsitektur headless dengan ribuan halaman dinamis, implementasi manual tidak mungkin dilakukan. Sebuah panduan arsitektur situs global modern harus membahas cara mengotomatiskan hal ini.

Berikut adalah cara menangani routing i18n next.js dan implementasi hreflang dinamis secara terprogram.

Deteksi Lokal dengan Middleware

Di Next.js (terutama menggunakan App Router), Anda dapat menggunakan Middleware untuk mendeteksi bahasa pilihan pengguna melalui header Accept-Language dan mengarahkan mereka ke lokal yang benar.

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { match } from '@formatjs/intl-localematcher'
import Negotiator from 'negotiator'

const locales = ['en-GB', 'en-US', 'de-DE', 'fr-FR']
const defaultLocale = 'en-GB'

function getLocale(request: NextRequest) {
  const headers = { 'accept-language': request.headers.get('accept-language') || '' }
  const languages = new Negotiator({ headers }).languages()
  return match(languages, locales, defaultLocale)
}

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl
  
  // Periksa apakah ada lokal yang didukung di pathname
  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  )

  if (pathnameHasLocale) return

  // Alihkan jika tidak ada lokal
  const locale = getLocale(request)
  request.nextUrl.pathname = `/${locale}${pathname}`
  return NextResponse.redirect(request.nextUrl)
}

export const config = {
  matcher: [
    // Lewati semua path internal (_next)
    '/((?!_next).*)',
  ],
}

Mengotomatiskan Peta Situs XML

Meskipun tag hreflang dapat berada di header HTTP atau <head> HTML, menempatkannya di peta situs sering kali lebih bersih untuk situs besar guna menghindari penambahan kode yang tidak perlu. Ini memerlukan pembuatan tautan alternatif peta situs xml.

Di bawah ini adalah contoh konseptual dari skrip sisi server untuk menghasilkan peta situs dengan atribut xhtml:link, yang berfungsi sebagai otomatisasi generator tag hreflang:

// scripts/generate-sitemap.js
const fs = require('fs');
const globby = require('globby');

async function generateSitemap() {
  const pages = await globby([
    'pages/**/*.js',
    '!pages/_*.js',
    '!pages/api',
  ]);

  const sitemap = `
    <?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
      ${pages
        .map((page) => {
          const path = page
            .replace('pages', '')
            .replace('.js', '')
            .replace('/index', '');
          
          // Tentukan lokal Anda di sini
          const locales = ['en-gb', 'de-de', 'fr-fr'];
          const baseUrl = 'https://www.yourdomain.com';

          return locales.map(locale => {
            return `
              <url>
                <loc>${baseUrl}/${locale}${path}</loc>
                ${locales.map(altLocale => `
                  <xhtml:link 
                    rel="alternate" 
                    hreflang="${altLocale}" 
                    href="${baseUrl}/${altLocale}${path}"
                  />
                `).join('')}
              </url>
            `;
          }).join('');
        })
        .join('')}
    </urlset>
  `;

  fs.writeFileSync('public/sitemap.xml', sitemap);
}

generateSitemap();

Dengan mengotomatiskan pembuatan hreflang dalam aplikasi Next.js Anda, Anda menciptakan sistem yang dapat diskalakan dan bebas dari kesalahan yang mendukung pertumbuhan internasional tanpa beban manual. Ini adalah jenis solusi khusus yang membedakan pengembangan modern dari situs statis warisan. Untuk detail lebih lanjut tentang pola perutean, lihat Dokumentasi Resmi Next.js tentang Perutean i18n[3].

---

Kesenjangan AI: Strategi Performa Edge-First

AI akan memberitahu Anda untuk “menggunakan CDN.” Ini benar tetapi tidak lengkap. Strategi modern yang mengutamakan edge (edge-first) untuk bisnis Inggris yang melayani audiens global melibatkan lebih dari sekadar caching aset statis. Ini memerlukan konfigurasi Edge Functions untuk menyajikan konten dan logika yang dilokalkan sebelum permintaan bahkan mencapai server asal Anda di London. Inilah cara Anda mencapai latensi rendah yang konsisten dan skor core web vitals internasional yang sangat baik.

Apa yang Kurang dari Saran Generik

Saran CDN generik gagal memperhitungkan konten dinamis yang dilokalkan dan pergeseran tata letak pra-hidrasi. Hanya caching halaman tidak membantu jika logika mata uang atau bahasa memerlukan perjalanan pulang-pergi ke server asal untuk diselesaikan.

Keunggulan Kami: Konfigurasi CDN Tingkat Kode

Untuk mencapai kecepatan, keamanan, dan skalabilitas yang unggul, kami mengonfigurasi CDN di tingkat kode menggunakan strategi caching edge cdn.

1. Mengonfigurasi Aturan Edge: Menggunakan penyedia seperti Vercel atau Cloudflare, kami memeriksa header Accept-Language atau geo-IP di edge. Ini terjadi dalam milidetik dari pengguna, bukan di pusat data di Slough.

2. Menyajikan Konten Lokal dari Edge: Edge Function dapat menulis ulang URL atau menyajikan versi halaman yang telah dirender sebelumnya dan di-cache dalam bahasa pengguna langsung dari pusat data terdekat. Ini meminimalkan Time to First Byte (TTFB). Misalnya, middleware vercel edge functions i18n dapat menentukan lokal yang benar dan menulis ulang respons tanpa reboot server penuh.

3. Server Asal Inggris: Memiliki server asal Anda di Inggris (mis., London) masih sangat penting untuk mengurangi waktu respons server di Inggris untuk pasar utama Anda dan menjaga kedaulatan data. Origin bertindak sebagai “sumber kebenaran,” sementara jaringan edge menangani distribusi global.

Dukungan Otoritas

Pendekatan ini secara langsung memengaruhi Core Web Vitals seperti LCP dan TTFB untuk pengguna internasional. Penelitian menunjukkan bahwa kedekatan server memainkan peran penting dalam performa web. Sebuah studi yang ditinjau oleh rekan sejawat tentang lokasi server dan Core Web Vitals menunjukkan bahwa mengurangi jarak fisik antara pengguna dan titik respons server berkorelasi dengan peningkatan skor LCP[5].

“Di Jamie Grand, kami membangun sistem di mana jaringan edge melakukan pekerjaan berat untuk lokalisasi, memastikan pengguna di New York mendapatkan respons secepat pengguna di Manchester.”

---

Pertanyaan yang Sering Diajukan (PAA Teknis)

Apakah ccTLD lebih baik dari subfolder untuk SEO internasional?

Untuk SEO, ccTLD memberikan sinyal penargetan geografis terkuat, tetapi subfolder sering kali lebih baik untuk mengonsolidasikan otoritas domain dan mengelola biaya. ccTLD (seperti .de) memberitahu Google bahwa sebuah situs secara eksplisit ditujukan untuk negara tertentu. Namun, subfolder (seperti /de/) lebih mudah dikelola pada satu domain dan mendapat manfaat dari ekuitas tautan keseluruhannya. Bagi sebagian besar bisnis, strategi subfolder adalah pilihan yang lebih praktis dan efektif.

Bagaimana cara mengimplementasikan tag hreflang di Next.js?

Untuk mengimplementasikan hreflang di Next.js, Anda harus mengotomatiskan pembuatannya secara dinamis. Gunakan perutean i18n bawaan Next.js untuk mengelola lokal. Kemudian, di dalam komponen halaman Anda atau _app.js kustom, akses objek router untuk mendapatkan semua lokal yang tersedia untuk halaman saat ini. Lakukan perulangan untuk menghasilkan tag <link rel="alternate" ...> yang sesuai di dalam komponen <Head> Next.js, memastikan tag tersebut ada di setiap halaman yang relevan.

Apakah lokasi server memengaruhi Core Web Vitals secara global?

Ya, lokasi server asal secara signifikan memengaruhi Core Web Vitals, terutama Time to First Byte (TTFB). Jarak fisik antara pengguna dan server Anda menciptakan latensi. Meskipun CDN dapat menyimpan konten lebih dekat dengan pengguna, permintaan awal untuk aset yang tidak di-cache harus melakukan perjalanan ke server asal. Untuk bisnis di Inggris, hosting di London sangat bagus untuk pengguna lokal tetapi akan lebih lambat untuk pengguna di Asia atau AS tanpa strategi caching edge yang efektif.

Bagaimana cara menangani pergantian mata uang tanpa loop pengalihan?

Tangani pergantian mata uang dengan menggunakan parameter URL atau cookie alih-alih pengalihan berbasis sesi. Ketika pengguna memilih mata uang, simpan preferensi mereka dalam cookie atau cerminkan dalam URL (mis., ?currency=EUR). Logika sisi server Anda kemudian harus merender halaman dengan mata uang yang benar tanpa mengalihkan. Ini menghindari loop pengalihan dan memastikan URL tetap stabil dan dapat dirayapi oleh mesin pencari.

Praktik terbaik untuk peta situs XML dinamis dengan tautan alternatif?

Praktik terbaik adalah menghasilkan peta situs XML Anda di sisi server pada waktu build atau sesuai permintaan. Untuk setiap URL di peta situs Anda, sertakan elemen <xhtml:link> untuk setiap varian bahasa/wilayah dari halaman tersebut. Ini mengharuskan skrip pembuatan Anda memiliki akses ke peta perutean lengkap aplikasi Anda. Pastikan peta situs diperbarui secara otomatis setiap kali halaman baru ditambahkan atau dihapus.

Bagaimana cara mengelola persetujuan GDPR di berbagai wilayah?

Kelola persetujuan GDPR dengan menggunakan Platform Manajemen Persetujuan (CMP) yang mendeteksi lokasi pengguna. CMP harus menampilkan spanduk yang sesuai dengan GDPR untuk pengguna di Uni Eropa/Inggris dan dapat menampilkan spanduk yang berbeda dan tidak terlalu ketat (atau tidak sama sekali) untuk pengguna di wilayah lain. Ini memastikan Anda memenuhi persyaratan hukum tanpa memengaruhi pengalaman pengguna secara tidak perlu untuk seluruh audiens global Anda.

Perbedaan biaya antara arsitektur multi-situs dan mono-repo?

Arsitektur multi-situs (ccTLD) memiliki biaya awal dan berkelanjutan yang lebih tinggi karena beberapa domain, sertifikat SSL, dan instans hosting terpisah. Pendekatan mono-repo (subfolder) secara signifikan lebih murah, karena beroperasi pada satu domain dan paket hosting. Meskipun kompleksitas pengembangan mono-repo bisa lebih tinggi pada awalnya, total biaya kepemilikannya biasanya jauh lebih rendah dalam jangka panjang.

Bagaimana cara mengonfigurasi CDN untuk rendering sisi edge?

Konfigurasikan CDN Anda untuk rendering sisi edge dengan menggunakan Edge Functions (seperti Vercel Edge Functions atau Cloudflare Workers). Tulis fungsi yang mencegat permintaan masuk di edge CDN. Fungsi ini dapat mendeteksi lokasi pengguna atau preferensi bahasa, mengambil data dari CMS headless, dan merender halaman langsung dari cache edge. Ini secara dramatis mengurangi latensi dengan menghindari perjalanan pulang-pergi ke server asal Anda.

---

Batasan, Alternatif & Panduan Profesional

Batasan Arsitektural

Pendekatan yang dibahas di sini, terutama untuk Next.js, didasarkan pada praktik terbaik saat ini, tetapi teknologi berkembang pesat. Tolok ukur kinerja dapat bervariasi berdasarkan penyedia hosting, konfigurasi CDN, dan kompleksitas aplikasi. Lebih lanjut, pilihan antara ccTLD dan subfolder tidak selalu jelas; itu sangat tergantung pada tujuan bisnis jangka panjang, sumber daya yang tersedia, dan lanskap kompetitif dari ceruk spesifik Anda.

Pendekatan Alternatif

Meskipun panduan ini berfokus pada tumpukan Next.js/React, prinsip serupa berlaku untuk kerangka kerja lain seperti Nuxt.js atau SvelteKit. Alternatif untuk subfolder atau ccTLD adalah menggunakan gTLD (domain tingkat atas generik) dengan subdomain (mis., fr.yourbrand.com). Ini menawarkan jalan tengah untuk branding dan konfigurasi server, memungkinkan Anda untuk menghosting berbagai wilayah di server yang berbeda sambil tetap menjaga nama merek utama tetap utuh.

Konsultasi Profesional

Mengimplementasikan arsitektur situs global adalah tugas teknis yang kompleks. Jika Anda berurusan dengan ribuan halaman dinamis, aturan mata uang dan pajak yang rumit, atau persyaratan kedaulatan data yang ketat, disarankan untuk berkonsultasi dengan spesialis pengembangan. Audit teknis dapat membantu memodelkan total biaya kepemilikan dan mencegah kesalahan arsitektural yang mahal. Mengingat separuh bisnis di Inggris mengalami serangan siber tahun lalu, menurut survei Pemerintah Inggris tahun 2024, meminimalkan kerentanan adalah perhatian arsitektural utama[1].

---

Kesimpulan

Membangun kehadiran web internasional yang sukses memerlukan panduan arsitektur situs global yang disengaja. Pilar utamanya meliputi membuat pilihan URL yang strategis, mengotomatiskan tugas SEO teknis seperti hreflang, dan memanfaatkan jaringan edge-first untuk performa. Melampaui saran generik untuk mengimplementasikan solusi tingkat pengembang ini adalah yang membedakan situs yang benar-benar global dari yang hanya diterjemahkan. Hasil akan bervariasi berdasarkan tumpukan dan audiens spesifik Anda, tetapi fondasinya tetap sama.

Jika kompleksitas implementasi hreflang dinamis, perutean edge, dan mono-repo yang dapat diskalakan tampak menakutkan, Jamie Grand dapat membantu. Untuk proyek kompleks yang membutuhkan keahlian teknis mendalam, Solusi Khusus kami menyediakan arsitektur kustom yang Anda butuhkan. Untuk memulai dengan lebih sederhana, model Nol di Muka kami dapat membantu Anda meluncur. Untuk menentukan jalur yang tepat untuk bisnis Anda, pertimbangkan untuk mendapatkan audit teknis gratis.

---

Referensi

1. Survei Pelanggaran Keamanan Siber Pemerintah Inggris 2024 (Statistik Resmi Pemerintah, 2024)
2. Google Search Central: Mengelola Situs Multi-regional dan Multibahasa (Dokumentasi Teknis)
3. Dokumentasi Next.js: Perutean Internasionalisasi (i18n) (Dokumentasi Teknis)
4. Aktivitas Internasionalisasi W3C (i18n) (Badan Standarisasi)
5. Dampak Lokasi Server pada Kinerja Web (Tinjauan Teknis, web.dev)