// 自动代码分割示例
import dynamic from "next/dynamic"

const DynamicComponent = dynamic(() => import("../components/Heavy"), {
  loading: () => <p>加载中...</p>,
  ssr: false, // 可选：禁用服务端渲染
})

export default function Page() {
  return (
    <div>
      <h1>我的页面</h1>
      <DynamicComponent />
    </div>
  )
}

app/
├── page.tsx              // 首页 (/)
├── about/page.tsx        // 关于页 (/about)
├── blog/
│   ├── page.tsx          // 博客列表 (/blog)
│   ├── [slug]/page.tsx   // 文章详情 (/blog/[slug])
│   └── loading.tsx       // 加载状态
├── layout.tsx            // 根布局
└── not-found.tsx         // 404页面

// 服务端组件 - 默认行为，用于数据获取
export default async function BlogPage() {
  // 直接在组件中进行异步数据获取
  const posts = await getPosts()

  return (
    <div>
      <h1>博客文章</h1>
      {posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  )
}

// 客户端组件 - 需要交互时使用
'use client'
import { useState } from 'react'

export default function InteractiveSearch() {
  const [query, setQuery] = useState('')

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="搜索文章..."
    />
  )
}

// ❌ 旧方式（Pages Router）
export async function getStaticProps() {
  const posts = await fetchPosts()
  return { props: { posts } }
}

// ✅ 新方式（App Router）
async function getPosts() {
  const res = await fetch("https://api.example.com/posts", {
    next: { revalidate: 3600 }, // ISR: 1小时后重新验证
  })
  return res.json()
}

// 静态缓存：构建时生成，永不过期
fetch("/api/config", { cache: "force-cache" })

// 动态缓存：每次请求都获取最新数据
fetch("/api/user", { cache: "no-store" })

// ISR缓存：定时重新验证
fetch("/api/posts", { next: { revalidate: 60 } })

// 标签缓存：按需重新验证
fetch("/api/posts", { next: { tags: ["posts"] } })

// tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      // 自定义设计系统
      colors: {
        brand: {
          50: "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a8a",
        },
      },
      typography: {
        DEFAULT: {
          css: {
            maxWidth: "none",
            color: "#374151",
            '[data-theme="dark"] &': {
              color: "#d1d5db",
            },
          },
        },
      },
    },
  },
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
  darkMode: ["class", '[data-theme="dark"]'],
}

// styled-jsx示例（Next.js内置）
export default function StyledComponent() {
  return (
    <div className="container">
      <h1>标题</h1>
      <style jsx>{`
        .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 2rem;
        }
        h1 {
          color: #333;
          font-size: 2rem;
        }
        @media (max-width: 768px) {
          .container {
            padding: 1rem;
          }
        }
      `}</style>
    </div>
  )
}

// app/api/posts/route.ts
import { NextRequest, NextResponse } from "next/server"
import { prisma } from "@/lib/prisma"

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams
  const page = parseInt(searchParams.get("page") || "1")
  const limit = parseInt(searchParams.get("limit") || "10")

  try {
    const posts = await prisma.post.findMany({
      where: { published: true },
      orderBy: { createdAt: "desc" },
      skip: (page - 1) * limit,
      take: limit,
      include: {
        author: { select: { name: true, avatar: true } },
        _count: { select: { comments: true, likes: true } },
      },
    })

    return NextResponse.json({
      success: true,
      data: posts,
      pagination: {
        page,
        limit,
        hasMore: posts.length === limit,
      },
    })
  } catch (error) {
    return NextResponse.json(
      { success: false, error: "Internal server error" },
      { status: 500 }
    )
  }
}

export async function POST(request: NextRequest) {
  const body = await request.json()

  // 验证请求数据
  if (!body.title || !body.content) {
    return NextResponse.json(
      { success: false, error: "Missing required fields" },
      { status: 400 }
    )
  }

  try {
    const post = await prisma.post.create({
      data: {
        title: body.title,
        content: body.content,
        authorId: body.authorId,
      },
    })

    return NextResponse.json({ success: true, data: post }, { status: 201 })
  } catch (error) {
    return NextResponse.json(
      { success: false, error: "Failed to create post" },
      { status: 500 }
    )
  }
}

// middleware.ts
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { verify } from "jsonwebtoken"

