创建第一个页面

// Next.js 15.x
export default function HomePage() {
  return <h1>欢迎来到 Next.js</h1>
}

// Next.js 15.x

interface PageProps {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}

export default async function BlogPost({ params, searchParams }: PageProps) {
  const { slug } = await params
  const { page } = await searchParams

  return (
    <article>
      <h1>文章: {slug}</h1>
      <p>页码: {page || '1'}</p>
    </article>
  )
}

// Next.js 15.x
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: '关于我们',
  description: '了解我们的团队和使命',
}

export default function AboutPage() {
  return (
    <main>
      <h1>关于我们</h1>
      <p>这是一个 Next.js 示例项目。</p>
    </main>
  )
}

// Next.js 15.x
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex min-h-screen">
      <aside className="w-64 bg-gray-100 p-4">
        <nav>
          <ul className="space-y-2">
            <li>
              <a href="/dashboard">概览</a>
            </li>
            <li>
              <a href="/dashboard/analytics">分析</a>
            </li>
            <li>
              <a href="/dashboard/settings">设置</a>
            </li>
          </ul>
        </nav>
      </aside>
      <section className="flex-1 p-6">{children}</section>
    </div>
  )
}

// Next.js 15.x
export default function DashboardPage() {
  return (
    <div>
      <h1 className="text-2xl font-bold">仪表盘</h1>
      <p>欢迎回来！</p>
    </div>
  )
}

// Next.js 15.x
export default function AnalyticsPage() {
  return (
    <div>
      <h1 className="text-2xl font-bold">数据分析</h1>
      <p>查看你的数据统计。</p>
    </div>
  )
}

// Next.js 15.x
'use client'

import { useEffect } from 'react'

export default function DashboardTemplate({
  children,
}: {
  children: React.ReactNode
}) {
  useEffect(() => {
    // 每次路由切换都会执行
    console.log('页面访问:', new Date().toISOString())
  }, [])

  return <div className="fade-in">{children}</div>
}

// Next.js 15.x
export default function ProductsLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="container mx-auto py-8">
      <h1 className="text-3xl font-bold mb-6">产品中心</h1>
      {children}
    </div>
  )
}

// Next.js 15.x
import './products.css'

export default function ProductsTemplate({
  children,
}: {
  children: React.ReactNode
}) {
  return <div className="animate-fade-in">{children}</div>
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// Next.js 15.x
import Link from 'next/link'

const products = [
  { id: '1', name: 'MacBook Pro', price: 12999 },
  { id: '2', name: 'iPhone 15', price: 7999 },
  { id: '3', name: 'AirPods Pro', price: 1999 },
]

export default function ProductsPage() {
  return (
    <ul className="grid grid-cols-3 gap-4">
      {products.map((product) => (
        <li key={product.id} className="border rounded-lg p-4">
          <Link href={`/products/${product.id}`}>
            <h2 className="font-semibold">{product.name}</h2>
            <p className="text-gray-600">¥{product.price}</p>
          </Link>
        </li>
      ))}
    </ul>
  )
}

// Next.js 15.x

interface PageProps {
  params: Promise<{ id: string }>
}

const products: Record<string, { name: string; price: number; desc: string }> =
  {
    '1': { name: 'MacBook Pro', price: 12999, desc: '专业级笔记本电脑' },
    '2': { name: 'iPhone 15', price: 7999, desc: '新一代智能手机' },
    '3': { name: 'AirPods Pro', price: 1999, desc: '主动降噪耳机' },
  }

export default async function ProductDetailPage({ params }: PageProps) {
  const { id } = await params
  const product = products[id]

  if (!product) {
    return <p>产品不存在</p>
  }

  return (
    <div className="max-w-md">
      <h2 className="text-2xl font-bold">{product.name}</h2>
      <p className="text-3xl text-blue-600 my-4">¥{product.price}</p>
      <p className="text-gray-600">{product.desc}</p>
      <button className="mt-4 px-6 py-2 bg-blue-600 text-white rounded">
        加入购物车
      </button>
    </div>
  )
}

'use client'

import { usePathname } from 'next/navigation'

export default function DashboardLayout({ children }) {
  const pathname = usePathname()

  return (
    <div>
      <nav>
        <a
          href="/dashboard"
          className={pathname === '/dashboard' ? 'active' : ''}
        >
          首页
        </a>
      </nav>
      {children}
    </div>
  )
}

// Next.js 15.x
interface LayoutProps {
  children: React.ReactNode
  params: Promise<{ slug: string }>
}

export default async function BlogLayout({ children, params }: LayoutProps) {
  const { slug } = await params

  return (
    <div>
      <nav>当前文章: {slug}</nav>
      {children}
    </div>
  )
}