Konfigurasi Lengkap Next.js Blog (kawruhnology)

• ✅ Pendahuluan
  • Teknologi yang Digunakan
  • Siapa yang Cocok Menggunakannya
  • Hasil Akhir yang Akan Dicapai
• 1. 📁 Struktur Proyek dan Persiapan
  • 1.1. Clone dan Instalasi
  • 1.2. Struktur Folder
• 2. ⚙️ Konfigurasi Inti yang Harus Dicek
  • 2.1. contentlayer.config.ts
  • 2.2. siteMetadata.js
  • 2.3. next.config.js
  • 2.4. .env dan .env.production
• 3. 🎨 Styling dan Tema
  • 3.1. tailwind.config.ts
  • 3.2. postcss.config.js
• 4. 🧠 TypeScript Konfigurasi
  • 4.1. tsconfig.json
  • ✅ Rekomendasi Perbaikan
• 5. ✅ Linting & Formatting
  • 5.1. .eslintrc.js
  • 5.2. .eslintignore
  • 5.3. Bonus: Lint, Format, dan Git Hooks
• 6. 🚀 Build & Deploy
  • 6.1. 🔨 Build untuk Produksi
  • 6.2. 🌐 Deploy ke GitHub Pages

✅ Pendahuluan

kawruhnology merupakan sebuah proyek sumber terbuka (open-source) berbasis Next.js yang dirancang sebagai platform blog statis modern. Proyek ini mengedepankan prinsip modularitas, kinerja optimal, dan kemudahan pengelolaan konten, terutama bagi pengguna yang memiliki latar belakang teknis, seperti pengembang web atau penulis dokumentasi.

Teknologi yang Digunakan

kawruhnology dibangun menggunakan tumpukan teknologi modern berikut:

• Next.js (dengan App Router) sebagai fondasi framework React.
• Tailwind CSS untuk styling berbasis utility classes.
• TypeScript untuk pengembangan yang lebih aman dan terstruktur.
• Contentlayer sebagai content framework untuk memproses file Markdown/MDX menjadi data terstruktur yang siap digunakan di React.
• GitHub Pages sebagai platform deployment untuk hosting statis.
• Pliny sebagai layer tambahan yang menyediakan plugin, helper, dan preset untuk blog teknikal modern.

Siapa yang Cocok Menggunakannya

Platform ini ditujukan bagi pengguna dengan kriteria berikut:

• Pengembang web atau full-stack developer yang ingin memiliki blog pribadi dengan kendali penuh atas kode sumber.
• Penulis teknis yang terbiasa menggunakan Markdown dan menginginkan alur kerja berbasis Git.
• Komunitas atau tim yang ingin membuat blog kolaboratif berbasis file.
• Pengguna yang membutuhkan struktur konten fleksibel namun tidak ingin bergantung pada CMS konvensional.

Hasil Akhir yang Akan Dicapai

Dengan mengikuti konfigurasi dan panduan yang disajikan dalam artikel ini, pengguna akan dapat menjalankan proyek kawruhnology secara lokal, mengelola konten dalam format Markdown, serta melakukan deploy ke GitHub Pages. Hasil akhir berupa sebuah situs blog statis modern, dengan dukungan tema gelap/terang, komentar berbasis GitHub (Giscus), estimasi waktu baca, pencarian lokal, dan struktur SEO-friendly.

1. 📁 Struktur Proyek dan Persiapan

1.1. Clone dan Instalasi

Langkah pertama sebelum memulai konfigurasi adalah melakukan kloning repositori dan menginstal dependensi yang dibutuhkan oleh proyek.

• a. Clone Repositori

git clone https://github.com/slametsampon.git
cd kawruhnology

Perintah di atas akan menyalin seluruh isi proyek dari GitHub ke direktori lokal.

• b. Instalasi Dependensi

Gunakan npm atau yarn untuk menginstal semua paket yang didefinisikan dalam package.json.

