Next.js全栈开发：SSR/SSG实战指南

前言

Next.js是目前最流行的React全栈框架，支持SSR（服务端渲染）、SSG（静态生成）、ISR（增量静态生成）等多种渲染模式。本文介绍Next.js 14 App Router的核心用法。

一、项目初始化

# 创建项目
npx create-next-app@latest my-app
cd my-app

# 选择配置
# TypeScript: Yes
# ESLint: Yes
# Tailwind CSS: Yes
# src/ directory: Yes
# App Router: Yes

# 启动开发
npm run dev

二、App Router

# 目录结构
app/
  page.tsx          # 首页 /
  layout.tsx        # 根布局
  about/
    page.tsx        # /about
  blog/
    page.tsx        # /blog
    [slug]/
      page.tsx      # /blog/:slug (动态路由)
  api/
    users/
      route.ts      # /api/users (API路由)

2.1 页面组件

// app/page.tsx - 首页
export default function Home() {
  return (
    <div>
      <h1>Welcome to My Site</h1>
      <p>Built with Next.js 14</p>
    </div>
  )
}

// app/blog/[slug]/page.tsx - 动态路由
export default async function BlogPost({ params }) {
  const post = await getPost(params.slug)
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  )
}

三、Server Components

Next.js 14默认使用Server Components，可以直接在组件中查询数据库：

// app/dashboard/page.tsx
import { db } from '@/lib/db'

export default async function Dashboard() {
  // 直接查询数据库（Server Component中）
  const users = await db.query('SELECT * FROM users')
  const posts = await db.query('SELECT COUNT(*) as count FROM posts')
  
  return (
    <div>
      <h1>Dashboard</h1>
      <p>Total Users: {users.length}</p>
      <p>Total Posts: {posts[0].count}</p>
    </div>
  )
}

四、API Routes

// app/api/users/route.ts
import { NextResponse } from 'next/server'
import { db } from '@/lib/db'

export async function GET() {
  const users = await db.query('SELECT * FROM users')
  return NextResponse.json(users)
}

export async function POST(request: Request) {
  const body = await request.json()
  const result = await db.query(
    'INSERT INTO users (name, email) VALUES ($1, $2)',
    [body.name, body.email]
  )
  return NextResponse.json({ id: result.insertId }, { status: 201 })
}

五、中间件

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // 认证检查
  const token = request.cookies.get('token')
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
  return NextResponse.next()
}

export const config = {
  matcher: ['/dashboard/:path*', '/api/:path*']
}

六、部署

# Vercel部署（推荐）
npm install -g vercel
vercel --prod

# Docker部署
FROM node:18-alpine AS builder
WORKDIR /app
COPY . .
RUN npm ci && npm run build

FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app/.next/standalone ./
CMD ["node", "server.js"]

总结

Next.js是当前最流行的React全栈框架，App Router让开发更简洁。Server Components可以直接查询数据库，API Routes提供后端接口，中间件处理认证和路由。

如果需要Next.js开发服务，欢迎联系17老师。

关于17老师：AI应用 · 数字化管理 · 全栈开发 · 网络安全全栈专家。联系邮箱：j.d88888888@qq.com，微信：AFIST17