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?
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
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