npm install

atau jika menggunakan yarn:

yarn install

• c. Menjalankan Proyek di Mode Pengembangan

Setelah dependensi berhasil diinstal, jalankan proyek secara lokal dengan perintah:

npm run dev

Aplikasi akan tersedia di http://localhost:3000 dan siap diuji di browser.

1.2. Struktur Folder

Struktur direktori dalam proyek kawruhnology mengikuti konvensi Next.js berbasis App Router, serta menambahkan beberapa direktori khusus untuk keperluan pengelolaan konten, UI, dan konfigurasi.

Berikut adalah penjelasan direktori penting:

Struktur ini dirancang agar proyek mudah dipelihara, fleksibel untuk dikembangkan, dan tetap ringan untuk dijalankan di berbagai lingkungan.

2. ⚙️ Konfigurasi Inti yang Harus Dicek

Untuk memastikan proyek kawruhnology berjalan sebagaimana mestinya, terdapat beberapa file konfigurasi inti yang perlu diperiksa dan disesuaikan. Bagian ini akan menguraikan konfigurasi tersebut berdasarkan fungsinya dalam sistem, serta bagaimana keterkaitannya satu sama lain.

2.1. contentlayer.config.ts

• Apa itu Contentlayer

Contentlayer adalah content framework untuk Next.js yang mengubah file Markdown/MDX menjadi data JSON yang siap digunakan di komponen React. File konfigurasi contentlayer.config.ts mendefinisikan bagaimana file MDX diproses, dikategorikan, dan diubah menjadi struktur data yang dapat dipakai di blog.

• Definisi Blog, Authors, Page, Post

Pada file ini, terdapat empat jenis dokumen (DocumentType) yang didefinisikan:

• Blog → Artikel blog utama, berada di content/blog/**/*.mdx.
• Authors → Profil penulis, berada di content/authors/**/*.mdx.
• Page → Halaman statis umum, berada di content/pages/**/*.mdx.
• Post → Postingan alternatif, berada di content/posts/**/*.mdx.

Setiap jenis dokumen memiliki properti fields yang menentukan struktur frontmatter, dan computedFields untuk memproses data tambahan.

• Fungsi computedFields

Objek computedFields digunakan untuk menghasilkan data otomatis dari konten, seperti:

• readingTime: estimasi waktu baca (menggunakan reading-time)
• slug: path URL yang dibentuk dari struktur file
• toc: daftar isi dari heading MDX
• filePath, path: informasi metadata file
• structuredData: schema JSON-LD untuk keperluan SEO (khusus tipe Blog)

Field ini memungkinkan pemisahan konten dan logika, serta membantu dalam rendering dinamis.

• Fitur Tambahan: Generate tag-data.json, author-data.json, dan Search Index

Di akhir file contentlayer.config.ts, terdapat fungsi onSuccess() yang akan dijalankan setelah proses build selesai. Fungsi ini menjalankan tiga fitur tambahan:

1. createTagCount() Membaca seluruh artikel Blog dan menghitung jumlah tag, lalu menyimpan hasilnya ke file JSON: ./app/tag-data.json

2. createAuthorCount() Sama seperti di atas, namun untuk menghitung jumlah artikel per author: ./app/author-data.json

3. createSearchIndex() Jika pencarian lokal (kbar) diaktifkan, data blog akan disimpan dalam public/search.json, sesuai konfigurasi pada siteMetadata.search.kbarConfig.

Fitur-fitur ini meningkatkan skalabilitas situs blog, terutama untuk penggunaan fitur navigasi dan pencarian.

• Integrasi dengan siteMetadata

Properti structuredData dan fungsi createSearchIndex() menggunakan data dari siteMetadata.js, seperti:

• siteUrl → untuk menyusun URL lengkap artikel
• socialBanner → gambar default untuk preview
• search.kbarConfig.searchDocumentsPath → path file index pencarian

