基于 Next.js 的 Jamstack / SSR / SPA 混合实践指南

npx create-next-app@latest my-mixed-app \
  --typescript \
  --eslint \
  --tailwind \
  --src-dir \
  --app

src/
  app/
    layout.tsx
    page.tsx
    globals.css
  ...

src/app/
  (marketing)/
    layout.tsx
    page.tsx          # 首页 /
    pricing/
      page.tsx       # /pricing
    features/
      page.tsx       # /features

  (content)/
    blog/
      page.tsx       # /blog
      [slug]/
        page.tsx     # /blog/[slug]
    docs/
      layout.tsx
      page.tsx       # /docs
      [slug]/
        page.tsx     # /docs/[slug]

  (app)/
    layout.tsx
    dashboard/
      page.tsx       # /app/dashboard
    settings/
      page.tsx       # /app/settings

  (public)/
    u/
      [slug]/
        page.tsx     # /u/[slug]

  api/                # Route Handlers
    ...

// 默认静态渲染（Static Rendering）
export const metadata = {
  title: 'My Product – Ship Faster with Next.js',
  description: 'Jamstack + SSR + SPA hybrid SaaS starter built with Next.js.',
}

export default async function HomePage() {
  // 静态获取一些「慢变」数据，例如来自 CMS 的文案
  const cmsData = await fetch('https://cms.example.com/home', {
    // 默认就是 cache:'force-cache'，可以不写
    cache: 'force-cache',
    next: { revalidate: 60 * 60 }, // 每小时重新拉一次（ISR）
  }).then((res) => res.json())

  return (
    <main>
      <section>{cmsData.heroTitle}</section>
      {/* 统计数据可以用 Client Component + client fetch 渐进增强 */}
      {/* <StatsWidget /> */}
    </main>
  )
}

// src/app/(content)/blog/page.tsx

export const revalidate = 60 * 10 // 10 分钟更新一次列表

async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 * 10 }, // 再保险
  })
  if (!res.ok) throw new Error('Failed to fetch posts')
  return res.json() as Promise<Array<{ slug: string; title: string }>>
}

export default async function BlogIndexPage() {
  const posts = await getPosts()
  return (
    <main>
      <h1>Blog</h1>
      <ul>
        {posts.map((p) => (
          <li key={p.slug}>
            <a href={`/blog/${p.slug}`}>{p.title}</a>
          </li>
        ))}
      </ul>
    </main>
  )
}

// src/app/(content)/blog/[slug]/page.tsx

export const revalidate = 60 * 60 // 每小时重新生成一次页面

type Post = {
  slug: string
  title: string
  content: string
}

async function getAllSlugs(): Promise<string[]> {
  const res = await fetch('https://api.example.com/posts/slugs', {
    next: { revalidate: 60 * 60 },
  })
  return res.json()
}

export async function generateStaticParams() {
  const slugs = await getAllSlugs()
  return slugs.map((slug) => ({ slug }))
}

async function getPost(slug: string): Promise<Post | null> {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { revalidate: 60 * 60 },
  })
  if (res.status === 404) return null
  if (!res.ok) throw new Error('Failed to fetch post')
  return res.json()
}

export default async function BlogPostPage({
  params,
}: {
  params: { slug: string }
}) {
  const post = await getPost(params.slug)
  if (!post) {
    // 也可以配合 notFound()
    return <div>404: Post not found</div>
  }

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  )
}

// app/api/revalidate/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { revalidatePath, revalidateTag } from 'next/cache'

export async function POST(req: NextRequest) {
  const body = await req.json()
  const secret = req.headers.get('x-cms-signature')

  if (secret !== process.env.CMS_WEBHOOK_SECRET) {
    return new NextResponse('Invalid signature', { status: 401 })
  }

  // 更新博客列表和详情
  revalidatePath('/blog')
  revalidateTag('posts')

  return NextResponse.json({ revalidated: true })
}

// src/app/(public)/u/[slug]/page.tsx
import { cookies } from 'next/headers'

export const dynamic = 'force-dynamic' // 明确声明为动态渲染

type Profile = {
  name: string
  bio: string
  avatarUrl: string
  stats: {
    followers: number
    items: number
  }
}

async function getProfile(slug: string): Promise<Profile> {
  const res = await fetch(`https://api.example.com/users/${slug}`, {
    cache: 'no-store', // 禁用缓存，每次都拉最新数据
  })
  if (!res.ok) throw new Error('Failed to fetch profile')
  return res.json()
}

export default async function UserProfilePage({
  params,
}: {
  params: { slug: string }
}) {
  const profile = await getProfile(params.slug)
  const cookieStore = cookies()
  const theme = cookieStore.get('theme')?.value ?? 'light'

  return (
    <main data-theme={theme}>
      <header>
        <img src={profile.avatarUrl} alt={profile.name} />
        <h1>{profile.name}</h1>
        <p>{profile.bio}</p>
      </header>
      <section>
        <div>Followers: {profile.stats.followers}</div>
        <div>Items: {profile.stats.items}</div>
      </section>
    </main>
  )
}

// src/app/(app)/layout.tsx
import { ReactNode } from 'react'
import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'

export const dynamic = 'force-dynamic' // 登录态敏感

export default async function AppLayout({ children }: { children: ReactNode }) {
  const cookieStore = cookies()
  const token = cookieStore.get('token')?.value

  if (!token) {
    redirect('/login')
  }

  // 如果要减少 SSR 压力，可以只校验 token 是否存在，而不在这里做大量数据查询

  return (
    <html>
      <body>
        <div className="app-shell">
          <aside>/* 左侧菜单 */</aside>
          <main>{children}</main>
        </div>
      </body>
    </html>
  )
}

// src/app/(app)/dashboard/page.tsx
'use client'

import { useQuery } from '@tanstack/react-query'
// 或者使用 SWR：import useSWR from 'swr'

async function fetchDashboard() {
  const res = await fetch('/api/app/dashboard') // Next Route Handler
  if (!res.ok) throw new Error('Failed to load')
  return res.json()
}

export default function DashboardPage() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['dashboard'],
    queryFn: fetchDashboard,
  })

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error...</div>

  return (
    <div>
      <h1>Dashboard</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  )
}

// src/app/api/app/dashboard/route.ts
import { NextRequest, NextResponse } from 'next/server'

export async function GET(req: NextRequest) {
  // 可从 cookies / headers 取 userId，然后查数据库
  const data = {
    revenue: 12345,
    users: 321,
    // ...
  }
  return NextResponse.json(data)
}

import Link from 'next/link'
import './globals.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <header className="top-nav">
          <Link href="/">Logo</Link>
          <nav>
            <Link href="/features">Features</Link>
            <Link href="/pricing">Pricing</Link>
            <Link href="/blog">Blog</Link>
            <Link href="/docs">Docs</Link>
            <Link href="/app/dashboard">App</Link>
          </nav>
        </header>
        {children}
      </body>
    </html>
  )
}