Next.js 全栈开发实战

Next.js 是基于 React 的全栈框架，本课程带你深入学习 Next.js 14+ 的最新特性，包括 App Router、Server Components、Server Actions 等，构建生产级电商应用。

课程亮点

• ✅ Next.js 14+ App Router 完整实战
• ✅ Server Components / Server Actions
• ✅ 数据库集成（PostgreSQL + Prisma）
• ✅ 用户认证（NextAuth.js）
• ✅ 完整的电商项目（商品、购物车、订单、支付）
• ✅ 微信支付、支付宝支付集成
• ✅ SEO 优化与性能调优
• ✅ Vercel 部署实战

项目架构

智源论坛-ecommerce/
├── app/                      # App Router
│   ├── (auth)/              # 认证页面
│   ├── (shop)/              # 商城页面
│   ├── api/                 # API 路由
│   ├── layout.tsx
│   └── page.tsx
├── components/              # 公共组件
├── lib/                     # 工具库
├── prisma/                  # 数据库 schema
└── public/                  # 静态资源

Server Components 实战

// app/products/[id]/page.tsx
import { prisma } from '@/lib/prisma'

export default async function ProductPage({ params }) {
  const product = await prisma.product.findUnique({
    where: { id: params.id }
  })

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <span>¥{product.price}</span>
      <AddToCartButton productId={product.id} />
    </div>
  )
}

Server Actions

// app/actions/order.ts
'use server'

import { revalidatePath } from 'next/cache'

export async function createOrder(formData: FormData) {
  const userId = formData.get('userId')
  const items = JSON.parse(formData.get('items'))

  const order = await prisma.order.create({
    data: {
      userId,
      items: {
        create: items.map(item => ({
          productId: item.id,
          quantity: item.qty,
          price: item.price
        }))
      }
    }
  })

  // 触发支付
  const payUrl = await createWechatPayOrder(order)

  revalidatePath('/orders')
  redirect(payUrl)
}

支付集成

本课程包含完整的微信H5支付和支付宝H5支付集成：

微信 H5 支付

// lib/wechat-pay.ts
import crypto from 'crypto'

export async function createWechatH5PayOrder(order) {
  const params = {
    appid: process.env.WECHAT_APPID,
    mch_id: process.env.WECHAT_MCH_ID,
    nonce_str: crypto.randomBytes(16).toString('hex'),
    body: order.productName,
    out_trade_no: order.orderNo,
    total_fee: order.amount * 100,
    spbill_create_ip: order.clientIp,
    notify_url: `${process.env.BASE_URL}/api/pay/wechat/notify`,
    trade_type: 'MWEB',
    scene_info: JSON.stringify({
      h5_info: {
        type: 'Wap',
        wap_url: process.env.BASE_URL,
        wap_name: '智源论坛'
      }
    })
  }

  params.sign = generateSign(params)
  // 调用统一下单 API...
}

支付宝 H5 支付

// lib/alipay.ts
import AlipaySdk from 'alipay-sdk'

const alipay = new AlipaySdk({
  appId: process.env.ALIPAY_APP_ID,
  privateKey: process.env.ALIPAY_PRIVATE_KEY,
  alipayPublicKey: process.env.ALIPAY_PUBLIC_KEY,
  signType: 'RSA2'
})

export async function createAlipayWapPay(order) {
  const result = await alipay.exec('alipay.trade.wap.pay', {
    bizContent: {
      out_trade_no: order.orderNo,
      total_amount: order.amount.toFixed(2),
      subject: order.productName,
      product_code: 'QUICK_WAP_WAY'
    },
    notify_url: `${process.env.BASE_URL}/api/pay/alipay/notify`,
    return_url: `${process.env.BASE_URL}/orders/${order.id}/success`
  })

  return result
}

你将学到

• Next.js 14 全栈开发能力
• Server Components 最佳实践
• Server Actions 替代 API 路由
• Prisma 数据库操作
• 完整电商项目实战经验
• 支付系统集成（微信 + 支付宝）
• 部署到 Vercel 生产环境