Dengan ini, contentlayer.config.ts tidak berdiri sendiri, melainkan terintegrasi dengan metadata global situs.

2.2. siteMetadata.js

File ini menyimpan metadata global yang dapat digunakan di seluruh aplikasi, baik untuk kebutuhan SEO, branding, maupun integrasi layanan pihak ketiga.

• Metadata Situs

Beberapa properti penting yang digunakan di berbagai tempat:

• title, author, description → ditampilkan di halaman, header, dan meta tag
• siteUrl → digunakan untuk menyusun URL absolut dalam structured data
• siteLogo, socialBanner → digunakan sebagai aset visual di situs dan sosial media

Catatan: Disarankan untuk menghapus trailing slash pada siteUrl untuk menghindari duplikasi URL (//).

• Konfigurasi Komentar (Giscus)

Dukungan komentar dilakukan melalui integrasi Giscus, dengan konfigurasi berikut:

comments: {
  provider: 'giscus',
  giscusConfig: {
    repo: process.env.NEXT_PUBLIC_GISCUS_REPO,
    ...
  }
}

Giscus memerlukan sejumlah variabel environment yang harus disediakan, seperti NEXT_PUBLIC_GISCUS_REPOSITORY_ID, category, dan categoryId.

• Integrasi Analytics (Umami)

File ini juga menyertakan konfigurasi untuk Umami Analytics, meskipun belum aktif secara default:

analytics: {
  umamiAnalytics: {
    umamiWebsiteId: process.env.NEXT_UMAMI_ID;
  }
}

Jika ingin mengaktifkannya, pengguna perlu menyertakan variabel .env yang sesuai dan menyesuaikan kebijakan CSP (Content Security Policy) pada next.config.js.

• Konfigurasi Pencarian (kbar)

Fitur pencarian lokal menggunakan kbar diaktifkan dengan konfigurasi berikut:

search: {
  provider: 'kbar',
  kbarConfig: {
    searchDocumentsPath: 'search.json'
  }
}

Path ini digunakan oleh Contentlayer untuk menyimpan data hasil indexing agar bisa diakses frontend.

2.3. next.config.js

File next.config.js berfungsi untuk mengatur perilaku global Next.js, dan dalam proyek kawruhnology, file ini telah disesuaikan untuk mendukung hosting statis di GitHub Pages.

• basePath untuk GitHub Pages

Karena GitHub Pages hanya bisa menayangkan proyek di subfolder (misalnya ``), properti basePath disesuaikan berdasarkan mode:

basePath: isProd ? '/kawruhnology' : '';

Konfigurasi ini memastikan bahwa semua routing di Next.js menggunakan prefix yang sesuai saat di-deploy.

• output: export

Proyek menggunakan output: 'export' agar dapat menghasilkan output statis menggunakan next export. Ini penting untuk kompatibilitas dengan GitHub Pages.

• images.unoptimized

Untuk mencegah error saat build, konfigurasi berikut digunakan:

images: {
  unoptimized: true;
}

Next.js tidak mendukung Image Optimization pada mode export, sehingga konfigurasi ini wajib.

• Variabel env.BASE_PATH

Agar nilai basePath dapat digunakan di komponen frontend, variabel lingkungan berikut diekspor:

env: {
  BASE_PATH: isProd ? '/kawruhnology' : '';
}

Penggunaan variabel ini memungkinkan penyesuaian aset statis atau routing secara dinamis di komponen React.

• Tambahan SVGR

Webpack dikustomisasi untuk mendukung import SVG sebagai React component:

use: ['@svgr/webpack'];

Dengan ini, file SVG dapat digunakan langsung seperti komponen JSX.

2.4. .env dan .env.production

• Contoh Isi

Proyek ini menyertakan file .env.production dengan isi:

BASE_PATH=/kawruhnology

Variabel ini digunakan oleh next.config.js untuk menentukan basePath.

• Kapan Digunakan

File .env.production digunakan saat proses build atau deploy di lingkungan produksi (GitHub Pages). Pastikan environment variable NODE_ENV=production disetel saat menjalankan:

npm run build

• Tips Membuat .env.example

Agar kolaborator atau pengguna lain dapat mengetahui konfigurasi yang dibutuhkan, disarankan untuk membuat file .env.example dengan isi sebagai berikut:

# Base path untuk GitHub Pages
BASE_PATH=/kawruhnology

# Giscus konfigurasi komentar
NEXT_PUBLIC_GISCUS_REPO=
NEXT_PUBLIC_GISCUS_REPOSITORY_ID=
NEXT_PUBLIC_GISCUS_CATEGORY=
NEXT_PUBLIC_GISCUS_CATEGORY_ID=

# Umami Analytics (opsional)
NEXT_UMAMI_ID=

File ini sebaiknya dikomit ke dalam repositori, namun file .env dan .env.production tetap diabaikan melalui .gitignore.

Konfigurasi pada tahap ini bersifat krusial, karena kesalahan kecil seperti basePath yang tidak sesuai, struktur konten yang tidak dikenali Contentlayer, atau metadata yang tidak lengkap dapat menyebabkan halaman tidak dapat dibuka dengan benar.

3. 🎨 Styling dan Tema

Styling pada proyek kawruhnology dikonfigurasi menggunakan Tailwind CSS, yang merupakan utility-first CSS framework yang dirancang untuk pengembangan antarmuka yang efisien dan konsisten. Selain itu, proyek ini juga menggunakan PostCSS sebagai CSS processor untuk kompatibilitas lintas browser.

3.1. tailwind.config.ts

File tailwind.config.ts berisi konfigurasi utama Tailwind CSS dalam proyek kawruhnology. Konfigurasi ini memuat berbagai pengaturan untuk mendukung styling yang fleksibel dan konsisten, serta optimal untuk konten blog berbasis Markdown.

• 📁 Pengaturan content

content: [
  './node_modules/pliny/**/*.js',
  './app/**/*.{js,ts,jsx,tsx}',
  './pages/**/*.{js,ts,tsx}',
  './components/**/*.{js,ts,tsx}',
  './layouts/**/*.{js,ts,tsx}',
  './data/**/*.mdx',
],

Pengaturan ini menentukan lokasi file yang akan dipindai Tailwind untuk mendeteksi class yang digunakan. Seluruh struktur proyek, termasuk App Router (/app), komponen, layout, dan file MDX, telah dicakup secara komprehensif.

Catatan: Folder content/ tidak disebutkan secara eksplisit, namun karena MDX diproses melalui Contentlayer, ini tidak menjadi kendala selama outputnya masuk ke komponen React yang terdeteksi dalam jalur content.

• 🛡️ safelist

safelist: ['border-primary-500', 'bg-primary-500', 'text-primary-500'],

Kelas-kelas yang didefinisikan dalam safelist akan tetap disertakan dalam hasil build, meskipun tidak ditemukan secara eksplisit dalam source code. Ini penting untuk mendukung penggunaan class Tailwind yang bersifat dinamis atau berdasarkan kondisi runtime.

• 🌙 darkMode

darkMode: 'class',

Mode gelap diaktifkan melalui class dark pada elemen HTML. Ini memberikan fleksibilitas untuk pengguna atau sistem dalam mengatur tema terang/gelap secara manual maupun otomatis (misalnya menggunakan next-themes).

• 🎨 Customisasi theme

Blok extend dalam theme digunakan untuk memperluas konfigurasi default Tailwind. Berikut beberapa penyesuaian yang dilakukan:

• 📏 lineHeight

lineHeight: {
  11: '2.75rem',
  12: '3rem',
  13: '3.25rem',
  14: '3.5rem',
}

Menambahkan pilihan line height tambahan untuk kontrol layout yang lebih presisi, khususnya pada heading atau paragraf dalam konten blog.

• 🔤 fontFamily

fontFamily: {
  sans: ['var(--font-space-grotesk)', ...fontFamily.sans],
}

Mengatur font utama (sans-serif) menggunakan variabel CSS --font-space-grotesk, yang memungkinkan integrasi dengan font custom yang di-load secara global.

• 🎨 colors

colors: {
  primary: colors.pink,
  gray: colors.gray,
}

Mendefinisikan warna primary dan gray secara eksplisit menggunakan warna dari tailwindcss/colors. Warna primary digunakan secara luas di link, tombol, dan elemen interaktif lain dalam blog.

• ✍️ Konfigurasi typography (Plugin @tailwindcss/typography)

Konfigurasi ini memungkinkan kontrol penuh terhadap tampilan konten yang menggunakan class prose, seperti artikel MDX. Konfigurasi dibagi menjadi dua mode:

• DEFAULT (Light Mode)

• Maksimal lebar konten: 85ch
• Warna link: primary.500 dengan efek hover
• Heading (h1, h2, h3): font tebal dan spasi khusus
• Paragraph dan list: margin vertikal yang konsisten
• Inline code: warna indigo.500

• invert (Dark Mode)

• Warna teks diubah menjadi abu terang (gray.100, gray.300)
• Link tetap menggunakan warna primary
• Heading dan paragraf diberi margin serupa mode terang

Konfigurasi ini memastikan konten blog tetap mudah dibaca dan konsisten dalam kedua mode tema.

• 🧩 Plugin Tambahan

plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],

