Setup Next.js

Instalasi

Persyaratan Sistem:

• Node.js 18.17 (opens in a new tab) atau yang lebih baru.
• macOS, Windows (termasuk WSL), dan Linux didukung.

Kami merekomendasikan untuk memulai aplikasi Next.js baru menggunakan create-next-app, yang akan menyiapkan semuanya secara otomatis untuk kamu.

Untuk saat ini kita mempelajari Next.js menggunakan versi canary, untuk cara instalnya jalankan perintah di bawah ini:

npx create-next-app@canary

Pada saat instalasi, kamu akan melihat petunjuk berikut ini:

• Bakal ditanyain nama proyeknya apa? Misal, belajar-nextjs, tekan Enter.
• Untuk sesi ini jangan pake TypeScript, kita pake JavaScript (No), tekan Enter.
• ESLint: code linter: software untuk ngebantu cek apakah cara menulis kode sudah sesuai dengan aturan yang kita set (Yes), tekan Enter.
• Pake Tailwind CSS (Yes), tekan Enter.
• src/ direktori terserah kalian, bebas (?), tekan Enter.
• App Router: fitur baru dari Next.js yang mana sebelumnya namanya pages router (Yes), tekan Enter.
• Turbopack: fitur baru dari Next.js dari versi canary untuk menjalankan project di lokal next dev, (Yes), tekan Enter.
• Import alias ga perlu diganti (No), tekan Enter.
• Click Me! 🎉

- What is your project named? `belajar-nextjs`
- 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 to use `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 default import alias (@/*)? `No` / Yes

Jika proses instalasi sudah selesai, jalankan perintah di bawah:

• Pindah ke direktori proyek belajar-nextjs.

cd belajar-nextjs

• Buka proyek next.js lewat vs code.

code .

• Menjalakan proyek next.js.

npm run dev

Buka browser kamu dan ketikan http://localhost:3000 untuk melihat proyek Next.js kamu.

Referensi: Getting Started - Installation - Next.js (opens in a new tab)

Instal Ekstensi

Instal ekstensi Visual Studio Code ES7+ React/Redux/React-Native snippets dan REST Client, untuk mempermudah kamu dalam menggunakan Next.js dan REST Client pada Next.js.

• ES7+ React/Redux/React-Native snippets (opens in a new tab)

• REST Client (opens in a new tab)

Boilerplate

Untuk boilerplate proyek Next.js, kamu dapat menyalin pada link repositori GitHub sebagai berikut:

JavaScript

(opens in a new tab)

TypeScript

(opens in a new tab)