Setelah Node.js dan NPM berhasil kita persiapkan, selanjutnya kita membutuhkan sebuah code editor. Code editor merupakan aplikasi yang digunakan untuk menulis, mengedit, dan mengelola kode program selama proses pengembangan website.

Ada banyak pilihan code editor yang bisa kalian gunakan. Jadi, kalian tidak harus menggunakan aplikasi yang sama dengan yang saya gunakan. Silakan pilih sesuai kebutuhan dan kenyamanan masing-masing.

Rekomendasi Code Editor

Berikut beberapa code editor yang bisa kalian gunakan untuk mengikuti tutorial ini:

1. Visual Studio Code (VS Code)

VS Code merupakan salah satu code editor yang cukup populer di kalangan developer. Aplikasi ini ringan, memiliki banyak ekstensi, dan mendukung berbagai bahasa pemrograman.

Website: https://code.visualstudio.com/

2. Cursor AI

Cursor merupakan code editor berbasis VS Code yang dilengkapi dengan fitur AI. Kita bisa memanfaatkan AI untuk membantu menulis kode, memahami struktur project, mencari kesalahan, hingga melakukan perubahan kode berdasarkan instruksi yang diberikan.

Pada tutorial ini, saya sendiri akan menggunakan Cursor AI sebagai code editor utama.

Website: https://cursor.com/

3. Windsurf

Windsurf merupakan code editor yang juga mengintegrasikan fitur AI untuk membantu proses pengembangan aplikasi. Salah satu keunggulannya adalah kemampuan AI dalam memahami konteks project dan membantu mengerjakan beberapa tugas pengembangan.

Website: https://windsurf.com/

Code Editor Mana yang Sebaiknya Digunakan?

Sebenarnya, kalian bebas memilih salah satu dari ketiga code editor di atas. Karena kita akan menggunakan Next.js, semuanya sudah cukup untuk mengikuti tutorial ini.

Namun, jika kalian masih pemula dan belum pernah menggunakan code editor sebelumnya, saya menyarankan Visual Studio Code atau Cursor AI.

Untuk mengikuti tutorial ini, saya akan menggunakan Cursor AI. Jadi, beberapa tampilan dan menu yang kalian lihat pada screenshot mungkin sedikit berbeda jika menggunakan code editor lainnya.

Instalasi Code Editor

Silakan unduh code editor yang ingin kalian gunakan melalui website resminya masing-masing.

Setelah proses download selesai, jalankan installer dan ikuti petunjuk instalasi sampai selesai.

Jika sudah berhasil terpasang, buka code editor tersebut. Untuk sementara, kita belum perlu melakukan konfigurasi tambahan karena nantinya kita akan langsung menggunakannya ketika membuat project Next.js.

Selanjutnya, kita akan mulai membuat project Next.js pertama dan mengenal struktur folder yang dihasilkan oleh Next.js.