背景
隨著ChatGPT的火熱，國外很多開發(fā)者快速響應，應用于不同場景的AI應用井噴式的爆發(fā)，并且基本集中在web領域應用，而在快速開發(fā)的背后，我們可以看到，開發(fā)者大多選擇Next.js或者Nuxt.js全?？蚣軄黹_發(fā)，以快速驗證自己的產品。這種選型的背后，我覺得主要原因有：
-
SEO的重要性國外更加注重SEO的重要性，國內搜索引擎大多是靠花錢買搜索流量，包括小程序、App這類對SEO的需求并不大
-
Edge Function的興起Serverless使得前端開發(fā)能快速開發(fā)全棧應用，方便的托管自己后端服務，而不用過多關注部署，然而他的缺點是，多數(shù)Serverless都是采用容器化的方案，因此冷啟動時間長，如果在自己的云函數(shù)轉發(fā)請求OpenAI接口，可能會發(fā)生請求時間很長的情況。如今， Vercel、CloudFlare、Supabase等廠商都有了Edge Function的能力，使得函數(shù)可以在一些距離用戶更近的邊緣節(jié)點運行，為了更快的冷啟動時間來快速響應用戶，這種方案一般也加了部分限制，但是依舊得到很多開發(fā)者的青睞
-
云服務廠商的多樣性
云服務廠商提供了很多基礎服務，當把項目托管給Vercel等服務時，可以與Github集成進行持續(xù)部署，同時還會分配一個域名。很多其他廠商也提供了很多的免費后端存儲服務，例如：
- Upsatsh提供的Redis
- Supabase提供的PostgreSQL
- PlantScale提供的MySQL
- Clerk提供的用戶認證和用戶管理
以上這些廠商的免費計劃對于個人開發(fā)完全夠用，當然也可以根據(jù)產品規(guī)模使用付費計劃
而本文旨在嘗試開發(fā)一個簡單的導航頁面，滿足自己的收集癖好，用于解放自己的收藏夾，來學習Next.js開發(fā)，體驗Next.js帶來的開發(fā)全棧應用的便捷性，你可以打開頁面體驗，也可以在本項目開源地址查看完整代碼。
初始化項目
隨著以tailwindcss、unocss這種原子化CSS方案的出現(xiàn)，基于此衍生出來的UI組件庫也很多，比如Radix、daisyUI、flowbite， 其中的RadixUI組件庫相當注重網頁的可訪問性，組件都遵循WAI-ARIA標準，這使得開發(fā)者構建可訪問的UI界面變得更加容易，而因為他專注于可訪問性、屬于Headless UI也就是無具體樣式類名代碼，因此shadcn作者開發(fā)了shadcn/ui組件庫，在此RadixUI組件庫基礎上賦予了簡潔美觀的樣式，得到了很多開發(fā)者的青睞， 也非常推薦大家體驗下。
這里直接選擇克隆該作者的Nextjs模版初始化項目
git clone https://github.com/shadcn/next-template
該項目使用了Next.js最新的app router版本，并且已經集成了tailwindcss和shadcn/ui組件庫。這里選擇做導航網站也是因為它足夠簡單，關鍵樣式是針對側邊欄，因為tailwindcss是移動端優(yōu)先，所以這里設置默認隱藏，當屏幕寬度大于sm時展示。
<div className="fixed z-20 hidden min-h-screen sm:block">
...
</div>
而對于列表區(qū)域，采用grid布局，默認移動端優(yōu)先一列，根據(jù)屏幕大小展示2列或者3列
<div className="grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3">
...
</div>
其他的樣式可以借鑒一下別人的網站設計簡單美化下，對于不太熟悉css并且缺乏審美的我花了不少的時間在調整，總覺得網站不夠美觀，但是又不知道該如何美化。
數(shù)據(jù)庫集成
定義模型
數(shù)據(jù)庫集成這里我選擇了Prisma，類似的比較熱門的還有Drizzle，針對Prisma的具體概念、使用和它的優(yōu)點，可以參考我整理記錄的筆記。執(zhí)行
npx prisma init
會創(chuàng)建prisma/schema.prisma文件，創(chuàng)建模型如下
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
}
model Category {
id String @id @default(cuid())
icon String
title String
description String
rank Int?
createdAt DateTime @default(now()) @map(name: "created_at")
updatedAt DateTime @default(now()) @map(name: "updated_at")
links Link[]
@@map(name: "category")
}
model Link {
id String @id @default(cuid())
icon String
url String
title String
description String
rank Int?
public Boolean @default(true)
status Int @default(1) @db.TinyInt
createdAt DateTime @default(now()) @map(name: "created_at")
updatedAt DateTime @default(now()) @map(name: "updated_at")
cid String
catagory Category @relation(fields: [cid], references: [id])
@@map(name: "link")
}
其中DATABASE_URL為遠程數(shù)據(jù)庫地址，這里我使用的是PlantScale的MySQL。當然你也可以使用Supabase的PostgreSQL或者其他數(shù)據(jù)庫，創(chuàng)建.env文件，填入服務地址
DATABASE_URL='mysql://user:password@aws.connect.psdb.cloud/dev?sslaccept=strict'
可以在這個可視化Prisma模型網站看到關系圖如下， 分別表示類別實例和網站鏈接實例
表同步
然后執(zhí)行命令將本地模型同步到數(shù)據(jù)庫表
npx prisma db push
然后可能會遇到下面報錯
查閱后發(fā)現(xiàn)官網在文檔中有說明，PlanetScale的MySQL數(shù)據(jù)庫不支持外鍵，需要特殊的指定relationMode
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
relationMode = "prisma"
}
relationMode默認值是foreignKeys，當使用PlanetScale數(shù)據(jù)庫的MySQL連接器時，應啟用此選項， 在Prisma Client中模擬關系。再次執(zhí)行db push指令，將模型同步到數(shù)據(jù)庫
插入和查詢數(shù)據(jù)
然后執(zhí)行
npx prisma studio
打開表編輯器添加自己的數(shù)據(jù)
執(zhí)行命令生成PrismaClient實例
pnpm install @prisma/client
npx prisma generate
然后就可以通過關聯(lián)關系一次性查詢出數(shù)據(jù)
import prisma from '@/lib/db';
import type { Prisma } from '@prisma/client';
export default async function getNavLinks() {
const res = await prisma.category.findMany({
orderBy: [
{
rank: 'asc',
}
],
include: {
links: {
orderBy: {
rank: 'asc',
},
where: {
public: true,
status: 1,
},
},
},
});
return res;
}
export type CategoryWithLinks = Prisma.PromiseReturnType<typeof getNavLinks>
用戶認證
在Next.js中集成用戶認證非常簡單，可以直接使用NextAuth
NextAuth
NextAuth是一個為Next.js應用程序提供的開源身份驗證解決方案。默認情況下，NextAuth使用JSON Web Tokens（JWT）保存用戶會話。NextAuth支持流行的登錄服務，如Google、Facebook、 Auth0 、Apple、電子郵件以及OAuth 1.0和2.0服務等等，是一種靈活可配置的身份驗證解決方案。
首先安裝所需依賴
pnpm install next-auth @next-auth/prisma-adapter
按照官方文檔指引添加用戶相關模型
model Account {
id String @id @default(cuid())
userId String
type String
provider String
providerAccountId String
refresh_token String? @db.Text
access_token String? @db.Text
expires_at Int?
token_type String?
scope String?
id_token String? @db.Text
session_state String?
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
@@unique([provider, providerAccountId])
}
model Session {
id String @id @default(cuid())
sessionToken String @unique
userId String
expires DateTime
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
}
model User {
id String @id @default(cuid())
name String?
email String? @unique
emailVerified DateTime?
image String?
accounts Account[]
sessions Session[]
}
model VerificationToken {
identifier String
token String @unique
expires DateTime
@@unique([identifier, token])
}
GitHub
獲取Github客戶端ID，參考文檔，包含以下步驟：
-
打開
GitHub應用程序頁面，點擊創(chuàng)建Github應用。 -
輸入名稱、主頁、以及授權后的回調地址，這里開發(fā)環(huán)境時填
localhost:3000，上線時切換成自己的線上域名即可。 -
點擊”生成”并保存
Client ID和Client Secret
參考NextAuth文檔指引，在Google開發(fā)者網站注冊應用并選擇api服務
應用類型選擇Web應用，類似Github填上可信任的域名和回調地址確認
創(chuàng)建 API 路由
首先在.env文件中添加上面保存的認證相關密鑰，其中NEXTAUTH_SECRET是用戶生成JWT的密鑰
# google登錄
GOOGLE_CLIENT_ID="GOOGLE_CLIENT_ID"
GOOGLE_CLIENT_SECRET="GOOGLE_CLIENT_SECRET"
# github登錄
GITHUB_CLIENT_ID="GITHUB_CLIENT_ID"
GITHUB_CLIENT_SECRET="GITHUB_CLIENT_SECRET"
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="webnav"
可以看到上面的API回調地址分別是/api/auth/github 和 /api/auth/google， 創(chuàng)建app/api/auth/[…nextauth]/route.ts 文件，并添加以下代碼片段：
import NextAuth, { type NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import GitHubProvider from "next-auth/providers/github";
import CredentialsProvider from "next-auth/providers/credentials";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { PrismaClient } from "@prisma/client";
import { compare } from "bcrypt";
const prisma = new PrismaClient();
export const authOptions: NextAuthOptions = {
adapter: PrismaAdapter(prisma),
providers: [
GitHubProvider({
clientId: process.env.GITHUB_CLIENT_ID!,
clientSecret: process.env.GITHUB_CLIENT_SECRET!,
}),
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID!,
clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
}),
CredentialsProvider({
name: "Credentials",
credentials: {
email: { label: "Email", type: "email" },
password: { label: "Password", type: "password" },
},
async authorize(credentials) {
const { email, password } = credentials ?? {}
if (!email || !password) {
throw new Error("Missing username or password");
}
const user = await prisma.user.findUnique({
where: {
email: credentials?.email,
},
});
// if user doesn't exist or password doesn't match
if (!user || !(await compare(password, user.password!))) {
throw new Error("Invalid username or password");
}
return user;
},
})
],
session: {
strategy: "jwt",
},
debug: process.env.NODE_ENV !== "production",
};
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
其中，GitHubProvider用戶Github登錄，GoogleProvider用于Google登錄，CredentialsProvider用于自定義登錄，這里會檢查郵箱密碼， 匹配上了就返回用戶信息。
同時還需要創(chuàng)建注冊登錄頁面，創(chuàng)建app/login/page.tsx文件和app/register/page.tsx 文件，頁面直接復制的taxonomy 頁面樣式，自己加上google登錄按鈕，效果如圖
頁面上通過
import { signIn, signOut } from "next-auth/react"
signIn方法允許使用Google或GitHub帳戶進行登錄。 signOut允許注銷用戶會話， 具體使用可以參考官方文檔這部分
部署
在[Vercel](https://vercel.com/)中直接導入項目，修改構建命令為
npx prisma generate && next build
在build之前先生成PrismaClient類型，不然編譯時會因為類型報錯而失敗，同時添加.env中所需要的環(huán)境變量
同時因為我們的數(shù)據(jù)源在數(shù)據(jù)庫，而Nextjs默認是構建時生成頁面的也就是SSG模式，在數(shù)據(jù)庫有數(shù)據(jù)更新時我們需要更新頁面內容，因此我們需要使用它的增量靜態(tài)生成ISR(Incremental Static Regeneration)模式，參考官方文檔，在page.tsx中添加導出，這里對更新時效性要求不高所以設置為1天
export const revalidate = 24 * 60 * 60;
從構建日志中可以看到已經生效了
部署成功后綁定自定義域名就完結撒花了。文章來源：http://www.zghlxwxcb.cn/news/detail-486150.html
總結
本文以簡單的導航網站舉例，結合Next.js、Prisma、NextAuth、shadcn/ui 來學習如何構建全棧應用，你可以打開頁面體驗，也可以在本項目開源地址查看完整代碼，最后碼字不易，如果你都看到這了，麻煩star一波，感謝。文章來源地址http://www.zghlxwxcb.cn/news/detail-486150.html
到了這里，關于使用Nextjs快速開發(fā)全棧導航網站的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
![網站開發(fā)[1] - Spring Boot 快速建立項目](https://imgs.yssmx.com/Uploads/2024/02/473138-1.png)
