Design Pattern Fullstack NextJS with App Router

Selasa, 07 Mei 2024
gambar-sampul

Halo semua, kali ini gua mau sharing untuk setup Fullstack NextJS sesuai dengan Design Pattern yang gua akan sering pake di project Fullstack NextJS. Buat yang belum tau, Design Pattern menurut pemahaman gua adalah suatu aturan standar atau pola yang ditentukan di awal pengerjaan aplikasi mengenai penulisan kode program. Aturan standar tersebut meliputi penentuan struktur folder, gaya penulisan kode, aturan penggunaa git, dan lain-lain yang menunjang proses penulisan kode.

 

Tujuan dibuatnya Design Pattern ini adalah untuk memudahkan developer terutama yang berkerja dalam tim untuk menghasilkan kode yang bagus, yakni:

Selain itu ketika kita bekerja dalam tim, dengan adanya Design Pattern developer-developer akan cukup jelas bagaimana mereka harus menulis kode, bagian file-file mana saja yang menjadi tugasnya, dan bisa menghindari terhapusnya kode-kode developer lain secara tidak sengaja akibat penggunaan git yang kurang tepat.

 

Khusus di blog ini gua hanya membahas mengenai setup NextJS dengan konfigurasi TypeScript, ESLint, Prettier, husky + lintstage dan struktur folder yang gua terapkan.

 

Prerequisite

 

Setup NextJS

Install NextJS

Langkah pertama gua akan menginstall NextJS melalui terminal dengan command berikut:

Bash
npx create-next-app@14.2.3

 

Kemudian kalian bisa mengisi pertanyaan-pertanyaannya kaya gambar berikut atau sesuai dengan kebutuhan project kalian:

 

create-next-app

 

kalo udah berhasil terinstall kalian bisa masuk ke direktori project-nya, kemudian buka dengan Visual Studio Code

Bash
cd ./fullstack-next
code .

 

Selanjutnya kita install beberapa dependecies berikut dengan cara kalian copy file package.json berikut, kemudian paste ke package.json kalian yang ada di root project:

fullstack-next
|--...
|--package.json
|--...

 

JSON
{
  "name": "fullstack-next",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@prisma/client": "^5.13.0",
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18",
    "winston": "^3.13.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "eslint-config-prettier": "^9.1.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-prettier": "^5.1.3",
    "husky": "^9.0.11",
    "lint-staged": "^15.2.2",
    "postcss": "^8",
    "prettier": "^3.2.5",
    "prettier-eslint": "^16.3.0",
    "prettier-plugin-tailwindcss": "^0.5.14",
    "prisma": "^5.13.0",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

 

Setup Prettier dan ESLint

Oke, pertama kita konfigurasi Prettier dan ESLint. Prettier ini berfungsi untuk memformat kode kita secara otomatis agar sesuai dengan konfigurasi yang kita tentukan seperti berapa jumlah spasi untuk indentasi tab, jumlah karakter perbaris, dan lain sebagainya. Sedangkan ESLint berfungsi sebagai Static Code Analysis untuk mengidentifikasi pola kode yang bermasalah pada kodingan JavaScript/TypeScript yang tidak sesuai dengan standar yang kita konfigurasi. 

 

Buat file .prettierrc di root project dengan data JSON berikut:

JSON
{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "endOfLine": "auto",
  "printWidth": 80,
  "plugins": ["prettier-plugin-tailwindcss"]
}

 

 

Selanjutnya kita rubah file .eslintrc.json pada root project dengan data JSON berikut:

JSON
{
  "extends": [
    "next/core-web-vitals",
    "plugin:import/recommended",
    "plugin:prettier/recommended"
  ],
  "settings": {
    "import/resolver": {
      "typescript": true,
      "node": true
    }
  },
  "plugins": ["prettier"],
  "rules": {
    "import/order": "warn",
    "prettier/prettier": [
      "warn",
      {
        "endOfLine": "auto"
      }
    ],
    "react-hooks/exhaustive-deps": "off",
    "import/no-named-as-default-member": "off",
    "import/no-named-as-default": "off",
    "import/namespace": "off"
  }
}

 

Untuk file .eslintrc.json ini intinya gua pakai plugin import/order untuk mengatur urutan module yang diimport. Sedangkan untuk plugin prettier berfungsi untuk mengatasi bentrokan konfigurasi .prettierrc.  Sisanya cuma matiin aturan-aturan yang agak mengganggu aja.

 

Agar Visual Studio kita bisa memformat dengan Prettier sekaligus memperbaiki ESLint ketika disave, kita perlu menginstall extension Prettier, ESLint dan membuat file settings.json di folder .vscode dengan data berikut:

fullstack-next
|--...
|--/.vscode
|  |--settings.json
|--...

 

JSON
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always"
  },
  "[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma"
  }
}

 

Setup Prisma

Karena kita mau buat project Full Stack menggunakan Database, kita perlu setup Prisma sebagai ORM kita. Jalankan command berikut di terminal root project:

Bash
npx prisma init

 

Setelah menjalankan command di atas, akan muncul folder prisma di root projcet dengan satu file schema.prisma. Silahkan dikonfigurasi sesuai kebutuhan atau bisa pelajari di dokumentasi Pisma-nya.

Halaman: