Cara membuat website dengan Next.js, Di dunia pengembangan web yang bergerak cepat, memilih framework yang tepat itu krusial.
Jika kamu ingin membangun website yang cepat, punya performa tinggi, dan scalable, Next.js adalah salah satu pilihan terbaik.
Next.js adalah framework React yang powerful, dirancang khusus untuk menciptakan aplikasi web modern dengan kemudahan server-side rendering (SSR), static site generation (SSG), dan banyak fitur canggih lainnya.
Bagi para pengembang, atau bahkan kamu yang baru ingin terjun ke dunia web development, Next.js menawarkan pengalaman pengembangan yang menyenangkan dan efisien.
Ia mengurangi banyak boilerplate (code yang berulang) yang sering ditemukan di React murni, dan menyediakan struktur yang jelas untuk proyekmu. Jadi, mari kita pelajari cara membuat website dengan Next.js dari nol!
Simak Juga : Sertifikasi Web Developer
Persiapan Awal Sebelum Mulai Ngoding Next.js
Sebelum kita masuk ke bagian teknis cara membuat website dengan Next.js, ada beberapa hal yang perlu kamu siapkan di komputermu:
1. Instalasi Node.js dan npm/Yarn
Next.js dibangun di atas Node.js, jadi kamu perlu menginstalnya terlebih dahulu. Node.js juga sudah termasuk npm (Node Package Manager). Atau, kamu bisa menggunakan Yarn sebagai alternatif. Pastikan versinya cukup baru (disarankan versi LTS).
- Node.js: Kunjungi nodejs.org dan unduh versi LTS.
- npm/Yarn: Biasanya terinstal otomatis dengan Node.js (untuk npm). Jika ingin Yarn, kamu bisa instal dengan npm install -g yarn.
2. Pahami Dasar-dasar React.js (Opsional tapi Direkomendasikan)
Meskipun kamu bisa belajar Next.js tanpa menguasai React sepenuhnya, memiliki pemahaman dasar tentang komponen React, props, state, dan JSX akan sangat membantu. Next.js adalah framework di atas React, jadi konsep-konsepnya saling berkaitan.
1. Inisialisasi Proyek Next.js Baru
Langkah pertama dalam cara membuat website dengan Next.js adalah membuat boilerplate proyek baru. Next.js menyediakan tool yang sangat mudah untuk ini: create-next-app.
1. Buka Terminal/Command Prompt
Arahkan ke direktori di mana kamu ingin menyimpan proyekmu.
2. Jalankan Perintah create-next-app
Ketikkan perintah berikut:
Bash
npx create-next-app@latest nama-proyek-kamu# atau jika menggunakan yarn# yarn create next-app nama-proyek-kamu
Ganti nama-proyek-kamu dengan nama yang kamu inginkan (misalnya, my-nextjs-website).
Selama proses instalasi, kamu akan ditanyai beberapa konfigurasi. Biasanya, pilihan default sudah cukup bagus untuk pemula:
- Would you like to use TypeScript? (yes/no)
- Would you like to use ESLint? (yes/no)
- Would you like to use Tailwind CSS? (yes/no)
- Would you like to use src/ directory? (yes/no)
- Would you like to use App Router (recommended)? (yes/no)
- Would you like to customize the default import alias? (yes/no)
Disarankan memilih yes untuk App Router karena ini adalah pendekatan terbaru dari Next.js.
3. Masuk ke Direktori Proyek
Setelah instalasi selesai, masuk ke direktori proyek yang baru dibuat:
Bash
cd nama-proyek-kamu
4. Jalankan Server Pengembangan
Untuk melihat website-mu di browser, jalankan server pengembangan:
Bash
npm run dev# atau jika menggunakan yarn# yarn dev
Biasanya, website akan terbuka di http://localhost:3000. Selamat! Kamu sudah berhasil membuat dan menjalankan website Next.js pertamamu!
2. Memahami Struktur Proyek Next.js (App Router)
Saat kamu membuka folder proyek di code editor (misalnya VS Code), kamu akan melihat struktur yang rapi. Memahami ini penting saat belajar cara membuat website dengan Next.js:
- app/: Ini adalah direktori inti untuk App Router. Semua route dan halaman website-mu akan ada di sini.
- layout.js (atau .tsx): Ini adalah layout utama untuk aplikasi. Kamu bisa mendefinisikan header, footer, sidebar, dan komponen lain yang muncul di setiap halaman di sini.
- page.js (atau .tsx): Ini adalah file yang merepresentasikan sebuah halaman. Misalnya, app/page.js adalah halaman homepage (/). app/about/page.js akan menjadi halaman /about.
- loading.js: File ini akan otomatis ditampilkan saat halaman sedang dalam proses loading.
- error.js: File ini akan otomatis ditampilkan jika terjadi error pada halaman.
- global.css: Untuk styling global website-mu.
- public/: Untuk aset statis seperti gambar, favicon, dan fonts.
- package.json: Berisi informasi proyek dan daftar dependencies (paket yang dibutuhkan).
- next.config.js: File konfigurasi Next.js.
3. Membuat Halaman Baru dan Navigasi
Sekarang, mari kita coba membuat halaman baru dan menghubungkannya:
1. Buat Halaman “About Us”
Di dalam folder app/, buat folder baru bernama about. Di dalam folder about, buat file page.js (atau page.tsx).
JavaScript
// app/about/page.jsexport default function About() {
return (
<div>
<h1>Tentang Kami</h1>
<p>Ini adalah halaman tentang kami. Kami sangat menyukai Next.js!</p>
</div>
);
}
Sekarang, jika kamu mengunjungi http://localhost:3000/about, kamu akan melihat halaman “Tentang Kami” ini.
2. Menambahkan Navigasi dengan <Link>
Next.js menyediakan komponen <Link> untuk navigasi yang efisien tanpa me-refresh seluruh halaman (Client-side Navigation).
Edit app/page.js (halaman homepage):
JavaScript
// app/page.jsimport Link from ‘next/link’; // Import komponen Link
export default function Home() {
return (
<div>
<h1>Selamat Datang di Website Next.js Kami!</h1>
<p>Mulai perjalanan web modernmu di sini.</p>
<nav>
<Link href=”/”>Beranda</Link> | <Link href=”/about”>Tentang Kami</Link>
</nav>
</div>
);
}
Sekarang, kamu bisa menavigasi antar halaman dengan mulus!
4. Menambahkan Styling (CSS) pada Website
Website tanpa styling tentu kurang menarik. Ada beberapa cara untuk menambahkan CSS saat belajar cara membuat website dengan Next.js:
1. Global CSS (app/global.css)
Untuk styling yang berlaku di seluruh aplikasi. Kamu bisa menambahkan aturan CSS di app/global.css.
2. CSS Modules (Direkomendasikan)
Ini adalah cara terbaik untuk mencegah konflik styling antar komponen.
- Buat file CSS dengan ekstensi .module.css, misalnya nama-komponen.module.css.
- Import ke dalam komponenmu.
Contoh:
Buat file app/home.module.css:
CSS
/* app/home.module.css */.title {
color: blue;
font-size: 3em;
}
.description {
color: #333;
}
Lalu gunakan di app/page.js:
JavaScript
// app/page.jsimport Link from ‘next/link’;import styles from ‘./home.module.css’; // Import CSS Module
export default function Home() {
return (
<div>
<h1 className={styles.title}>Selamat Datang di Website Next.js Kami!</h1>
<p className={styles.description}>Mulai perjalanan web modernmu di sini.</p>
<nav>
<Link href=”/”>Beranda</Link> | <Link href=”/about”>Tentang Kami</Link>
</nav>
</div>
);
}
Perhatikan penggunaan className={styles.title}. Ini akan menghasilkan nama kelas CSS unik secara otomatis.
5. Deployment Meluncurkan Website mu ke Dunia!
Setelah website-mu jadi, saatnya menampilkannya ke publik! Next.js memiliki dukungan deployment yang sangat mudah, terutama ke Vercel (tim di balik Next.js).
1. Build Proyekmu
Jalankan perintah ini untuk membuat build produksi website-mu:
Bash
npm run build# atau jika menggunakan yarn# yarn build
Ini akan membuat folder .next/ yang berisi semua file optimized untuk deployment.
2. Deploy ke Vercel (Paling Mudah)
- Pastikan kamu sudah menginstal Vercel CLI: npm install -g vercel.
- Dari direktori proyekmu, jalankan perintah: vercel.
- Ikuti instruksi di terminal (login, tautkan ke proyek Git, dll.).
- Vercel akan otomatis mendeteksi proyek Next.js-mu dan men-deploy-nya. Kamu akan mendapatkan URL publik untuk website-mu!
Kesimpulan
Selamat! Kamu sudah mempelajari cara membuat website dengan Next.js dari nol hingga deployment. Next.js adalah framework yang powerful dan akan sangat membantu kamu membangun aplikasi web modern dengan performa dan developer experience yang luar biasa. Ingat, ini hanyalah permulaan. Teruslah bereksperimen dengan fitur-fitur Next.js lainnya seperti data fetching (SSR, SSG, ISR), API Routes, dan optimasi gambar. Dunia pengembangan web itu luas, dan Next.js adalah alat yang luar biasa untuk menjelajahinya!
Siap untuk membuat website impianmu sendiri dengan Next.js?
Leave a Comment