• @tailwindcss/forms: Menyediakan style dasar yang konsisten untuk elemen form (input, select, textarea).
• @tailwindcss/typography: Digunakan untuk styling otomatis pada konten prose, seperti yang digunakan di artikel MDX.

3.2. postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Konfigurasi PostCSS digunakan untuk memproses CSS akhir sebelum dikirim ke browser. Dalam proyek kawruhnology, hanya dua plugin yang digunakan:

• tailwindcss: Mengubah class menjadi CSS nyata sesuai konfigurasi Tailwind.
• autoprefixer: Menambahkan vendor prefix CSS untuk memastikan kompatibilitas lintas browser modern.

Konfigurasi ini bersifat standar dan sudah mencukupi untuk mayoritas kebutuhan produksi tanpa tambahan plugin tambahan.

Kesimpulan

Konfigurasi styling dalam proyek kawruhnology telah dirancang untuk:

• Mendukung tema terang dan gelap
• Menyediakan styling yang rapi untuk konten Markdown
• Mendukung desain konsisten melalui utility class
• Memungkinkan penggunaan font dan warna kustom dengan mudah

Dengan pendekatan berbasis Tailwind CSS yang terstruktur, proyek ini memberikan fleksibilitas tinggi bagi pengembang untuk menyesuaikan tampilan blog tanpa harus menulis CSS dari awal.

