web-nextjs

web-nextjs

用途

此技能提供使用 Next.js 15 构建和部署 Web 应用的专业知识，重点介绍 App Router、服务器操作和优化渲染策略等现代功能。

适用场景

适用于需要快速、对 SEO 友好的 React 应用且包含服务器端逻辑的项目；非常适合需要 SSR 的电商网站、采用 SSG 的博客或采用 ISR 的动态应用；对于使用纯 React 即可满足需求的简单静态网站，则不建议使用。

主要功能

• App Router：支持在 /app 目录中进行基于文件的路由管理，便于组织；示例：使用 app/about/page.jsx 创建路由。
• 服务器操作：无需 API 路由即可在服务器上执行变更；在表单中将其定义为异步函数，例如在组件中使用 'use server' 指令。
• ISR/SSG/SSR：在服务器操作中通过 revalidatePath() 配置 ISR；使用 getStaticProps 配置 SSG；使用 getServerSideProps 动态获取数据并配置 SSR。
• 中间件：在 middleware.js 中编写边缘函数，以处理身份验证或重定向，例如在页面加载前检查用户会话。
• Turbopack：通过增量打包加快开发速度；在 next.config.js 中通过 experimental: { turbopack: true } 启用。
• Vercel 部署：通过 Vercel CLI 零配置部署应用；支持通过 Webhook 自动使 ISR 缓存失效。

使用模式

要构建 Next.js 应用，首先创建项目：运行 npx create-next-app@latest my-app --typescript，然后进入 /app 目录配置路由。对于服务器操作，在表单中导入并使用：例如，在组件中添加 async function addItem() { 'use server'; await db.insert(item); }。通过从页面导出 getServerSideProps 来实现 SSR：export async function getServerSideProps() { const data = await fetchData(); return { props: { data } }; }。对于 ISR，在操作中使用 revalidate：例如，更新内容后调用 revalidatePath('/posts')。示例 1：使用 SSG 构建博客——创建 app/posts/[id]/page.jsx，并通过 getStaticProps 获取文章，然后运行 next build 生成静态输出。示例 2：添加身份验证中间件——创建 middleware.js，并写入 export function middleware(request) { if (!request.cookies.token) return NextResponse.redirect('/login'); }，然后使用 next dev 进行测试。

常用命令/API

• 创建项目：运行 npx create-next-app@latest my-app --app 以使用 App Router；添加 --typescript 以支持 TypeScript。
• 开发服务器：运行 next dev --port 3001，在指定端口启动并启用热重载。
• 构建和部署：运行 next build 进行生产构建，然后使用 vercel --prod 部署；使用 Vercel API 端点，例如 POST https://api.vercel.com/v13/now/deployments?teamId=$VERCEL_TEAM_ID，并在 JSON 请求体中传入 { "name": "my-app" }。
• API 路由：在 app/api/route.js 中定义，例如 export async function GET(request) { const data = await fetch('https://api.example.com'); return Response.json(data); }。
• 配置格式：编辑 next.config.js 设置自定义选项，例如 module.exports = { images: { domains: ['example.com'] }, experimental: { appDir: true } }; 使用 .env.local 设置环境变量，例如 NEXT_PUBLIC_API_URL="https://api.example.com"。
• Turbopack 命令：在 next.config.js 中启用，然后运行 next dev 以加快迭代速度。

集成说明

通过 Prisma 集成 PostgreSQL 等数据库：安装 @prisma/client，运行 npx prisma migrate dev，然后在服务器操作中使用环境变量 $DATABASE_URL 配置连接字符串。对于身份验证，使用 NextAuth.js：安装 next-auth，在 [...nextauth].js 中进行配置，并在 .env 中设置 $NEXTAUTH_SECRET；示例：import NextAuth from 'next-auth'; export default NextAuth({ providers: [] })。通过添加包含 { "routes": [{ "src": "/api/(.*)", "dest": "/api/$1" }] } 的 vercel.json，将项目连接到 Vercel 以实现 CI/CD。如果需要 API 密钥，请将其存储为环境变量，例如 $STRIKE_API_KEY，并在组件中通过 process.env.STRIKE_API_KEY 访问。

错误处理

通过创建 app/404.js 并添加自定义页面来处理 404 错误：export default function NotFound() { return

404 - Page Not Found