Setelah semua kebutuhan development berhasil kita persiapkan, sekarang kita akan mulai membuat project Next.js pertama.

Pada tutorial ini, kita akan membuat sebuah website blog sederhana menggunakan Next.js. Untuk tahap awal, kita belum perlu memikirkan desain atau fitur yang terlalu kompleks. Fokus kita adalah membuat project terlebih dahulu dan memastikan semuanya berjalan dengan baik.

Ada beberapa cara untuk membuat project Next.js, tetapi kita akan menggunakan create-next-app karena cara ini merupakan salah satu cara paling mudah untuk memulai project baru.

1. Membuka Terminal

Pertama, buka code editor yang sudah kalian instal sebelumnya. Dalam tutorial ini saya menggunakan Cursor AI. Cukup gunakan Ctr + (`).

2. Membuat Project Next.js

Sekarang kita masuk ke bagian utama, yaitu membuat project Next.js.

Untuk membuat project baru, kita akan menggunakan create-next-app, yaitu tool resmi dari Next.js yang membantu proses pembuatan project sekaligus menyiapkan konfigurasi awal yang dibutuhkan.

Jalankan perintah berikut melalui terminal:

npx create-next-app@latest

Setelah perintah dijalankan, kita akan diminta memasukkan nama project terlebih dahulu.

Sebagai contoh, saya akan menggunakan nama:

tutorial_next_js

Selanjutnya, Next.js akan menampilkan pilihan konfigurasi seperti berikut:

?Would you like to use the recommended Next.js defaults?

Pada bagian ini, kita akan memilih Yes, use recommended defaults.

Pilihan tersebut akan menggunakan konfigurasi rekomendasi dari Next.js, sehingga kita tidak perlu menentukan setiap konfigurasi secara manual.

Berikut beberapa konfigurasi yang akan digunakan:

• TypeScript
• ESLint
• No React Compiler
• Tailwind CSS
• No src/ directory
• App Router
• Cache Components
• AGENTS.md
• Agent feedback

Setelah memilih konfigurasi tersebut, tekan Enter dan tunggu sampai proses pembuatan project selesai.

Next.js akan secara otomatis membuat struktur folder project sekaligus menginstal dependency yang dibutuhkan.

Jika proses instalasi berhasil, kita akan mendapatkan folder baru bernama tutorial_next_js yang berisi seluruh kebutuhan awal project.

Sampai di sini, project Next.js pertama kita sudah berhasil dibuat.

3. Masuk ke Direktori Project

Jika proses instalasi berhasil, kita akan mendapatkan folder baru dengan nama tutorial_next_js.

Selanjutnya, masuk ke direktori project menggunakan perintah:

cd tutorial_next_js

Pastikan terminal sekarang sudah berada di dalam folder project yang baru saja dibuat.

4. Menjalankan Project Next.js

Sekarang kita coba jalankan project tersebut untuk memastikan tidak ada masalah pada proses instalasi.

Gunakan perintah berikut:

npm run dev

Jika berhasil, terminal akan menampilkan informasi bahwa development server sudah berjalan.

Biasanya akan muncul alamat seperti berikut:

▲ Next.js
- Local: http://localhost:3000
- Network: http://192.168.x.x:3000

✓ Ready

Buka browser, kemudian akses alamat:

http://localhost:3000

Jika berhasil, kalian akan melihat halaman awal Next.js.

Selamat! Sampai di sini kita sudah berhasil membuat dan menjalankan project Next.js pertama.

Kesimpulan

Pada tahap ini kita sudah berhasil:

• Membuat project baru menggunakan create-next-app.
• Menentukan konfigurasi awal project.
• Menginstal dependency yang dibutuhkan.
• Menjalankan development server menggunakan npm run dev.
• Mengakses project melalui browser.

Perlu kalian ketahui, selama development server masih berjalan, project bisa diakses melalui localhost:3000. Jika ingin menghentikan server, kalian cukup menekan Ctrl + C pada terminal.

Selanjutnya, kita akan mempelajari struktur folder Next.js agar kalian memahami fungsi masing-masing file dan direktori sebelum mulai membangun tampilan blog.