4. 🧠 TypeScript Konfigurasi

Proyek kawruhnology ditulis menggunakan TypeScript untuk mendapatkan manfaat validasi tipe, pengembangan yang lebih aman, serta dokumentasi otomatis dari struktur data. File tsconfig.json merupakan pusat konfigurasi TypeScript, yang mengatur bagaimana kode dikompilasi, tipe ditangani, serta bagaimana modul dan path di-resolve.

4.1. tsconfig.json

Berikut ini adalah pembahasan konfigurasi tsconfig.json yang digunakan pada proyek ini.

• 🎯 Target Kompilasi dan Lingkungan

"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"module": "esnext",
"moduleResolution": "node",
"jsx": "preserve",

• target: es5 Menentukan versi JavaScript hasil kompilasi. es5 memberikan kompatibilitas maksimal, tetapi tidak lagi relevan untuk mayoritas browser modern.

  • ✅ Rekomendasi: Ganti menjadi es2020 untuk dukungan fitur modern dan build yang lebih optimal.

• lib Menentukan environment yang didukung, termasuk DOM dan fitur ES terbaru.

• module dan moduleResolution Disetel ke esnext dan node, sesuai dengan kebutuhan modul ES dan kompatibilitas Next.js.

• jsx: preserve Mempertahankan sintaks JSX agar dapat ditangani oleh Next.js saat build, bukan oleh TypeScript.

