Skip to content

1. Instalasi NextJS

A. Apa itu NextJS?

Next.js merupakan sebuah framework dari react untuk membuat aplikasi web. Kita bisa membuat user inteface dengan React Component dan Next.js menyediakan struktur tambahan, fitur, dan optimisasi untuk aplikasi react.

Next.js juga mengabstraksi dan secara otomatis mengonfigurasi tools yang dibutukan saat development maupun production, seperti bundling, compiling dan lain-lain. Hal ini memungkinkan kita untuk fokus terhadap bussines process dari apliaksi daripada menghabiskan waktu untuk mengatur tools.

NextJS membantu kita dalam mengembangkan web application secara interakti, dinas, dan cepat.

Sebelum instalasi, ada beberapa System Requirements yang harus dipenuhi.

  • Node.js 16.8 or later.
  • macOS, Windows (including WSL), and Linux are supported.

Kita akan melakukan instalasi nextjs dengan Automatic Installation.

terminal
npx create-next-app@latest

Dalam proses instalasi ikut perinta berikut

terminal
Need to install the following packages:
  create-next-app@13.4.12
Ok to proceed? (y) y
✔ What is your project named? frontend-nextjs  // nama folder dari nextjs
✔ Would you like to use TypeScript? … No / Yes  // pilih yes
✔ Would you like to use ESLint? … No / Yes   // pilih yes
✔ Would you like to use Tailwind CSS? … No / Yes   // pilih yes
✔ Would you like to use `src/` directory? … No / Yes   // pilih no
✔ Would you like to use App Router? (recommended) … No / Yes // pilih yes
✔ Would you like to customize the default import alias? … No / Yes  // pilih no
Creating a new Next.js app in /Volumes/luvieummunafisa/FullstackDev/frontend-nextjs.

Jika berhasil maka akan terbuat strukut project seperti pada gambar di bawah.

Alt text

B. Package.json script

package.json
{
  "name": "frontend-nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.4.5",
    "@types/react": "18.2.17",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.14",
    "clsx": "^2.0.0",
    "eslint": "8.46.0",
    "eslint-config-next": "13.4.12",
    "next": "13.4.12",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6"
  }
}

Keterangan

  • dev: untuk menjalakan next ketika proses development.
  • build: untuk menjalakan build aplikasi nexjs untuk production.
  • start: untuk menjalankan nextjs dalam mode production.
  • lint: untuk set up built-in ESLint configuration pada nextjs.

Jalankan pada terminal

terminal
npm run dev

Jalankan pada browser

Alt text

secara default nextjs berjalan pada port 3000, kita dapat merubah port nextjs dengan cara seperti di bawah

package.json
"scripts": {
    "dev": "next dev -p 3010",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

Jalankan pada browser

Alt text