Belajar Next.js App Router #1: Pengenalan & Instalasi Next.js

• Apa Itu Next.js App Router?
• Langkah 1 - Intallasi Node.js
• Langkah 2 -Membuat Project Next.js dengan App Router
• Langkah 3 - Menjalankan Project Next.js
• Struktur Folder Awal
• Kesimpulan

Halo teman-teman semuanya. Pada seri tutorial ini, kita akan belajar Next.js App Router dari dasar hingga siap digunakan untuk membangun aplikasi web modern.

Next.js adalah framework React yang sangat populer karena mendukung server-side rendering, static site generation, dan performa yang optimal. Sejak Next.js versi 13, diperkenalkan pendekatan baru bernama App Router yang membawa perubahan besar pada cara kita membangun aplikasi.

Pada artikel pertama ini, kita akan membahas pengenalan singkat tentang App Router serta langkah-langkah menginstall dan menjalankan project Next.js menggunakan App Router.

Apa Itu Next.js App Router?

Next.js App Router adalah sistem routing terbaru yang menggunakan folder app/ sebagai pusat struktur aplikasi. Pendekatan ini menggantikan sistem lama berbasis folder pages/.

App Router dirancang agar aplikasi lebih terstruktur, mudah dikembangkan, dan secara default sudah mengadopsi konsep Server Components. Dengan pendekatan ini, proses rendering menjadi lebih efisien dan aplikasi lebih siap untuk kebutuhan skala besar.

Langkah 1 - Intallasi Node.js

Sebelum menginstall Next.js, pastikan environment development sudah siap. Hal utama yang perlu diperhatikan adalah versi Node.js.

Next.js membutuhkan Node.js versi 18 atau lebih baru. Kita bisa mengecek versi Node.js dengan perintah berikut:

node -v

Jika Node.js belum terinstall atau versinya masih lama, silakan install terlebih dahulu melalui situs resmi Node.js.

Unduh Node.js: https://nodejs.org/en/download/

Langkah 2 -Membuat Project Next.js dengan App Router

Untuk membuat project Next.js baru, kita bisa menggunakan perintah create-next-app yang sudah disediakan secara resmi oleh Next.js.

Silahkan teman-teman, jalankan perintah berikut di dalam terminal/CMD:

npx create-next-app@16.1.6 belajar-nextjs-app-router

Saat proses instalasi, akan muncul beberapa pertanyaan konfigurasi. Kurang lebih seperti berikut ini.

Would you like to use the recommended Next.js defaults?
    Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router, Turbopack
    No, reuse previous settings
    No, customize settings - Choose your own preferences

Silahkan pilih Yes pada opsi default penggunaan App Router. Dengan konfigurasi ini, project akan langsung menggunakan App Router sebagai sistem routing utama.

Langkah 3 - Menjalankan Project Next.js

Setelah proses instalasi selesai, masuk ke direktori project:

cd belajar-nextjs-app-router

Kemudian jalankan server development dengan perintah:

npm run dev

Secara default, aplikasi akan berjalan di alamat http://localhost:3000. Jika halaman utama Next.js tampil, berarti instalasi berhasil.

Struktur Folder Awal

Setelah project berhasil dibuat, kamu akan menemukan struktur folder utama seperti berikut:

src/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── public/

Folder app/ merupakan inti dari App Router. File page.tsx digunakan sebagai halaman, sedangkan layout.tsx berfungsi sebagai layout global yang akan membungkus seluruh halaman di dalamnya. Struktur ini akan menjadi dasar untuk semua routing dan layout pada aplikasi Next.js berbasis App Router.

Kesimpulan

Pada artikel ini, kita telah mengenal konsep dasar Next.js App Router, memahami perbedaannya dengan pendekatan lama, serta mempelajari cara menginstall dan menjalankan project Next.js menggunakan App Router. Selain itu, kita juga telah melihat struktur folder awal untuk Next.js App Router.

Pada artikel selanjutnya, kita akan membahas lebih dalam tentang struktur folder app/ dan konsep file-based routing pada Next.js App Router.

Terima Kasih