• ✅ Pengaturan Tipe & Validasi

"strict": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"isolatedModules": true,
"incremental": true,

• strict: true Mengaktifkan semua aturan ketat TypeScript untuk keamanan tipe maksimal.

• skipLibCheck: true Menghindari pemeriksaan terhadap file .d.ts eksternal untuk mempercepat build.

• forceConsistentCasingInFileNames Mencegah kesalahan path akibat perbedaan huruf kapital (terutama di sistem file case-sensitive).

• noEmit: true Tidak menghasilkan output .js, karena proyek ini menggunakan Next.js untuk build.

• esModuleInterop, resolveJsonModule, isolatedModules Mengaktifkan interoperabilitas dengan modul CommonJS, mendukung import JSON, serta menjaga kompatibilitas dengan Next.js.

• incremental Memungkinkan build yang lebih cepat dengan menyimpan cache hasil kompilasi sebelumnya.

• 📁 Dukungan Path Alias

"baseUrl": ".",
"paths": {
  "@/*": ["./*"],
  "@/components/*": ["components/*"],
  "@/data/*": ["data/*"],
  "@/layouts/*": ["layouts/*"],
  "@/css/*": ["css/*"],
  "contentlayer/generated": ["./.contentlayer/generated"]
}

Konfigurasi ini memungkinkan penggunaan import alias yang lebih rapi dan mudah dipelihara. Contoh:

import Layout from '@/layouts/BaseLayout';

Daripada menggunakan import relatif seperti:

import Layout from '../../../layouts/BaseLayout';

Alias juga memudahkan integrasi dengan Contentlayer, seperti:

import { allBlogs } from 'contentlayer/generated';

Pastikan VSCode atau editor lain mendukung path alias sesuai tsconfig.json.

• 📥 include dan exclude

"include": [
  "next-env.d.ts",
  "**/*.ts",
  "**/*.tsx",
  ".next/types/**/*.ts",
  ".contentlayer/generated",
  "app/layout.tsx",
  "app/layout.tsx-min",
  "app/layout-new.tsx"
],
"exclude": ["node_modules"]

• include:

  • Memastikan semua file .ts dan .tsx termasuk saat kompilasi.
  • Menyertakan file dari .next dan .contentlayer/generated agar TypeScript mengenali output runtime dan content.
  • File app/layout.tsx-min dan layout-new.tsx kemungkinan digunakan sebagai varian layout (opsional, tergantung pengembangan aktif).

• exclude:

  • Mengecualikan node_modules, sesuai praktik standar.

✅ Rekomendasi Perbaikan

• Kesimpulan

Konfigurasi tsconfig.json dalam proyek kawruhnology telah disusun dengan baik dan mencakup:

• Kompatibilitas penuh dengan Next.js App Router
• Integrasi dengan Contentlayer
• Penggunaan alias path untuk pengembangan yang lebih terstruktur
• Mode strict TypeScript untuk kualitas kode lebih baik

Satu-satunya penyesuaian yang disarankan adalah mengubah target kompilasi dari es5 ke es2020, mengingat proyek ini tidak ditujukan untuk browser lama dan sudah menggunakan fitur-fitur modern JavaScript.

5. ✅ Linting & Formatting

Untuk menjaga konsistensi, kualitas kode, dan menghindari kesalahan umum dalam pengembangan proyek, kawruhnology dilengkapi dengan sistem linting dan formatting berbasis ESLint dan Prettier, termasuk integrasi dengan husky dan lint-staged untuk validasi otomatis sebelum commit.