export function middleware(request: NextRequest) {
  // API路由保护
  if (request.nextUrl.pathname.startsWith("/api/admin")) {
    const token = request.headers.get("authorization")?.replace("Bearer ", "")

    if (!token) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

    try {
      const decoded = verify(token, process.env.JWT_SECRET!)
      // 将用户信息添加到请求头
      const response = NextResponse.next()
      response.headers.set("x-user-id", (decoded as any).userId)
      return response
    } catch {
      return NextResponse.json({ error: "Invalid token" }, { status: 401 })
    }
  }

  // 页面访问控制
  if (request.nextUrl.pathname.startsWith("/admin")) {
    const session = request.cookies.get("session")

    if (!session) {
      return NextResponse.redirect(new URL("/login", request.url))
    }
  }

  return NextResponse.next()
}

export const config = {
  matcher: ["/api/admin/:path*", "/admin/:path*"],
}

import Image from 'next/image'

// 基础用法
<Image
  src="/hero-image.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority // 重要图片预加载
/>

// 响应式图片
<Image
  src="/responsive.jpg"
  alt="Responsive"
  fill
  style={{ objectFit: 'cover' }}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>

// 动态图片
<Image
  src={`/uploads/${post.coverImage}`}
  alt={post.title}
  width={800}
  height={400}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ..."
/>

// app/layout.tsx
import { Inter, Noto_Sans_SC } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter'
})

const notoSansSC = Noto_Sans_SC({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-noto-sans-sc',
  weight: ['300', '400', '500', '700']
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh-CN" className={`${inter.variable} ${notoSansSC.variable}`}>
      <body className="font-sans antialiased">
        {children}
      </body>
    </html>
  )
}

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  avatar    String?
  posts     Post[]
  comments  Comment[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Post {
  id          String    @id @default(cuid())
  title       String
  slug        String    @unique
  content     String
  excerpt     String?
  published   Boolean   @default(false)
  publishedAt DateTime?
  author      User      @relation(fields: [authorId], references: [id])
  authorId    String
  comments    Comment[]
  tags        Tag[]     @relation("PostTags")
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt

  @@index([published, publishedAt])
}

// lib/db.ts
import { PrismaClient } from "@prisma/client"

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined
}

export const prisma = globalForPrisma.prisma ?? new PrismaClient()

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma

// 类型安全的查询构建
export async function getPostsWithStats(userId?: string) {
  return prisma.post.findMany({
    where: {
      published: true,
      ...(userId && { authorId: userId }),
    },
    include: {
      author: {
        select: { name: true, avatar: true },
      },
      tags: true,
      _count: {
        select: {
          comments: true,
          likes: true,
        },
      },
    },
    orderBy: { publishedAt: "desc" },
  })
}

// app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"
import CredentialsProvider from "next-auth/providers/credentials"
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { prisma } from "@/lib/prisma"
import bcrypt from "bcryptjs"

const handler = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID!,
      clientSecret: process.env.GITHUB_SECRET!,
    }),
    CredentialsProvider({
      name: "credentials",
      credentials: {
        email: { label: "Email", type: "email" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) return null

        const user = await prisma.user.findUnique({
          where: { email: credentials.email },
        })

        if (!user || !user.password) return null

        const isValid = await bcrypt.compare(
          credentials.password,
          user.password
        )

        if (!isValid) return null

        return {
          id: user.id,
          email: user.email,
          name: user.name,
          image: user.avatar,
        }
      },
    }),
  ],
  session: {
    strategy: "jwt",
  },
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.role = user.role
      }
      return token
    },
    async session({ session, token }) {
      session.user.id = token.sub!
      session.user.role = token.role as string
      return session
    },
  },
  pages: {
    signIn: "/login",
    signUp: "/register",
  },
})

export { handler as GET, handler as POST }

// app/blog/[slug]/page.tsx
import { Metadata } from "next"

interface Props {
  params: { slug: string }
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await getPost(params.slug)

  if (!post) {
    return {
      title: "文章未找到",
    }
  }

  return {
    title: `${post.title} - 我的博客`,
    description: post.excerpt,
    keywords: post.tags.map((tag) => tag.name),
    authors: [{ name: post.author.name }],
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: "article",
      publishedTime: post.publishedAt,
      authors: [post.author.name],
      images: post.coverImage
        ? [
            {
              url: post.coverImage,
              width: 1200,
              height: 630,
              alt: post.title,
            },
          ]
        : undefined,
    },
    twitter: {
      card: "summary_large_image",
      title: post.title,
      description: post.excerpt,
      images: post.coverImage ? [post.coverImage] : undefined,
    },
  }
}

