Pertama Kali Mencoba Next.js

Sebagai seorang developer yang terbiasa dengan JavaScript dan framework seperti React, mencoba Next.js untuk pertama kalinya adalah pengalaman yang cukup menarik. Framework ini sering disebut-sebut sebagai salah satu solusi terbaik untuk membangun aplikasi web modern, terutama karena performanya yang cepat, dukungan SEO, dan kemudahan pengembangan.

Mengapa Tertarik Mencoba Next.js?

Sebelumnya, saya sudah cukup nyaman dengan React. Namun, ada beberapa hal yang kadang terasa kurang praktis, misalnya pengaturan routing manual atau optimasi SEO. Nah, dari berbagai artikel dan diskusi developer, Next.js menawarkan hal-hal yang cukup menggoda:

File-based routing: Cukup buat file page.ts di folder app, otomatis jadi route.
Server-side rendering (SSR) & Static site generation (SSG): Bisa pilih sesuai kebutuhan.
Image Optimization: Ada next/image untuk optimasi gambar otomatis.
Built-in API Routes: Bisa bikin endpoint backend langsung di dalam project.

Hal-hal ini membuat saya penasaran untuk mencobanya.

Memulai Project Pertama

Proses instalasi ternyata sederhana. Hanya dengan menjalankan perintah:

npx create-next-app@latest

npx create-next-app@latest

Akan ada pertanyaan-pertanyaan terkait project seperti ini.

Need to install the following packages:
create-next-app@15.4.6
Ok to proceed? (y)

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes

Need to install the following packages:
create-next-app@15.4.6
Ok to proceed? (y)

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes

Setelah itu, project langsung siap digunakan tanpa konfigurasi ribet. Saat pertama kali menjalankan npm run dev, saya langsung disambut dengan halaman default Next.js yang clean dan modern.

Kesan Saat Membuat Halaman Pertama

Membuat halaman baru cukup mudah: tinggal tambahkan file page.ts di folder app/about, lalu isi dengan komponen React. Secara otomatis, halaman bisa diakses di /about. Tidak perlu setup tambahan seperti react-router.

Contoh sederhana:

export default function About() {
  return <h1>Ini adalah halaman About</h1>
}

export default function About() {
  return <h1>Ini adalah halaman About</h1>
}

Langsung bisa diakses di http://localhost:3000/about. Simpel dan menyenangkan!

Fitur yang Paling Berkesan

Yang paling saya suka dari percobaan pertama ini adalah:

Routing tanpa ribet – tidak perlu import dan konfigurasi router manual.
SSR & SSG – data bisa diambil langsung saat build atau saat request, bikin lebih fleksibel.
Image optimization – cukup pakai next/image, gambar jadi lebih ringan otomatis.

Kesimpulan

Pengalaman pertama mencoba Next.js cukup menyenangkan. Framework ini terasa sebagai React yang diupgrade, dengan banyak fitur bawaan yang mempermudah pengembangan aplikasi web modern. Bagi developer yang sudah terbiasa dengan React, transisi ke Next.js tidak terlalu sulit dan justru terasa seperti upgrade.

Bercharisma