5.1. .eslintrc.js

File .eslintrc.js merupakan konfigurasi linting utama yang mengatur bagaimana ESLint menganalisis kode dalam proyek. Konfigurasi ini mencakup dukungan untuk TypeScript, JSX Accessibility (a11y), serta pengaturan khusus untuk Next.js.

• 📄 Struktur Konfigurasi

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  env: {
    browser: true,
    amd: true,
    node: true,
    es6: true,
  },
  parserOptions: {
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'jsx-a11y'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:jsx-a11y/recommended',
    'next',
    'next/core-web-vitals',
  ],
  rules: {
    ...
  },
};

• 🔍 Penjelasan Komponen Utama

• @typescript-eslint/parser: Memungkinkan ESLint memahami sintaks TypeScript.
• jsx-a11y: Menyediakan rule untuk meningkatkan aksesibilitas elemen JSX/HTML.
• next/core-web-vitals: Menambahkan rekomendasi performa dari tim Next.js.

• ⚙️ Penyesuaian rules

Beberapa rule telah disesuaikan sesuai kebutuhan pengembangan:

Konfigurasi ini memberikan keseimbangan antara kualitas kode dan kemudahan pengembangan, tanpa terlalu membatasi saat proses eksplorasi atau iterasi awal.

5.2. .eslintignore

File .eslintignore menentukan direktori atau file yang diabaikan oleh proses linting.

• Isi Saat Ini:

node_modules
.eslintrc.js

• Evaluasi:

• ✅ node_modules memang seharusnya diabaikan.
• ⚠️ .eslintrc.js tidak perlu di-ignore, kecuali memang disengaja.

• 💡 Rekomendasi:

Disarankan untuk menambahkan folder hasil build agar tidak ikut dianalisis:

node_modules
.next
out

5.3. Bonus: Lint, Format, dan Git Hooks

Proyek ini dilengkapi dengan berbagai alat bantu otomatisasi dalam package.json untuk mendukung linting dan formatting secara efisien.

• 🧾 Script Terkait

"scripts": {
  "lint": "next lint --fix --dir pages --dir app --dir components --dir lib --dir layouts --dir scripts --dir data",
  "lintAll": "next lint --fix --dir .",
  "format": "prettier --write ."
}

• lint: Menjalankan ESLint dengan auto-fix pada folder tertentu.
• lintAll: Menjalankan ESLint pada seluruh direktori.
• format: Menjalankan Prettier untuk seluruh file.

• ✅ Integrasi husky dan lint-staged

Proyek ini juga menggunakan husky dan lint-staged untuk linting otomatis sebelum commit.

• Konfigurasi lint-staged:

"lint-staged": {
  "*.+(js|jsx|ts|tsx)": [
    "eslint --fix"
  ],
  "*.+(js|jsx|ts|tsx|json|css|md|mdx)": [
    "prettier --write"
  ]
}

• File JavaScript/TypeScript akan diperbaiki otomatis oleh ESLint.
• File yang umum digunakan (.json, .md, .css, .mdx) akan diformat dengan Prettier.

• Penggunaan:

husky akan menjalankan lint-staged sebelum proses commit berlangsung. Ini memastikan bahwa hanya kode yang sudah lolos linting dan diformat dengan benar yang akan tersimpan di repositori.

• Kesimpulan

Sistem linting dan formatting pada proyek kawruhnology telah dikonfigurasi secara menyeluruh untuk:

• Menjaga kualitas dan konsistensi kode
• Memberikan fleksibilitas selama proses pengembangan
• Mengintegrasikan linting secara otomatis dalam alur kerja Git

Konfigurasi ini meminimalkan kesalahan umum dan menjaga standar kode agar tetap terjaga dalam kolaborasi tim maupun proyek pribadi.

6. 🚀 Build & Deploy

