Optimasi SEO dan Performa di Next.js: Tips untuk Frontend Dev

Lagi asyik-asyiknya ngoprek kode sambil ditemani kopi saset, tiba-tiba ada notifikasi masuk dari klien. "Mas, bisa bantu naikin traffic sama bikin website ngebut enggak?" Duh, permintaan dadakan lagi.

Sebagai freelancer, momen kayak gini sering banget kita alami. Klien butuh solusi cepat dan tepat, bukan cuma kode yang jalan. Nah, buat yang ngoding pakai Next.js, ini saatnya upgrade skill.

Next.js 15 bukan sekadar update biasa, tapi game-changer buat kita para developer. Gimana enggak? Ada React 19 yang bawa banyak fitur baru, Next.js Cache yang makin canggih, dan banyak tools lain yang bikin kerjaan kita makin gampang. Rasanya kayak dikasih power-up gratis buat website kita.

"Oke, siap!" kataku dalam hati. Tapi, dari mana mulainya? Santai, sini aku kasih bocoran rahasianya. Kita bedah bareng jurus-jurus sakti buat optimasi SEO dan performa di Next.js 15. Siap-siap, website klien bakal melesat kayak roket!

Persiapan: Bongkar Proyek Klien (dari GitHub)

Sebelum kita mulai pakai jurus-jurus sakti tadi, kita butuh 'arena tempur'-nya dulu, kan? Anggap aja klien ngasih kita proyek yang udah ada, dan sekarang tugas kita buat 'bedah' dan optimasi.

Jadi, langkah pertama, buka terminal atau Git Bash kesayanganmu. Kita bakal clone proyek dari GitHub yang sudah aku siapkan. Proyek ini ibarat template awal yang sering kita temui di dunia freelancer, sederhana tapi butuh sentuhan optimasi.

Jalankan perintah ini:

git clone <https://github.com/cakfan/bwa-next-seo>

Setelah selesai, masuk ke dalam folder proyeknya:

cd bwa-next-seo

Sekarang, kita install semua "amunisi" atau dependencies yang dibutuhkan:

npm install
# atau
bun install
# atau
yarn install
# atau
pnpm install

Tunggu sebentar sampai semua prosesnya selesai. Kalau sudah, coba jalankan proyeknya untuk memastikan semuanya berjalan lancar:

bun run dev

Sekarang coba buka browser dan kunjungi http://localhost:3000. Kalau halamannya muncul tanpa error, berarti kita sudah siap tempur! Proyek ini sudah pakai App Router di Next.js, jadi kita bisa langsung tancap gas ke bagian optimasi.

Oke, arena sudah siap, proyek sudah di tangan. Sekarang, saatnya kita bongkar dan bikin website ini jadi lebih gacor. Siap?

Jurus-Jurus Sakti Optimasi SEO

1. Metatag dan Open Graph (OG) yang Bikin Tampilan Cantik di Medsos

Metatags
Metatags

Kalau mau serius soal SEO, metatag ini wajib banget kamu kuasai. Ibaratnya, metatag itu kartu nama digital buat website kita. Setiap kali Google crawler datang, metatag-lah yang mereka baca pertama kali buat tahu isi website kita tentang apa.

Next.js 15 dengan App Router-nya bikin urusan metatag jadi lebih gampang. Kamu bisa atur semuanya di satu file layout.tsx atau page.tsx.

Buka layout.tsx lalu ubah jadi seperti berikut ini:

// src/app/layout.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Navbar from "@/components/Navbar";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  metadataBase: new URL(process.env.HOMEPAGE_URL ?? "<http://localhost:3000>"),
  keywords: [
    "history",
    "american",
    "crime",
    "french",
    "fiction",
    "english",
    "magical",
    "mystery",
    "love",
    "classic",
    "memory",
    "nostalgia",
    "nature",
    "tranquility",
    "life",
    "books",
    "adventure",
  ],
  title: {
    default: "BWA SEO — Explore Design and Coding",
    template: "%s — BWA SEO",
  },
  description:
    "Discover BWA SEO, your ultimate source for learning design, ui/ux and coding",
  authors: {
    name: "Taufan Fatahillah",
    url: "<https://instagram.com/withcakfan>",
  },
  openGraph: {
    title: "BWA SEO — Explore Design and Coding",
    description:
      "Discover BWA SEO, your ultimate source for learning design, ui ux and coding",
    images: ["/img/og/default.png"],
  },
  twitter: {
    card: "summary_large_image",
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-x-hidden`}
      >
        <Navbar />
        {children}
      </body>
    </html>
  );
}

Lihat, kode di atas sudah mencakup Open Graph dan Twitter Card. Jadi, kalau link website kita di-share di media sosial kayak Twitter atau Facebook, gambarnya nongol, deskripsinya jelas, dan enggak cuma URL doang. Kelihatan lebih profesional, kan?

Buka file src/app/post/page.tsx dan tambahkan metatag berikut:

export async function generateMetadata({
  searchParams,
}: PostProps): Promise<Metadata> {
  const { tag } = await searchParams;
  return {
    title: tag || "Post",
    description: `Post by ${tag}`,
  };
}

Sehingga akan menjadi seperrti ini:

import { getPostByTag } from "@/actions/post-by-tag";
import PostItem from "@/components/PostItem";
import Tags from "@/components/Tags";
import { Metadata } from "next";
import Link from "next/link";
import { redirect } from "next/navigation";

interface PostProps {
  searchParams: Promise<{
    tag?: string;
  }>;
}

export async function generateMetadata({
  searchParams,
}: PostProps): Promise<Metadata> {
  const { tag } = await searchParams;
  return {
    title: tag || "Post",
    description: `Post by ${tag}`,
  };
}

export default async function PostPage({ searchParams }: PostProps) {
  const { tag } = await searchParams;
  if (!tag) redirect("/");
  const posts = await getPostByTag(tag);
  if (!posts?.posts) redirect("/");
  return (
    <div className="mx-auto max-w-3xl flex my-6 flex-col gap-4">
      <Tags tagActive={tag} />
      <h2 className="text-3xl font-bold">Post: {tag}</h2>
      {posts.posts.map((post, index) => (
        <Link key={index} href={`/post/${post.id}`}>
          <PostItem {...post} />
        </Link>
      ))}
    </div>
  );
}

Selanjutnya buka src/app/post/[id]/page.tsx, dan tambahkan metatag beerikut:

export async function generateMetadata({
  params,
}: PostProps): Promise<Metadata> {
  const { id } = await params;
  const post = await getPostById(id!);
  return {
    title: post?.title,
    description: post?.body.replace(/(<([^>]+)>)/gi, ""),
    openGraph: {
      title:
        post && post.title.length < 30
          ? `${post?.title} — BWA SEO`
          : post?.title,
      description: post?.body.replace(/(<([^>]+)>)/gi, ""),
      images: ["/img/og/default.png"],
    },
  };
}

Maka kode lengkapnya akan menjadi seperti ini:

import { getPostById } from "@/actions/post-by-id";
import PostItem from "@/components/PostItem";
import { Metadata } from "next";
import { redirect } from "next/navigation";

interface PostProps {
  params: Promise<{
    id?: string;
  }>;
}

export async function generateMetadata({
  params,
}: PostProps): Promise<Metadata> {
  const { id } = await params;
  const post = await getPostById(id!);
  return {
    title: post?.title,
    description: post?.body.replace(/(<([^>]+)>)/gi, ""),
    openGraph: {
      title:
        post && post.title.length < 30
          ? `${post?.title} — BWA SEO`
          : post?.title,
      description: post?.body.replace(/(<([^>]+)>)/gi, ""),
      images: ["/img/og/default.png"],
    },
  };
}

export default async function PostPage({ params }: PostProps) {
  const { id } = await params;
  if (!id) redirect("/");
  const post = await getPostById(id);
  if (!post) redirect("/");
  return (
    <article className="mx-auto max-w-3xl my-4">
      <PostItem {...post} />
    </article>
  );
}

Selanjutnya buka file src/app/about/page.tsx, dan tambahkan metatag berikut:

export const metadata: Metadata = {
  title: "About",
  description: "Learn more about BWA SEO",
};

Maka kode lengkapnya akan seperti berikut ini:

import { Metadata } from "next";

export const metadata: Metadata = {
  title: "About",
  description: "Learn more about BWA SEO",
};

export default function AboutPage() {
  return (
    <div className="mx-auto max-w-3xl my-6 flex flex-col gap-4">
      <h2 className="text-4xl font-bold">About</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
        cumque doloremque unde veritatis quod quaerat numquam magni iste in,
        aliquid sit ducimus, neque quisquam perspiciatis dolorum minus similique
        corrupti aliquam!
      </p>
    </div>
  );
}

2. Server Components, Teman Baiknya Google Bot

Image from vercel
Image from vercel

Next.js 15 semakin mengandalkan React Server Components (RSC). Jadi, apa sih ini? Gampangnya, ini kayak kita membangun halaman website di server langsung. Hasilnya, kode HTML yang sudah ready dikirim ke browser pengguna.

Lalu, apa hubungannya sama Google? Begini, Google Bot itu malas. Mereka maunya langsung dapat konten, bukan nungguin JavaScript di-load dan dieksekusi dulu di sisi klien. Dengan Server Components, konten utama kita sudah ada di HTML yang di-render di server. Alhasil, Google Bot bisa langsung crawl dan index konten kita dengan cepat dan mudah. Ini salah satu fitur paling ampuh buat SEO!

Secara default, semua komponen di folder app Next.js 15 adalah Server Components (kecuali kita kasih directive 'use client'). Jadi, kalau mau bikin halaman statis atau yang kontennya butuh di-index Google, pakai Server Components aja.

3. Sitemap dan Robots.txt, Peta Jalan Buat Google

Sitemap dan Robots.txt
Sitemap dan Robots.txt

Bayangin Google Bot itu turis yang nyasar di kota besar. Kalau enggak ada peta, pasti bingung mau ke mana. Nah, sitemap.xml dan robots.txt adalah peta jalan dan penjaga gerbang buat Google.

  • sitemap.xml: Ini daftar isi lengkap semua URL penting di website kita.
  • robots.txt: Ini ngasih tahu Google Bot mana halaman yang boleh di-crawl dan mana yang enggak (misalnya halaman admin).

Next.js 15 bikin proses ini otomatis. Kamu tinggal buat file sitemap.ts dan robots.ts di folder app.

Buat file src/app/sitemap.ts dan tambahkan kode ini:

import { MetadataRoute } from "next";
import { getAllPost } from "@/actions/all-post";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseUrl = process.env.HOMEPAGE_URL ?? "localhost:3000";
  const getPosts = await getAllPost();

  const posts =
    getPosts?.posts?.map((post) => {
      return {
        url: `${baseUrl}/post/${post.id}`,
        lastModified: new Date(),
      };
    }) ?? [];

  return [
    {
      url: baseUrl,
      lastModified: new Date(),
    },
    {
      url: `${baseUrl}/about`,
    },
    ...posts,
  ];
}

Kode ini adalah implementasi dynamic sitemap di Next.js 13+ dengan App Router. Sitemap ini digunakan untuk memberitahu mesin pencari (seperti Google) daftar halaman yang tersedia di website kamu.

Mari kita bahas baris demi baris secara santai tapi jelas:

🔢 1. Import yang Diperlukan

import { MetadataRoute } from "next";
import { getAllPost } from "@/actions/all-post";
  • MetadataRoute adalah bagian dari Next.js khusus untuk type-checking rute metadata seperti robots, sitemap, dll.
  • getAllPost adalah function buatan sendiri (mungkin ambil data dari database atau API) yang mengembalikan semua postingan di websitemu.

⚙️ 2. Function sitemap

export default async function sitemap(): Promise<MetadataRoute.Sitemap>
  • Fungsi ini diekspor secara default dan bertipe MetadataRoute.Sitemap — artinya hasilnya harus berupa array berisi objek { url, lastModified? }.

🌐 3. Ambil Base URL

const baseUrl = process.env.HOMEPAGE_URL ?? "localhost:3000";
  • Mengambil base URL dari environment variable. Jika tidak ada, pakai default localhost:3000.
  • Contoh hasilnya: https://dawahplay.com (jika HOMEPAGE_URL diset).

📰 4. Ambil Data Semua Post

const getPosts = await getAllPost();
  • Ambil semua post dari fungsi yang di-import tadi. Output-nya bisa berupa { posts: [ { id: "abc" }, ... ] }.

🔗 5. Bangun Daftar URL untuk Setiap Postingan

const posts =
  getPosts?.posts?.map((post) => {
    return {
      url: `${baseUrl}/post/${post.id}`,
      lastModified: new Date(),
    };
  }) ?? [];
  • Untuk setiap post, generate URL lengkapnya, contoh: https://dawahplay.com/post/123.
  • Tambahkan properti lastModified (waktu sekarang), meskipun idealnya kamu bisa ambil dari post.updatedAt.

Jika getPosts?.posts undefined atau error, maka fallback ke array kosong [].

📦 6. Return Array Sitemap

return [
  {
    url: baseUrl,
    lastModified: new Date(),
  },
  {
    url: `${baseUrl}/about`,
  },
  ...posts,
];

Sitemap mengembalikan daftar URL:

  1. Homepage
  2. Halaman /about
  3. Semua halaman post (yang di-spread dari posts)

✨ Kesimpulan

Kode ini:

  • Membuat sitemap secara dinamis.
  • Berguna untuk SEO, karena Google bisa tahu halaman mana yang ada.
  • Bisa dikembangkan dengan menambahkan:
    • priority
    • changefreq
    • lastModified yang sebenarnya dari DB

Nah, selanjutnya buat file**src/app/robots.ts** dan tambahkan kode ini

import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  const baseUrl = process.env.HOMEPAGE_URL ?? "localhost:3000";
  return {
    rules: {
      userAgent: "*",
      allow: ["/", "/post", "/about"],
      disallow: [],
    },
    sitemap: `${baseUrl}/sitemap.xml`,
  };
}

Kode ini membuat robots.txt secara dinamis di Next.js (App Router) untuk kebutuhan SEO. File robots.ts ini akan menghasilkan robots.txt saat diakses oleh crawler (seperti Googlebot).

🔽 1. Import Tipe dari Next.js

import { MetadataRoute } from "next";
  • Mengimpor MetadataRoute dari Next.js, yang menyediakan type checking untuk rute metadata seperti robots, sitemap, dan manifest.

🔁 2. Fungsi Utama: robots()

export default function robots(): MetadataRoute.Robots {
  • Fungsi ini secara otomatis akan dipanggil oleh Next.js saat crawler mengakses /robots.txt.
  • Tipe return-nya adalah MetadataRoute.Robots, yang memastikan output-nya sesuai format yang dikenali oleh crawler.

🌐 3. Base URL (Sitemap)

const baseUrl = process.env.HOMEPAGE_URL ?? "localhost:3000";
  • Mengambil base URL dari environment variable HOMEPAGE_URL.
  • Kalau tidak ada, default-nya ke localhost:3000 (berguna saat development).

🤖 4. Return Isi File Robots

return {
  rules: {
    userAgent: "*",
    allow: ["/", "/post", "/about"],
    disallow: [],
  },
  sitemap: `${baseUrl}/sitemap.xml`,
};

Mari kita bahas bagian return-nya:

🔹 rules

rules: {
  userAgent: "*", // semua crawler
  allow: ["/", "/post", "/about"],
  disallow: [],
}
  • userAgent: "*" → aturan ini berlaku untuk semua crawler (Googlebot, Bingbot, dll).
  • allow → hanya memperbolehkan crawler mengakses:
    • / (homepage)
    • /post (mungkin index halaman post)
    • /about
  • disallow: [] → artinya tidak ada halaman yang dilarang.

Kalau kamu ingin blokir admin panel misalnya, kamu bisa disallow: ["/admin"].

🔹 sitemap

sitemap: `${baseUrl}/sitemap.xml`
  • Memberitahu crawler di mana lokasi sitemap berada, agar proses indexing lebih cepat dan terarah.

📄 Hasil Outputnya Akan Seperti Ini:

Saat file ini dirender oleh Next.js, crawler akan menerima hasil robots.txt seperti:

User-agent: *
Allow: /
Allow: /post
Allow: /about
Sitemap: <https://yourdomain.com/sitemap.xml>

✅ Kapan Ini Penting?

  • Untuk SEO: Menentukan halaman mana yang boleh/enggak diindeks oleh mesin pencari.
  • Untuk kontrol indexing: Misalnya kamu punya halaman /admin, kamu bisa larang agar tidak muncul di Google.
  • Untuk site audit: Google Search Console akan mengecek file ini.

🔧 Tips Tambahan

  • Tambahkan aturan lebih spesifik jika ada halaman privat:
disallow: ["/admin", "/api"]
  • Jangan lupa set HOMEPAGE_URL di .env agar baseUrl valid saat production.

Setelah deploy, Next.js akan otomatis membuat file sitemap.xml dan robots.txt di root domain kamu. Gampang, kan? Dengan ini, Google Bot enggak akan nyasar lagi.

Ngebut Bareng Next.js 15: Tips Performa!

Setelah urusan SEO beres, sekarang waktunya kita fokus ke performa. Percuma website kita nangkring di halaman satu Google, tapi pas diklik loading-nya lama kayak siput. Pengguna bakal langsung kabur! Next.js 15 punya beberapa fitur andalan buat bikin website kita ngebut.

1. Next.js Cache, Rahasia Bikin Loading Cepat Kilat

Pernah kan ngerasain website lemot? Dikit-dikit loading, loading, dan loading lagi. Nah, itu salah satu musuh terbesar kita sebagai developer. Untungnya, Next.js 15 punya sistem caching yang makin canggih dan otomatis.

Konsepnya sederhana: Next.js menyimpan hasil render di server. Jadi, kalau ada request ke halaman yang sama, server enggak perlu bikin ulang dari nol. Tinggal kasih aja data yang sudah disimpan di cache. Hasilnya? Waktu loading jadi cepat kilat!

Kabar baiknya, ini semua terjadi secara otomatis di Next.js 15 dengan App Router. Selama kita menggunakan Server Components dan fitur caching bawaan, kita enggak perlu pusing-pusing lagi urus cache manual. Tinggal build, deploy, dan biarkan Next.js yang bekerja.

2. Optimasi Gambar dengan next/image

Kalau ada yang bikin website lemot, 90% biang keroknya adalah gambar. Seringkali kita pasang gambar dengan ukuran raksasa tanpa dioptimasi, alhasil website jadi berat banget.

Solusinya, pakai komponen next/image. Ini bukan komponen gambar biasa, ya. Ini punya kekuatan super:

  • Lazy loading otomatis: Gambar baru di-load saat pengguna scroll ke area gambar.
  • Optimasi format: Gambar otomatis dikonversi ke format yang lebih modern dan efisien, kayak WebP atau AVIF.
  • Responsive otomatis: Gambar disajikan dalam ukuran yang pas sesuai viewport pengguna.

Cukup ganti tag <img> biasa dengan komponen Image dari Next.js. Karena pada proyek kita tidak adaa gambar maka berikut ini hanya contoh saja:

// components/LazyLoadedModal.tsx
// Ini adalah komponen yang akan di-lazy load
const LazyLoadedModal = () => {
  return (
    <div className="modal-container">
      <h3>Ini adalah modal yang di-load belakangan!</h3>
      <p>Kontennya tidak akan dimuat sampai tombol diklik.</p>
    </div>
  );
};

export default LazyLoadedModal;

Dan cara memanggilnya di halaman utama:

// app/page.tsx
'use client'; // Komponen ini harus di-client karena ada interaksi user

import dynamic from 'next/dynamic';
import React, { useState } from 'react';

// Lazy load komponen modal
const DynamicModal = dynamic(() => import('@/components/LazyLoadedModal'), {
  loading: () => <p>Loading modal...</p>, // Tampilkan placeholder saat loading
  ssr: false, // Penting: Jangan render di server untuk komponen ini
});

const HomePage = () => {
  const [showModal, setShowModal] = useState(false);

  return (
    <main>
      <h1>Selamat Datang di Website Ngebut!</h1>
      <p>Klik tombol di bawah untuk membuka modal.</p>
      <button onClick={() => setShowModal(true)}>
        Tampilkan Modal
      </button>

      {showModal && <DynamicModal />}
    </main>
  );
);
};

export default HomePage;

Dengan cara ini, DynamicModal hanya akan di-load ketika showModal bernilai true. Ini adalah cara ampuh untuk mengurangi ukuran bundle JavaScript di halaman awal.

Deploy ke Vercel, Biar Website Live!

Vercel
Vercel

Semua jurus sakti SEO dan performa sudah kita aplikasikan. Sekarang, waktunya kita tunjukkan hasilnya ke klien. Cara paling gampang dan cepat buat deploy proyek Next.js adalah pakai Vercel. Kenapa? Karena Vercel itu dibuat sama tim yang bikin Next.js, jadi integrasinya super mulus.

Ikuti langkah-langkah simpel ini:

  • Pastikan Kode Sudah di GitHub: Pastikan proyek yang sudah kamu clone dan ubah tadi sudah kamu push ke repositori GitHub pribadimu. Ini penting, karena Vercel bakal 'narik' kode dari sana.
git add .
git commit -m "feat: tambahkan optimasi SEO dan performa"
git push origin main
  • Login ke Vercel: Buka website vercel.com dan login menggunakan akun GitHub-mu.
  • Import Proyek: Setelah login, klik tombol "Add New..." lalu pilih "Project". Vercel akan otomatis menampilkan daftar repositori GitHub-mu. Pilih repositori proyek yang tadi (bwa-next-seo).
  • Konfigurasi dan Deploy: Vercel akan mendeteksi bahwa ini adalah proyek Next.js. Kamu enggak perlu ubah banyak konfigurasi. Cukup klik "Deploy". Tunggu sebentar. Vercel akan otomatis menjalankan proses build dan deploy. Kamu bisa lihat progresnya langsung di dashboard. Kalau semua berjalan lancar, kamu akan lihat animasi kembang api yang menandakan deploy berhasil.
  • Cek Hasilnya: Vercel akan kasih URL publik buat proyekmu (misalnya, nama-proyek-mu.vercel.app). Nah, sekarang kamu bisa buka URL itu, cek kecepatan loadingnya, dan kirim hasilnya ke klien. Misi selesai!
  • Masuk ke Settings → Environment Variables dan tambahkan ini, sesuaikan dengan url website kamu:
HOMEPAGE_URL="URL_WEBSITE"
Vercel Environment Variables
Vercel Environment Variables

Dengan Vercel, setiap kali kamu push perubahan ke branch utama (main/master), Vercel akan otomatis build ulang dan deploy perubahan itu. Jadi, workflow kerja kita sebagai freelancer jadi lebih efisien.

Uji Kecepatan di Pagespeed Insights

Setelah website kita live, ini dia momen yang paling ditunggu: uji performa di Google Pagespeed Insights. Alat ini akan kasih tahu skor performa website kita dan saran perbaikan.

Yuk, kita buktikan jurus-jurus yang sudah kita terapkan tadi benar-benar manjur. Coba buka Google Pagespeed Insights dan masukkan URL berikut satu per satu:

Halaman Utama (Homepage): https://bwa-next-seo.vercel.app/

  • Halaman ini di-render di server dan pakai Next.js Image. Seharusnya, skor Pagespeed-nya tinggi banget. Waktu loadingnya harusnya cepat, bahkan di koneksi internet yang lambat.
Homepage
Homepage

Halaman Kategori/Tag: https://bwa-next-seo.vercel.app/?tag=history

  • Coba cek halaman dengan query parameter. Next.js 15 dengan caching yang canggih harusnya bisa menyajikan halaman ini dengan cepat, karena server menyimpan hasil render dari query yang sama.
Halaman Tag
Halaman Tag

Halaman Detail Postingan: https://bwa-next-seo.vercel.app/post/1

  • Pada halaman detail ini, kita bisa lihat bagaimana Server Components bekerja. Semua konten artikel sudah langsung ada di HTML, jadi Google Bot dan Pagespeed Insights bisa membacanya dengan mulus tanpa perlu nunggu JavaScript. Seharusnya skor SEO-nya sempurna!
Halaman Detail Post
Halaman Detail Post

Halaman 'About': https://bwa-next-seo.vercel.app/about

  • Halaman statis ini harusnya juga punya performa yang bagus. Ini membuktikan kalau optimasi yang kita lakukan berlaku di setiap halaman.
Halaman About
Halaman About

Apa yang harus kita lihat?

Perhatikan skor Performance, Accessibility, Best Practices, dan SEO. Idealnya, skor Performance harus di atas 90 untuk perangkat mobile dan desktop. Untuk SEO, kita harusnya dapat skor 100 karena sudah pasang metatag, sitemap, dan robots.txt dengan benar.

Kalau hasilnya memuaskan, selamat! Kamu sudah berhasil jadi developer yang enggak cuma bisa ngoding, tapi juga bikin website ngebut dan ramah Google.

Siap Jadi Pahlawan Frontend!

Akhirnya, kita sudah sampai di ujung perjalanan. Kita sudah bongkar habis rahasia Next.js 15, dari urusan metatag dan Open Graph yang bikin link website kita cantik di media sosial, sampai urusan caching dan next/image yang bikin performa melesat. Kita juga sudah buktikan langsung hasilnya di Pagespeed Insights.

Sekarang, kita bisa bilang kalau kita bukan cuma developer yang jago ngoding, tapi juga pahlawan buat klien. Kita bisa kasih solusi konkret untuk masalah traffic dan kecepatan website mereka.

Jadi, tunggu apa lagi? Next.js 15 sudah kasih kita semua senjatanya. Saatnya explore lebih dalam, coba fitur-fitur barunya di proyekmu, dan bikin website kita enggak cuma cakep, tapi juga ngebut dan ramah sama Google.

Happy coding! Kalau ada pengalaman seru atau trik lain yang mau dibagi, jangan ragu tulis di kolom komentar, ya. Sampai jumpa di artikel berikutnya!