环境

） } // 带搜索参数导出默认异步函数EnvironmentsPage({ 搜索参数， }：{ searchParams: Promise<{ 状态?: 字符串;页？：字符串 }> }) { const params = 等待 searchParams const 环境 = 等待 getEnvironments({ 状态： params.status，页面：parseInt(params.page || '1'), }) 返回 } ## 客户端组件 // 组件/EnvironmentActions.tsx “使用客户端” 从 'react' 导入 { useState } 从 'next/navigation' 导入 { useRouter } 导出函数EnvironmentActions({ id }: { id: string }) { const [isLoading, setIsLoading] = useState(false) 常量路由器 = useRouter() 异步函数handleDelete() { 设置正在加载（true）尝试{ 等待 fetch(`/api/environments/${id}`, { method: 'DELETE' }) router.refresh() // 刷新服务器组件 }最后{ setIsLoading(假) } } 返回（ <按钮 onClick={handleDelete} 禁用={正在加载} 类名=“btn btn-危险” > {正在加载？ '删除...' : '删除'} ） } ## API 路由处理程序 // 应用程序/api/环境/route.ts 从 'next/server' 导入 { NextRequest, NextResponse } 从 'zod' 导入 { z } const CreateEnvironmentSchema = z.object({ 名称：z.string().min(1).max(100), 描述：z.string().可选(), }) // 获取/api/环境导出异步函数 GET(请求: NextRequest) { const searchParams = request.nextUrl.searchParams const status = searchParams.get('status') const 环境 = 等待 prisma.environment.findMany({ 其中：状态？ {状态}：未定义， orderBy: { createAt: 'desc' }, }) 返回 NextResponse.json(环境) } // POST /api/环境导出异步函数 POST(request: NextRequest) { 尝试{ const body = 等待 request.json() const data = CreateEnvironmentSchema.parse(body) const 环境 = 等待 prisma.environment.create({ 数据：{ 名称：数据.名称，描述：数据.描述，状态：“待处理”， }, }) 返回 NextResponse.json(环境, { 状态: 201 }) } 捕获（错误）{ if (z.ZodError 错误实例) { 返回 NextResponse.json( { error: '验证失败', 详细信息: error.errors }, { 状态：400 } ） } 抛出错误 } } // 应用程序/api/环境/[id]/route.ts 导出异步函数 GET( 请求：下一个请求， { params }: { params: Promise<{ id: string }> } ）{ const { id } = 等待参数 const 环境 = 等待 prisma.environment.findUnique({ 其中：{id}， }) 如果（！环境）{ 返回 NextResponse.json( { error: '未找到环境' }, {状态：404} ） } 返回NextResponse.json（环境） } ## 中间件 // 中间件.ts 从 'next/server' 导入 { NextResponse } 从 'next/server' 导入类型 { NextRequest } 从 'next-auth/jwt' 导入 { getToken } 导出异步函数中间件（请求：NextRequest）{ const token = wait getToken({ req: 请求 }) const isAuthPage = request.nextUrl.pathname.startsWith('/login') // 将经过身份验证的用户重定向到身份验证页面 if (isAuthPage && 令牌) { 返回 NextResponse.redirect(new URL('/dashboard', request.url)) } // 保护仪表板路由 if (request.nextUrl.pathname.startsWith('/dashboard') && !token) { 返回 NextResponse.redirect(new URL('/login', request.url)) } 返回 NextResponse.next() } 导出常量配置= { 匹配器: ['/dashboard/:path*', '/login'], } ## NextAuth.js 集成 // 库/auth.ts 从 'next-auth' 导入 NextAuth 从“next-auth/providers/google”导入 GoogleProvider 从 '@auth/prisma-adapter' 导入 { PrismaAdapter } 从 '@/lib/prisma' 导入 { prisma } 导出 const { 处理程序、 auth、登录、退出 } = NextAuth({ 适配器：PrismaAdapter(prisma)，提供者：[ 谷歌提供商({ clientId：process.env.GOOGLE_CLIENT_ID！， clientSecret：process.env.GOOGLE_CLIENT_SECRET！， }), ], 回调：{ 会话（{会话，用户}）{ 会话.用户.id = 用户.id 返回会话 }, }, }) // 应用程序/api/auth/[...nextauth]/route.ts 从 '@/lib/auth' 导入 { handlers } 导出 const { GET, POST } = 处理程序 ## 服务器操作 // 应用程序/环境/actions.ts '使用服务器' 从 'next/cache' 导入 { revalidatePath } 从“下一步/导航”导入{重定向} 从 'zod' 导入 { z } const CreateSchema = z.object({ 名称：z.string().min(1), }) 导出异步函数createEnvironment(formData: FormData) { const 数据 = CreateSchema.parse({ 名称：formData.get('名称'), }) 等待 prisma.environment.create({ 数据: { 名称: data.name, 状态: '待处理' }, }) revalidatePath('/环境') 重定向（'/环境'） } // 组件中的使用从 './actions' 导入 { createEnvironment } 导出函数 CreateForm() { 返回（ <表单操作={创建环境}> <输入名称=“名称”必需/> ） } ## 加载和错误状态 // 应用程序/环境/loading.tsx 导出默认函数 Loading() { 返回（

{[...Array(5)].map((_, i) => (

))}

） } // 应用程序/环境/error.tsx “使用客户端” 导出默认函数Error({ 错误，重置， }：{ 错误：错误&{摘要？：字符串} 重置：() => 无效 }) { 返回（

出了点问题！

{错误.消息}

<按钮 onClick={重置} className =“mt-4 px-4 py-2 bg-blue-500 文本白色圆形” > 再试一次

） } ## 数据获取模式 // 库/api.ts const API_URL = process.env.FACADE_URL || 'http://localhost:1337' 导出异步函数 getEnvironments() { const res = 等待 fetch(`${API_URL}/api/v1/environments`, { next: { revalidate: 60 }, // ISR: 每 60 秒重新验证一次 }) 如果（！res.ok）{ 抛出新错误（'无法获取环境'） } 返回 res.json() } 导出异步函数 getEnvironment(id: string) { const res = 等待 fetch(`${API_URL}/api/v1/environments/${id}`, { cache: 'no-store', // 始终新鲜 }) 如果（！res.ok）{ if (res.status === 404) 返回 null 抛出新错误（'无法获取环境'） } 返回 res.json() } ## 并行数据获取 // 应用程序/仪表板/page.tsx 导出默认异步函数 DashboardPage() { // 并行获取 const [环境、用户、指标] = wait Promise.all([ 获取环境（），获取用户(), 获取指标（）， ]）返回（ <仪表板环境={环境} 用户={用户} 指标={指标} /> ） }

Nextjs 模式

包含技能