Proyek kawruhnology dikonfigurasi untuk menghasilkan situs statis menggunakan fitur export dari Next.js. Proses ini memungkinkan deployment ke GitHub Pages tanpa memerlukan server khusus. Langkah-langkah pada bagian ini mencakup build untuk produksi, serta proses deploy ke GitHub Pages.

6.1. 🔨 Build untuk Produksi

• Perintah:

next build && next export

• next build: Melakukan proses kompilasi dan optimasi untuk produksi.
• next export: Mengekspor proyek ke dalam format statis (static HTML) ke direktori out/.

Proyek ini telah dikonfigurasi dengan output: 'export' dalam file next.config.js, yang memungkinkan penggunaan next export tanpa konfigurasi tambahan.

📁 Hasil dari proses ini berada di dalam folder /out, yang akan menjadi sumber utama untuk proses deploy ke GitHub Pages.

• 📌 Catatan:

Pada file package.json, script build saat ini hanya berisi:

"build": "next build"

Untuk memastikan proses export berjalan otomatis, sebaiknya diubah menjadi:

"build": "next build && next export"

6.2. 🌐 Deploy ke GitHub Pages

Proyek ini menggunakan paket gh-pages untuk melakukan deploy folder out/ ke branch gh-pages di repositori GitHub.

• a. 📦 Instal gh-pages

Jika belum terpasang, jalankan:

npm install gh-pages --save-dev

Pada package.json Anda, gh-pages sudah termasuk di dalam devDependencies:

"gh-pages": "^6.3.0"

✅ Tidak perlu instal ulang jika sudah ada.

• b. 📝 Tambahkan Script deploy

Tambahkan script berikut ke dalam bagian scripts di package.json:

"deploy": "npm run build && gh-pages -d out"

Script ini akan:

1. Melakukan build dan export proyek ke direktori out.
2. Menggunakan gh-pages untuk mendorong isi out/ ke branch gh-pages.

• c. ⚙️ Konfigurasi next.config.js

Pastikan file next.config.js telah disesuaikan agar routing dan asset bekerja dengan benar saat di-hosting melalui GitHub Pages.

• Konfigurasi yang digunakan:

const isProd = process.env.NODE_ENV === 'production';

const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
  basePath: isProd ? '/kawruhnology' : '',
  env: {
    BASE_PATH: isProd ? '/kawruhnology' : '',
  },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

module.exports = withContentlayer(nextConfig);

• Keterangan:

• output: 'export': Wajib untuk menghasilkan situs statis.
• trailingSlash: true: Membuat URL konsisten di GitHub Pages (/about/ bukan /about).
• basePath: Menentukan prefix routing sesuai nama repositori (/kawruhnology).
• images.unoptimized: Mencegah error karena next/image tidak mendukung mode static export.

Pastikan nama repositori di GitHub sesuai dengan nilai basePath.

• d. ⚙️ Setup GitHub Pages

Setelah deploy berhasil, lakukan konfigurasi di GitHub:

1. Buka repositori di GitHub.

2. Masuk ke tab Settings → Pages.

3. Pilih:

   • Source: gh-pages branch
   • Folder: / (root)

4. Klik Save.

Setelah beberapa menit, situs akan tersedia di:

https://<username>.github.io/<nama-repositori>/

Contoh untuk repositori ini:

https://slametsampon.github.io/kawruhnology/

• e. (Opsional) Tambahkan .nojekyll

Untuk mencegah GitHub Pages mengabaikan folder yang diawali _, tambahkan perintah berikut dalam script post-export:

"postexport": "echo > out/.nojekyll"

Atau jalankan secara manual:

touch out/.nojekyll

✅ Rangkuman Proses Deploy

• Kesimpulan

Proyek kawruhnology telah dikonfigurasi secara optimal untuk proses export dan deploy ke GitHub Pages. Dengan sedikit penyesuaian pada script dan konfigurasi next.config.js, proses deploy dapat dilakukan secara otomatis dan konsisten.