Other Tooling

Prisma

Install prisma

  pnpm i prisma @prisma/client

  pnpx prisma init

Buat file db di src/db/dev.db
Pindahkan folder prisma ke src/db/prisma
Buat file utils di src/utils/prisma.ts

src/utils/prisma.ts

import { PrismaClient } from "@prisma/client";
 
const prismaClientSingleton = () => {
  return new PrismaClient();
};
 
type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>;
 
const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClientSingleton | undefined;
};
 
const prisma = globalForPrisma.prisma ?? prismaClientSingleton();
 
export default prisma;
 
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

Tambahkan script berikut pada package.json

"prepare": "husky install",
"db:migrate": "prisma migrate dev --name dev",
"db:studio": "prisma studio"

"prisma": {
    "schema": "./src/db/prisma/schema.prisma"
  },

Pada src/db/prisma/schema.prisma

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

Jalankan pnpm db:migrate

EsLint

Tujuan menggunakan EsLint:

Code Quality
Code Style Consistency

EsLint Library untuk React dan TypeScript:

Setup EsLint:

pnpm add --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript

pnpm i eslint-config-airbnb

pnpm i eslint-config-airbnb-typescript

.elintrc.json

{
  "extends": ["next/core-web-vitals", "eslint:recommended", "plugin:@typescript-eslint/recommended", "airbnb", "airbnb-typescript"],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ],
    "react/react-in-jsx-scope": "off"
  }
}

Husky

Setup Husky

pnpx husky-init && pnpm install

pnpx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

pnpm install -g @commitlint/cli @commitlint/config-conventional

commitlint.config.js

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [2, "always", ["chore", "feat", "fix", "refactor"]],
    "type-case": [2, "always", "lower-case"],
    "subject-case": [2, "always", "lower-case"],
    "subject-empty": [2, "never"],
  },
};

React TypeScript NextAuth