thumnail

Membangun Halaman Artikel Menarik di Next.js dengan cdnjs

Sat, March 2025 02:50:00

Pendahuluan

Next.js adalah framework React yang kuat, menghadirkan server-side rendering, static site generation, dan berbagai optimasi performa secara langsung. Namun, agar halaman Next.js kamu lebih menarik dan interaktif, kita tetap membutuhkan library CSS dan JS. Di sinilah cdnjs berperan — jaringan pengiriman konten (CDN) yang menyediakan banyak library frontend populer seperti Bootstrap, Highlight.js, FontAwesome, dan lainnya.

Dalam panduan lengkap ini, kita akan membangun halaman artikel menarik menggunakan Next.js dan cdnjs, mulai dari setup hingga fitur lanjutan. Yuk, kita mulai!

Kenapa Menggunakan cdnjs di Next.js?

cdnjs adalah CDN gratis untuk library JavaScript yang menawarkan beberapa keuntungan utama:

Next.js, dengan fokus pada performa dan SEO, bekerja dengan lancar bersama cdnjs jika dikonfigurasi dengan benar.

Setup Next.js dan cdnjs

1. Buat Proyek Next.js

Jika kamu belum punya proyek Next.js, buat yang baru:

npx create-next-app@latest cdnjs-nextjs-article
cd cdnjs-nextjs-article

2. Install Dependencies

Meskipun cdnjs menyajikan library frontend via CDN, mari kita tambahkan satu package praktis untuk syntax highlighting yang akan kita pakai nanti:

npm install highlight.js

Menambahkan Resource dari cdnjs

1. Setup Komponen Layout

Buat file layout di components/Layout.js untuk mengatur struktur bersama dan menyertakan library cdnjs secara global.

import Head from 'next/head';

const Layout = ({ children }) => (
  <>
    <Head>
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css"
      />
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"
      />
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
      />
    </Head>

    <main className="container mt-5">{children}</main>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"
      async
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"
      async
    ></script>
    <script dangerouslySetInnerHTML={{ __html: 'hljs.highlightAll();' }} />
  </>
);

export default Layout;

2. Buat Halaman Artikel

Buat file baru di pages/article.js untuk kontennya:

import Layout from '@/components/Layout';

export default function Article() {
  return (
    <Layout>
      <h1 className="text-primary animate__animated animate__fadeInDown">
        Membangun Halaman Artikel Keren dengan Next.js
      </h1>
      <p className="text-muted">Ditulis oleh <strong>Admin</strong> pada {new Date().toDateString()}</p>
      <hr />

      <h2 className="mt-4">1. Pengenalan Next.js</h2>
      <p>Next.js menggabungkan server-side rendering dan static site generation untuk situs yang cepat dan SEO-friendly.</p>

      <h2 className="mt-4">2. Contoh Kode:</h2>
      <pre>
        <code className="language-javascript">
          {`const fetchData = async () => {
  const res = await fetch('/api/data');
  return res.json();
};`}
        </code>
      </pre>

      <h2 className="mt-4">3. Kesimpulan</h2>
      <p>Next.js dan cdnjs memudahkan kita membangun halaman web modern dan responsif dalam waktu singkat!</p>
    </Layout>
  );
}

Fitur Lanjutan

Tambah Tombol Salin Kode

Agar pengguna bisa menyalin kode dengan satu klik:

<button className="btn btn-secondary" onClick={() => {
  navigator.clipboard.writeText(document.querySelector('pre code').innerText);
  alert('Kode berhasil disalin!');
}}>
  Salin Kode
</button>

Tambah Tombol Dark Mode

<button className="btn btn-dark" onClick={() => document.body.classList.toggle('bg-dark')}>
  Mode Gelap
</button>

Tambah Meta Tag SEO

Di Layout.js, tambahkan di bagian <Head>:

<Head>
  <title>Artikel Keren dengan Next.js dan cdnjs</title>
  <meta name="description" content="Belajar cara membuat halaman artikel keren di Next.js menggunakan cdnjs." />
  <meta property="og:title" content="Artikel Keren dengan Next.js dan cdnjs" />
  <meta property="og:description" content="Belajar cara membuat halaman artikel keren di Next.js menggunakan cdnjs." />
</Head>

Kesimpulan

Kita berhasil membangun halaman artikel yang menarik dan interaktif dengan Next.js dan cdnjs. Mulai dari desain layout, highlighting kode, animasi, hingga fitur lanjutan seperti tombol salin dan mode gelap — semuanya dibuat dengan rapi dan efisien.

Untuk pengembangan selanjutnya, pertimbangkan:

Selamat ngoding! 🚀