export default function BlogPost({ post }: { post: Post }) {
  const structuredData = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    description: post.excerpt,
    image: post.coverImage,
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
    author: {
      '@type': 'Person',
      name: post.author.name,
      image: post.author.avatar
    },
    publisher: {
      '@type': 'Organization',
      name: '我的博客',
      logo: {
        '@type': 'ImageObject',
        url: 'https://myblog.com/logo.png'
      }
    }
  }

  return (
    <article>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
      />
      <header>
        <h1>{post.title}</h1>
        <time dateTime={post.publishedAt}>
          {new Date(post.publishedAt).toLocaleDateString('zh-CN')}
        </time>
      </header>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  )
}

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  images: {
    domains: ["images.unsplash.com", "github.com"],
    formats: ["image/avif", "image/webp"],
  },
  env: {
    CUSTOM_KEY: process.env.CUSTOM_KEY,
  },
  async headers() {
    return [
      {
        source: "/api/:path*",
        headers: [
          { key: "Access-Control-Allow-Origin", value: "*" },
          { key: "Access-Control-Allow-Methods", value: "GET,POST,PUT,DELETE" },
        ],
      },
    ]
  },
  async redirects() {
    return [
      {
        source: "/old-blog/:slug",
        destination: "/blog/:slug",
        permanent: true,
      },
    ]
  },
}

module.exports = nextConfig

# Dockerfile
FROM node:18-alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install --frozen-lockfile

FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm install -g pnpm && pnpm build

FROM node:18-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
USER nextjs
EXPOSE 3000
ENV PORT 3000
CMD ["node", "server.js"]

// app/layout.tsx
'use client'
import { Analytics } from '@vercel/analytics/react'
import { SpeedInsights } from '@vercel/speed-insights/next'

export function WebVitals() {
  useEffect(() => {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(console.log)
      getFID(console.log)
      getFCP(console.log)
      getLCP(console.log)
      getTTFB(console.log)
    })
  }, [])

  return null
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        {children}
        <WebVitals />
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  )
}

// __tests__/api/posts.test.ts
import { GET, POST } from "@/app/api/posts/route"
import { NextRequest } from "next/server"

// Mock Prisma
jest.mock("@/lib/prisma", () => ({
  prisma: {
    post: {
      findMany: jest.fn(),
      create: jest.fn(),
    },
  },
}))

describe("/api/posts", () => {
  beforeEach(() => {
    jest.clearAllMocks()
  })

  describe("GET", () => {
    it("返回文章列表", async () => {
      const mockPosts = [{ id: "1", title: "测试文章", content: "内容" }]

      ;(prisma.post.findMany as jest.Mock).mockResolvedValue(mockPosts)

      const request = new NextRequest("http://localhost:3000/api/posts")
      const response = await GET(request)
      const data = await response.json()

      expect(response.status).toBe(200)
      expect(data.success).toBe(true)
      expect(data.data).toEqual(mockPosts)
    })
  })

  describe("POST", () => {
    it("创建新文章", async () => {
      const newPost = { title: "新文章", content: "新内容", authorId: "user1" }

      ;(prisma.post.create as jest.Mock).mockResolvedValue({
        id: "2",
        ...newPost,
      })

      const request = new NextRequest("http://localhost:3000/api/posts", {
        method: "POST",
        body: JSON.stringify(newPost),
      })

      const response = await POST(request)
      const data = await response.json()

      expect(response.status).toBe(201)
      expect(data.success).toBe(true)
      expect(data.data.title).toBe(newPost.title)
    })
  })
})

// e2e/blog.spec.ts
import { test, expect } from "@playwright/test"

test.describe("博客功能", () => {
  test("用户可以浏览文章列表", async ({ page }) => {
    await page.goto("/blog")

    await expect(page.locator("h1")).toContainText("博客文章")
    await expect(page.locator("[data-testid=post-card]")).toHaveCount(3)

    // 检查文章卡片内容
    const firstPost = page.locator("[data-testid=post-card]").first()
    await expect(firstPost.locator("h2")).toBeVisible()
    await expect(firstPost.locator("[data-testid=post-excerpt]")).toBeVisible()
  })

  test("用户可以查看文章详情", async ({ page }) => {
    await page.goto("/blog")

    // 点击第一篇文章
    await page.locator("[data-testid=post-card]").first().click()

    await expect(page.locator("article h1")).toBeVisible()
    await expect(page.locator("article time")).toBeVisible()
    await expect(page.locator("[data-testid=post-content]")).toBeVisible()
  })

  test("用户可以搜索文章", async ({ page }) => {
    await page.goto("/blog")

    await page.fill("[data-testid=search-input]", "Next.js")
    await page.press("[data-testid=search-input]", "Enter")

    await expect(page.locator("[data-testid=post-card]")).toHaveCount(1)
    await expect(page.locator("[data-testid=post-card] h2")).toContainText(
      "Next.js"
    )
  })
})