Next.js 服务端组件的正确类型声明指南

import { NextPage } from 'next'; // 引入NextPage类型

interface CoffeeInterface {
  id: string;
  name: string;
  // ... 其他属性
}

// 模拟数据获取函数
async function getData(path: string): Promise<{ products: CoffeeInterface[] }> {
  // 实际项目中会是API调用
  return { products: [{ id: '1', name: 'Espresso' }] };
}

// 尝试使用NextPage类型声明一个异步服务端组件
const Page: NextPage = async () => {
  const { products }: { products: CoffeeInterface[] } = await getData("/products");

  return (
    <main>
      {/* ... 组件内容 */}
      <ul>
        {products.map(coffee => (
          <li key={coffee.id}>{coffee.name}</li>
        ))}
      </ul>
    </main>
  );
};

export default Page;

// app/page.tsx 或 app/[slug]/page.tsx

interface PageProps {
  params: { [key: string]: string | string[] | undefined }; // 路由参数，如 [slug]
  searchParams: { [key: string]: string | string[] | undefined }; // URL查询参数
}

// app/page.tsx

interface PageProps {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
}

export default function Page({ params, searchParams }: PageProps) {
  // 示例：访问路由参数和查询参数
  console.log('Params:', params.slug);
  console.log('Search Params:', searchParams.query);

  return (
    <div>
      <h1>欢迎来到我的页面</h1>
      <p>Slug: {params.slug || 'N/A'}</p>
      <p>Query: {searchParams.query || 'N/A'}</p>
    </div>
  );
}

// app/page.tsx

interface CoffeeInterface {
  id: string;
  name: string;
  // ... 其他属性
}

async function getCoffeeData(): Promise<{ products: CoffeeInterface[] }> {
  // 模拟异步数据获取
  await new Promise(resolve => setTimeout(resolve, 1000));
  return { products: [{ id: 'c1', name: 'Latte' }, { id: 'c2', name: 'Cappuccino' }] };
}

interface PageProps {
  params: { slug?: string }; // 注意这里slug可能不存在
  searchParams: { [key: string]: string | string[] | undefined };
}

export default async function Page({ params, searchParams }: PageProps) {
  const { products } = await getCoffeeData();

  return (
    <main className="flex min-h-screen flex-col bg-gray-100 p-8">
      <h1 className="text-3xl font-bold mb-6">咖啡列表</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {products.map((coffee) => (
          <div key={coffee.id} className="bg-white p-4 rounded-lg shadow">
            <h2 className="text-xl font-semibold">{coffee.name}</h2>
            <p>ID: {coffee.id}</p>
          </div>
        ))}
      </div>
      {params.slug && <p className="mt-4">当前路由参数 Slug: {params.slug}</p>}
      {searchParams.sort && <p>排序方式: {searchParams.sort}</p>}
    </main>
  );
}

// components/CoffeesList.tsx (这是一个服务端组件)

interface Coffee {
  id: string;
  name: string;
}

interface CoffeesListProps {
  coffees: Coffee[];
  title?: string; // 可选属性
}

export default function CoffeesList({ coffees, title = "我们的咖啡" }: CoffeesListProps) {
  return (
    <section className="mt-8">
      <h2 className="text-2xl font-bold mb-4">{title}</h2>
      {coffees.length === 0 ? (
        <p>暂无咖啡信息。</p>
      ) : (
        <ul className="list-disc pl-5">
          {coffees.map((coffee) => (
            <li key={coffee.id} className="text-lg">
              {coffee.name}
            </li>
          ))}
        </ul>
      )}
    </section>
  );
}