Setup Awal Next JS

Silakan ikuti langkah-langkah berikut untuk menginstal NextJS dan mengatur proyek Anda:

Table Of Content

Next: Setup Awal Shadcn UI

Prev: Persiapan Tools dan Software

Kita akan membuat dua proyek, satu untuk Job Portal, satu lagi untuk dashboard admin. Kita akan menggunakan NextJS untuk membuat kedua proyek tersebut.

• Buka terminal atau command prompt dan buat folder baru untuk proyek Anda.

• Masuk ke folder yang baru dibuat dan jalankan perintah berikut untuk menginisialisasi proyek NextJS:

npx create-next-app@latest

Perintah di atas akan membuat kita menginstall NextJS versi terbaru, untuk menginstall versi tertentu, kita bisa menggunakan perintah npx create-next-app@latest atau npx create-next-app@10.2.3 untuk menginstall versi 10.2.3.

• Setelah anda menjalankan perintah di atas, anda akan diminta untuk menjawab beberapa pertanyaan, berikut ini adalah contoh jawaban yang bisa anda berikan:

Menentukan Nama Proyek.

silakan input nama proyek anda, sebagai contoh saya akan menggunakan nama job-portal:

What is your project named? job-portal

Menentukan apakah kita akan menggunakan TypeScript.

Kita akan menggunakan TypeScript, silakan input Yes, Gerakan kursor ke pilihan Yes dan tekan enter:

Would you like to use TypeScript? Yes

Menentukan apakah kita akan menggunakan ESLint.

Kita akan menggunakan ESLint, silakan input Yes, Gerakan kursor ke pilihan Yes dan tekan enter:

Would you like to use ESLint? Yes

Menentukan apakah kita akan menggunakan Tailwind CSS.

Kita akan menggunakan Tailwind CSS, silakan input Yes, Gerakan kursor ke pilihan Yes dan tekan enter:

Would you like to use Tailwind CSS? Yes

Menentukan apakah kita akan menggunakan src/ directory.

Kita akan menggunakan src/ directory, silakan input Yes, Gerakan kursor ke pilihan Yes dan tekan enter:

Would you like to use `src/` directory? Yes

Menentukan apakah kita akan menggunakan App Router.

Kita akan menggunakan App Router, silakan input Yes, Gerakan kursor ke pilihan Yes dan tekan enter:

Would you like to use App Router? (recommended) Yes

Menentukan apakah kita akan menggunakan custom import alias (@/*).

Kita akan menggunakan custom import alias (@/*), silakan input Yes, Gerakan kursor ke pilihan Yes dan tekan enter:

Would you like to customize the default import alias (@/*)? Yes

Menentukan import alias yang akan kita gunakan.

Kita akan menggunakan import alias @/*, silakan input @/*, Gerakan kursor ke pilihan @/* dan tekan enter:

What import alias would you like configured? @/*

Lakukan langkah yang sama dengan diatas untuk membuat proyek dashboard admin, berikut ini adalah contoh jawaban yang bisa anda berikan:

What is your project named? job-portal-dashboard
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? Yes
What import alias would you like configured? @/*

Setelah kita membuat proyek, kita akan menjalankan proyek tersebut, berikut ini adalah langkah-langkahnya:

• Masuk ke folder proyek yang baru saja kita buat, berikut ini adalah contoh langkahnya:

cd job-portal-dashboard

• Lalu anda bisa membuka proyek anda menggunakan editor favorit anda, sebagai contoh saya akan menggunakan VSCode:

code .

Agar tidak bertabrakan port nya, Kita akan mengatur port untuk proyek kita sebagai berikut:

• Admin Dashboard : 3088
• Job Portal : 3089

Untuk merubahnya, anda bisa membuka file package.json pada direktori proyek anda, lalu ubah script dev nya menjadi seperti berikut ini:

 "scripts": {
    "dev": "PORT=3088 next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

• Jalankan perintah berikut untuk menjalankan proyek:

npm run dev

• Buka browser dan buka alamat http://localhost:3088, jika anda melihat tampilan seperti berikut ini, maka proyek anda sudah berhasil dijalankan:

Table Of Content

Next: Struktur Folder

Prev: Persiapan Tools dan Software