Dari Vite React Pindah ke Nextjs Supaya Lebih SEO

19 Januari 2026

Sebelumnya saya menggunakan Vite untuk menghasilkan static file yang dibuat menggunakan react, dan pada saat pembuatannya saya memiliki beberapa rute dan setiap rute mendefinisikan tag meta yang tentunya bertujuan untuk optimasi SEO juga sebagai tag yang memberitahu sosial media misal untuk menampilkan preview pada saat link di share.

Ketika build, vite menghasilkan static file berupa satu halaman index.html dan masalahnya terletak disana. Meskipun semua rute halaman tersedia, tapi setiap halaman yang memiliki tag meta yang dibungkus menggunakan react helmet ternyata tidak ikut terbuild atau data meta tagnya tidak terbawah, hanya ada didalam satu file “index.html”.

Ada beberapa metode yang saya coba sebelum beralih ke Nextjs, seperti menggunakan react snap, vite ssg atau sejenisnya, tetapi hasilnya tidak memuaskan. Akhirnya saya beralih ke ekosistem Nextjs, yah ini juga framework react tetapi build static file yang dihasilkan berbeda dengan vite.

Dengan menggunakan nextjs saya bisa menghasilkan file index.html pada setiap halaman statis atau rute yang terdapat pada Nextjs sehingga dengan begitu tag meta yang terdapat pada setiap halaman bisa terbawa.

Konfigurasi Nextjs untuk menghasilkan halaman statis

Sebenarnya kita bisa saja mengupload murni nextjs misal ke platform vercel tapi dengan pertimbangan tertentu maka saya lebih memilih menyimpannya ke hosting biasa atau shared hosting. Oleh karena itu Saya perlu build halaman nextjs pada saya supaya bisa digunakan pada hosting biasa.

Konfigurasi config nextjs.

Supaya nextjs nanti menghasilkan halaman html beserta semua rute yang sudah kita buat maka confignya perlu kita atur. Nantinya pada saat melakukan build maka akan menghasilkan folder “out” yang bisa di upload ke hosting. Pengaturan file next.config.ts

import type { NextConfig } from "next";
const nextConfig: NextConfig = {
 output: 'export', // Ini akan mengaktifkan mode export statis
 // Opsional: Jika menggunakan tag <Image>, Anda harus menonaktifkan optimasi gambar default
 trailingSlash: true,
 images: {
   unoptimized: true,
 },
};
module.exports = nextConfig;

Mengatur htaccess

Untuk pengaturan htaccess bisa lihat contoh dibawah ini

Options -MultiViews
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Jika tidak ada, coba cari file .html-nya
# Contoh: user buka /tentang, server akan cari /tentang.html
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.*)$ $1.html [L]
ErrorDocument 404 /404/index.html

Build dan Menghasilkan Halaman Statis

Terakhir kita tinggal menjalankan perintah untuk build

npm run build

Dengan cara diatas maka halaman statis website kita akan menjadi lebih SEO dan tentunya kalau di share di sosial media seperti facebook, maka bisa muncul gambar dan deskripsi halaman secara lengkap, sehingga ini membuat halaman website kita jadi lebih profesional