Skip to main content

React Project Notes 项目指南

1. Next.js - React Framework​

1.1 Get Started 项目初始化​

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript

2. Prisma - ORM​

2.1 What is Prisma?​

https://www.prisma.io/docs/getting-started

Prisma is an open source next-generation ORM. It consists of the following parts:

  • Prisma Client: Auto-generated and type-safe query builder for Node.js & TypeScript
  • Prisma Migrate: Migration system
  • Prisma Studio: GUI to view and edit data in your database.

2.2 Schema examples​

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}

model User {
  id              String @id @default(auto()) @map("_id") @db.ObjectId
  name            String?
  username        String?   @unique
  bio             String?
  email           String?   @unique
  emailVerified   DateTime?
  image           String?
  coverImage      String?
  profileImage    String?
  hashedPassword  String?
  createdAt       DateTime @default(now())
  updatedAt       DateTime @updatedAt
  followingIds    String[] @db.ObjectId
  hasNotification Boolean?

  posts         Post[]
  comments      Comment[]
  notifications Notification[]
}

model Post {
  id                 String @id @default(auto()) @map("_id") @db.ObjectId
  body               String
  createdAt          DateTime @default(now())
  updatedAt          DateTime @updatedAt
  userId             String @db.ObjectId
  likedIds           String[] @db.ObjectId
  image              String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  comments          Comment[]
}

model Comment {
  id                 String @id @default(auto()) @map("_id") @db.ObjectId
  body               String
  createdAt          DateTime @default(now())
  updatedAt          DateTime @updatedAt
  userId             String @db.ObjectId
  postId             String @db.ObjectId

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
  post Post @relation(fields: [postId], references: [id], onDelete: Cascade)
}

model Notification {
  id                 String @id @default(auto()) @map("_id") @db.ObjectId
  body               String
  userId             String @db.ObjectId
  createdAt          DateTime @default(now())

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
}

2.3 Configuration examples​

https://www.mongodb.com/atlas/database

DATABASE_URL= "mongodb+srv://<username>:<password>@cluster0.qs7odft.mongodb.net/test"
NEXTAUTH_JWT_SECRET="NEXTAUTH_JWT_SECRET"
NEXTAUTH_SECRET="NEXTAUTH_SECRET"

# replace <username> as your username in MongoDB Atlas
# replace <password> as your password in MongoDB Atlas
# remember to add your IP address to the whitelist in MongoDB Atlas