Selasa, 07 Mei 2024Design Pattern Fullstack NextJS with App Router
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:
* kode yang mudah dimengerti banyak developer bahkan yang di luar tim,
* kode yang mudah dilanjutkan proses pengembangannya dalam waktu jangka panjang,
* dan yang cukup penting adalah kode yang mudah untuk di-fixing ketika ada bug karena cukup mudah mencari letak masalahnya.
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 * Install NodeJS minimum Versi 18.20.2
* Sudah pernah belajar React
* Familiar dengan TypeScript
* Terminal (git bash, cmd, powershell, dll)
* Text Editor Visual Stuido Code
Setup NextJSInstall NextJSLangkah pertama gua akan menginstall NextJS melalui terminal dengan command berikut:
npx create-next-app@14.2.3
Kemudian kalian bisa mengisi pertanyaan-pertanyaannya kaya gambar berikut atau sesuai dengan kebutuhan project kalian:
kalo udah berhasil terinstall kalian bisa masuk ke direktori project-nya, kemudian buka dengan Visual Studio Code
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
|--...
{
"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 ESLintOke, 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:
{
"trailingComma": "all",
"tabWidth": 2,
"semi": true,
"endOfLine": "auto",
"printWidth": 80,
"plugins": ["prettier-plugin-tailwindcss"]
}
* trailingComma untuk menambahkan koma di akhir elemen object, array, dan argumen function.
* tabWidth untuk menentukan jumlah spasi pada indentasi.
* semi untuk menambahkan titik koma (;) di akhir kode.
* endOfLine untuk menentukan akhir suatu baris (LF, CRLF, CR, Auto).
* printWidth untuk menentukan maksimal karakter per baris.
* terakhir plugins yang kita gunakan adalah prettier-plugin-tailwindcss untuk menyortir class-class tailwind yang kita gunakan.
Selanjutnya kita rubah file .eslintrc.json pada root project dengan data JSON berikut:
{
"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
|--...
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "always"
},
"[prisma]": {
"editor.defaultFormatter": "Prisma.prisma"
}
}
Setup PrismaKarena kita mau buat project Full Stack menggunakan Database, kita perlu setup Prisma sebagai ORM kita. Jalankan command berikut di terminal root project:
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.
