Webサービスを作るときのテンプレートを作った

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma"
  }
}

Page object models(通称ポム) はroleを隠蔽することにより、値が変わっても影響範囲を最小限に抑えテストの保守性を高めます。

export class Base {
  protected page: Page;

  constructor(page: Page) {
    this.page = page;
  }

  async init() {
    await this.page.goto("http://localhost:3000");
    await this.page.waitForLoadState("networkidle");
  }

  async addItem(content: string) {
    expect(
      await this.page
        .getByRole("link", { name: "Add an item" })
        .getAttribute("href"),
    ).toBe("/create");
    await this.page.getByRole("link", { name: "Add an item" }).click();

    await this.page.getByLabel("New Memo").fill(content);
    await this.page.keyboard.press("Enter");
    await this.page.waitForLoadState("networkidle");
    await this.page.goto("/");
  }
}

NextAuthが認証情報やアカウント情報を保持するためには、指定されたスキーマが必要です。

model Account {
  id                 String    @id @default(cuid())
  userId             String
  providerType       String
  providerId         String
  providerAccountId  String
  refreshToken       String?
  accessToken        String?
  accessTokenExpires DateTime?
  createdAt          DateTime  @default(now())
  updatedAt          DateTime  @updatedAt
  user               User      @relation(fields: [userId], references: [id])

  @@unique([providerId, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  userId       String
  expires      DateTime
  sessionToken String   @unique
  accessToken  String   @unique
  createdAt    DateTime @default(now())
  updatedAt    DateTime @updatedAt
  user         User     @relation(fields: [userId], references: [id])
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt
  accounts      Account[]
  sessions      Session[]
}

model VerificationRequest {
  id         String   @id @default(cuid())
  identifier String
  token      String   @unique
  expires    DateTime
  createdAt  DateTime @default(now())
  updatedAt  DateTime @updatedAt

  @@unique([identifier, token])
}

generator erd {
  provider = "prisma-erd-generator"
  theme = "forest"
  output = "ERD.md"
  includeRelationFromFields = true
}

HMR(Hot Module Replacement)でコネクションプールが枯渇する問題がある。 この方法だと、動くけどVSCodeの補完でこのファイルが出てこなくて厳しいが公式の対応を今は待つしかない。

import { PrismaClient } from "@prisma/client";

export let prisma: PrismaClient;

if (process.env.NODE_ENV === "production") {
  prisma = new PrismaClient();
} else {
  if (!global.prisma) {
    global.prisma = new PrismaClient();
  }

  prisma = global.prisma;
}

api/auth/[...nextauth]に置くのが推奨される。

import { options } from "@/app/_clients/nextAuth";
import NextAuth from "next-auth/next";

const handler = NextAuth(options);

export { handler as GET, handler as POST };