{children}
)
}
```
### 响应式和深色模式
```typescript title="components/responsive-example.tsx" theme={null}
export function ResponsiveComponent() {
return (
支持深色模式的内容
{children}
)
}
// 使用示例
export function ContactForm() {
return (
)
}
```
### 2. 自定义 Hook
```typescript title="hooks/use-form.ts" theme={null}
import { useState } from "react"
export function useForm加载中...
}
return {/* 渲染内容 */}
})
```
产品列表
{/* 产品列表内容 */}
{product.name}
{product.description}
用户 ID: {params.id}
;
}
```
### 多个参数路由
```typescript title="app/users/[id]/posts/[postId]/page.tsx" theme={null}
interface Props {
params: {
id: string;
postId: string;
};
}
export default function UserPostPage({ params }: Props) {
return (
用户 ID: {params.id}
文章 ID: {params.postId}
文档路径: {path}
;
}
```
关于我们页面内容
;
}
```
### 动态元数据
```typescript title="app/blog/[slug]/page.tsx" theme={null}
import { Metadata } from 'next';
interface Props {
params: { slug: string };
}
export async function generateMetadata({ params }: Props): Promise{t('title')}
{t('description')}
本地化的关于页面
;
}
```
## 最佳实践
### 1. 页面组件结构
```typescript theme={null}
// 推荐的页面组件结构
export default function ProductPage() {
return (
{/* 页面头部 */}
{/* 主要内容 */}
{/* 内容区域 */}
{/* 页面底部（如需要） */}
);
}
```
### 2. 错误处理
```typescript title="app/products/error.tsx" theme={null}
'use client';
import { useEffect } from 'react';
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
console.error(error);
}, [error]);
return (
页面标题
出错了！
{Array.from({ length: 6 }).map((_, i) => (
))}
新功能页面
这是新功能页面的内容
{t("title")}
{t("description")}
{/* 模型选择 */}
{/* 消息列表 */}
)
}
```
## 成本控制
### 积分计算
```typescript title="lib/ai/pricing.ts" theme={null}
export function calculateTokenCost(
usage: { promptTokens: number; completionTokens: number },
model: LLMModel
): number {
const totalTokens = usage.promptTokens + usage.completionTokens
return Math.ceil(totalTokens * model.costPerToken * 1000)
}
export function estimateMessageCost(message: string, model: LLMModel): number {
// 简单估算：4 个字符 ≈ 1 个 token
const estimatedTokens = Math.ceil(message.length / 4)
return Math.ceil(estimatedTokens * model.costPerToken * 1000)
}
```
### 用量限制
```typescript title="lib/ai/limits.ts" theme={null}
export async function checkUsageLimit(userId: string, estimatedCost: number) {
const user = await prisma.user.findUnique({
where: { id: userId },
select: { credits: true, plan: true }
})
if (!user) {
throw new Error('用户不存在')
}
if (user.credits < estimatedCost) {
throw new Error('积分不足，请充值后再试')
}
// 检查每日使用限制
const today = new Date()
today.setHours(0, 0, 0, 0)
const todayUsage = await prisma.creditTransaction.aggregate({
where: {
userId,
type: 'CONSUMPTION',
createdAt: { gte: today }
},
_sum: { amount: true }
})
const dailyLimit = getDailyLimit(user.plan)
const usedToday = Math.abs(todayUsage._sum.amount || 0)
if (usedToday + estimatedCost > dailyLimit) {
throw new Error('今日用量已达上限')
}
return true
}
function getDailyLimit(plan: string): number {
switch (plan) {
case 'FREE': return 100
case 'BASIC': return 1000
case 'PRO': return 10000
default: return 100
}
}
```
## 多模型支持
### 模型切换
```typescript title="components/ai/model-selector.tsx" theme={null}
'use client'
import { useState } from 'react'
import { AVAILABLE_MODELS } from '@/lib/ai/models'
interface ModelSelectorProps {
selectedModel: string
onModelChange: (modelId: string) => void
}
export function ModelSelector({ selectedModel, onModelChange }: ModelSelectorProps) {
return (
{messages.map(message => (
))}
{isLoading && (
)}
{/* 输入框 */}
{message.content}
{AVAILABLE_MODELS.map(model => (
onModelChange(model.id)}
>
))}
{model.name}
{model.providerId} • {model.maxTokens.toLocaleString()} tokens
{model.costPerToken * 1000}积分/1K tokens
加载中...
if (status === 'unauthenticated') return 未登录
return (
欢迎，{session?.user?.name}
邮箱：{session?.user?.email}
欢迎，{session.user?.name}
权限不足
}
return <>{children}
}
```
## 用户信息管理
### 更新用户信息
```typescript title="app/api/user/profile/route.ts" theme={null}
import { auth } from '@/lib/auth'
import { prisma } from '@/lib/prisma'
export async function PUT(request: Request) {
const session = await auth()
if (!session) {
return NextResponse.json({ error: '未授权' }, { status: 401 })
}
const { name, avatar } = await request.json()
const user = await prisma.user.update({
where: { id: session.user.id },
data: { name, avatar }
})
return NextResponse.json({ user })
}
```
### 客户端更新
```typescript title="components/profile-form.tsx" theme={null}
'use client'
import { useState } from 'react'
import { useSession } from 'next-auth/react'
export function ProfileForm() {
const { data: session, update } = useSession()
const [name, setName] = useState(session?.user?.name || '')
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
const response = await fetch('/api/user/profile', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name })
})
if (response.ok) {
// 更新客户端会话
await update({ name })
}
}
return (
)
}
```
## 登出功能
### 客户端登出
```typescript title="components/logout-button.tsx" theme={null}
'use client'
import { signOut } from 'next-auth/react'
export function LogoutButton() {
return (
)
}
```
### 服务端登出
```typescript title="app/api/auth/signout/route.ts" theme={null}
import { signOut } from '@/lib/auth'
export async function POST() {
await signOut({ redirectTo: '/' })
}
```
## 中间件配置
```typescript title="middleware.ts" theme={null}
import { auth } from '@/lib/auth'
import { NextResponse } from 'next/server'
export default auth((req) => {
const { pathname } = req.nextUrl
// 保护的路由
if (pathname.startsWith('/dashboard')) {
if (!req.auth) {
return NextResponse.redirect(new URL('/auth/signin', req.url))
}
}
// 管理员路由
if (pathname.startsWith('/admin')) {
if (!req.auth || req.auth.user?.role !== 'ADMIN') {
return NextResponse.redirect(new URL('/unauthorized', req.url))
}
}
return NextResponse.next()
})
export const config = {
matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)']
}
```
## 会话提供者
```typescript title="components/providers/session-provider.tsx" theme={null}
'use client'
import { SessionProvider } from 'next-auth/react'
export function Providers({ children }: { children: React.ReactNode }) {
return (
{t('title')}
{t('subtitle')}
Loading...
}
```
### 静态生成
```typescript title="next.config.js" theme={null}
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
ppr: true, // 启用部分预渲染
},
}
module.exports = nextConfig
```
{plans.map((plan) => (
{plan.name}
))}
)
}
```
## 一次性付款
### 创建支付意图
```typescript title="app/api/stripe/create-payment-intent/route.ts" theme={null}
export async function POST(request: Request) {
const { amount, currency = 'usd' } = await request.json()
try {
const paymentIntent = await stripe.paymentIntents.create({
amount: amount * 100, // 转换为分
currency,
automatic_payment_methods: { enabled: true },
})
return NextResponse.json({
clientSecret: paymentIntent.client_secret,
})
} catch (error) {
return NextResponse.json({ error: '创建支付失败' }, { status: 500 })
}
}
```
### 支付表单
```typescript title="components/payment/payment-form.tsx" theme={null}
'use client'
import { useState } from 'react'
import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js'
import { stripePromise } from '@/lib/stripe'
function CheckoutForm({ clientSecret }: { clientSecret: string }) {
const stripe = useStripe()
const elements = useElements()
const [isLoading, setIsLoading] = useState(false)
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
if (!stripe || !elements) return
setIsLoading(true)
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: `${window.location.origin}/payment/success`,
},
})
if (error) {
console.error('支付失败:', error)
}
setIsLoading(false)
}
return (
)
}
export function PaymentForm({ clientSecret }: { clientSecret: string }) {
return (
{plan.price}/月
-
{plan.features.map((feature) => (
- ✓ {feature} ))}
账单历史
{invoices.map((invoice: any) => (
#{invoice.number}
${(invoice.amount_paid / 100).toFixed(2)}
{new Date(invoice.created * 1000).toLocaleDateString()}