// Next.js 15.x

interface Post {
  id: number
  title: string
  body: string
}

async function getPosts(): Promise<Post[]> {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')

  if (!res.ok) {
    throw new Error('获取文章失败')
  }

  return res.json()
}

export default async function PostsPage() {
  const posts = await getPosts()

  return (
    <ul className="space-y-4">
      {posts.slice(0, 10).map((post) => (
        <li key={post.id}>
          <h2 className="font-bold">{post.title}</h2>
          <p className="text-gray-600">{post.body}</p>
        </li>
      ))}
    </ul>
  )
}

// Next.js 15.x
import { db } from '@/lib/db'

export default async function UsersPage() {
  // 直接使用 ORM 查询
  const users = await db.user.findMany({
    select: {
      id: true,
      name: true,
      email: true,
    },
    orderBy: { createdAt: 'desc' },
    take: 20,
  })

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

// Next.js 15.x
import { readdir, readFile } from 'fs/promises'
import { join } from 'path'
import matter from 'gray-matter'

async function getDocs() {
  const docsDir = join(process.cwd(), 'content', 'docs')
  const files = await readdir(docsDir)

  const docs = await Promise.all(
    files
      .filter((file) => file.endsWith('.md'))
      .map(async (file) => {
        const content = await readFile(join(docsDir, file), 'utf-8')
        const { data, content: body } = matter(content)
        return { slug: file.replace('.md', ''), ...data, body }
      })
  )

  return docs
}

export default async function DocsPage() {
  const docs = await getDocs()
  return <div>{/* 渲染文档列表 */}</div>
}

import { cache } from 'react'

// 使用 cache 包装确保请求去重
export const getUser = cache(async (id: string) => {
  const res = await fetch(`https://api.example.com/users/${id}`)
  return res.json()
})

// 预加载函数
export const preloadUser = (id: string) => {
  void getUser(id)
}

import { getUser, preloadUser } from '@/lib/data'
import { UserProfile } from '@/components/UserProfile'

export default async function UserPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params

  // 提前开始获取数据
  preloadUser(id)

  return <UserProfile userId={id} />
}

import { getUser } from '@/lib/data'

export async function UserProfile({ userId }: { userId: string }) {
  // 复用已经开始的请求
  const user = await getUser(userId)

  return <div>{user.name}</div>
}

// Next.js 15.x
import { StatsCard } from '@/components/StatsCard'

async function getStats() {
  const res = await fetch('https://api.example.com/stats')
  return res.json()
}

export default async function DashboardPage() {
  const stats = await getStats()

  return (
    <div className="grid grid-cols-3 gap-4">
      <StatsCard title="用户数" value={stats.users} />
      <StatsCard title="订单数" value={stats.orders} />
      <StatsCard title="收入" value={`¥${stats.revenue}`} />
    </div>
  )
}

import { UserAvatar } from '@/components/UserAvatar'

export default function Page() {
  return (
    <div>
      <UserAvatar userId="1" />
      <UserAvatar userId="2" />
      {/* 请求会自动去重 */}
    </div>
  )
}

import { cache } from 'react'
import { db } from './db'

export const getUser = cache(async (id: string) => {
  return db.user.findUnique({ where: { id } })
})

import { cache } from 'react'

export interface Post {
  slug: string
  title: string
  content: string
  publishedAt: string
}

const API_URL = 'https://api.example.com'

export const getPosts = cache(async (): Promise<Post[]> => {
  const res = await fetch(`${API_URL}/posts`, {
    next: { revalidate: 60 },
  })
  return res.json()
})

export const getPost = cache(async (slug: string): Promise<Post | null> => {
  const res = await fetch(`${API_URL}/posts/${slug}`, {
    next: { tags: [`post-${slug}`] },
  })

  if (!res.ok) return null
  return res.json()
})

import Link from 'next/link'
import { getPosts } from '@/lib/posts'

export default async function BlogPage() {
  const posts = await getPosts()

  return (
    <div className="space-y-6">
      <h1 className="text-3xl font-bold">博客</h1>
      <ul className="space-y-4">
        {posts.map((post) => (
          <li key={post.slug}>
            <Link
              href={`/blog/${post.slug}`}
              className="block p-4 border rounded hover:bg-gray-50"
            >
              <h2 className="font-semibold">{post.title}</h2>
              <time className="text-sm text-gray-500">{post.publishedAt}</time>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

import { notFound } from 'next/navigation'
import { getPost, getPosts } from '@/lib/posts'

export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map((post) => ({ slug: post.slug }))
}

export default async function PostPage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await getPost(slug)

  if (!post) {
    notFound()
  }

  return (
    <article className="prose max-w-none">
      <h1>{post.title}</h1>
      <time>{post.publishedAt}</time>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  )
}