本文旨在指导开发者在 next.js 13+ 的 app router 架构下，如何正确地为服务器组件（包括页面组件和通用组件）进行类型定义。文章将解释 `nextpage` 类型不再适用于 app router 的原因，并提供针对 `page.tsx` 文件中异步服务器组件以及其他通用服务器组件的类型声明方法，强调参数（如 `params` 和 `searchparams`）的类型化以及 typescript 的类型推断能力。
Next.js App Router 中服务器组件的类型定义与最佳实践
随着 Next.js 13 引入 App Router 架构，组件的组织方式和渲染机制发生了显著变化，特别是服务器组件（Server Components）的引入。这使得传统的类型定义方式，如 NextPage，不再适用于新的模式。理解如何在 App Router 中正确地为服务器组件定义类型，对于构建健壮、可维护的应用至关重要。
理解 NextPage 类型的局限性
在 Next.js 的 pages 目录架构中，NextPage 类型通常用于为页面组件提供类型检查，它期望组件是一个返回 ReactElement 的同步函数组件。然而，在 App Router 中，page.tsx 文件默认导出的是服务器组件，它们可以是异步函数，返回一个 Promise。这种差异导致 NextPage 类型与 App Router 中的服务器组件不兼容，尝试将其应用于异步服务器组件会导致 TypeScript 错误，例如：
Type '() => Promise' is not assignable to type 'NextPage'. Type '() => Promise' is not assignable to type 'FunctionComponent & { getInitialProps?(context: NextPageContext): {} | Promise; }'. Type '() => Promise' is not assignable to type 'FunctionComponent'. Type 'Promise' is missing the following properties from type 'ReactElement': type, props, keyts(2322)
这个错误明确指出，NextPage 期望一个 FunctionComponent，而异步服务器组件返回的是一个 Promise，这与 FunctionComponent 的返回类型不匹配。因此，在 App Router 中，我们不应再使用 NextPage 来为服务器组件定义类型。
App Router 中页面组件 (page.tsx) 的类型定义
在 App Router 中，page.tsx 文件作为页面的入口，其默认导出的组件会自动接收 Next.js 提供的特定 props，主要包括 params 和 searchParams。这些 props 允许您访问路由参数和 URL 查询参数。
1. 定义页面组件的 Props 接口
首先，我们需要定义一个接口来描述这些传入的 props：
// app/page.tsx 或 app/[slug]/page.tsxinterface PageProps { /** * 路由参数，例如在 `app/[slug]/page.tsx` 中，`params` 会包含 `{ slug: string }`。 */ params: { [key: string]: string | string[] | undefined }; /** * URL 查询参数，例如 `?name=value&id=1` 会在 `searchParams` 中显示为 `{ name: 'value', id: '1' }`。 */ searchParams: { [key: string]: string | string[] | undefined };}
请注意，params 和 searchParams 的结构会根据您的路由定义和实际 URL 查询参数而变化。上述定义提供了一个通用的结构。在实际项目中，您可以根据需要进一步细化 params 的具体类型，例如：
// app/products/[id]/page.tsxinterface ProductPageProps { params: { id: string }; // 明确指定 id 参数为字符串 searchParams: { [key: string]: string | string[] | undefined };}
2. 为同步页面组件定义类型
如果您的页面组件是同步的，可以直接将 PageProps 应用到组件函数上：
import CoffeesList from '@/components/CoffeesList';import FiltersDropdown from '@/components/FiltersDropdown';import SearchCoffee from '@/components/SearchCoffee';interface PageProps { params: { slug?: string }; // 示例：如果路由有可选的 slug searchParams: { [key: string]: string | string[] | undefined };}export default function Page({ params, searchParams }: PageProps) { // 组件逻辑 return ( {/* */} );}
3. 为异步页面组件定义类型
App Router 的一个强大特性是允许页面组件直接作为异步函数，在组件内部进行数据获取。在这种情况下，类型定义方式与同步组件相同，只需在函数声明前添加 async 关键字：
import CoffeesList from '@/components/CoffeesList';import FiltersDropdown from '@/components/FiltersDropdown';import SearchCoffee from '@/components/SearchCoffee';import { getData } from '@/lib/api'; // 假设的异步数据获取函数interface CoffeeInterface { id: string; name: string; // ... 其他咖啡属性}interface PageProps { params: { slug?: string }; searchParams: { [key: string]: string | string[] | undefined };}export default async function Page({ params, searchParams }: PageProps) { const { products }: { products: CoffeeInterface[] } = await getData( "/products" ); return ( );}
关于返回类型推断：在大多数情况下，TypeScript 能够根据 JSX 的返回推断出组件的返回类型（JSX.Element 或 Promise）。因此，您通常不需要显式地声明组件函数的返回类型。
App Router 中通用服务器组件的类型定义
除了 page.tsx 文件，您还可以在 App Router 中创建其他可复用的服务器组件。这些组件的行为与普通的 React 函数组件类似，主要关注其接收的 props。
1. 定义组件的 Props 接口
为组件定义一个清晰的 props 接口是最佳实践：
// components/CoffeesList.tsxinterface CoffeesListProps { coffees: CoffeeInterface[]; // ... 其他 props}
2. 为通用服务器组件定义类型
将定义的 props 接口应用到组件函数上。这些组件可以是同步的，也可以是异步的，具体取决于它们是否需要进行异步操作（如数据获取）。
同步通用服务器组件：
// components/CoffeesList.tsximport React from 'react';interface CoffeeInterface { id: string; name: string; // ... 其他咖啡属性}interface CoffeesListProps { coffees: CoffeeInterface[];}export default function CoffeesList({ coffees }: CoffeesListProps) { return ( {coffees.map(coffee => ( {coffee.name} ))} );}
异步通用服务器组件：
如果您的通用组件也需要进行异步操作，例如在组件内部获取数据（尽管通常建议在页面组件或布局组件中进行顶级数据获取），您可以将其定义为异步函数：
// components/AsyncDataDisplay.tsximport React from 'react';interface DataItem { id: string; value: string;}interface AsyncDataDisplayProps { fetchUrl: string;}export default async function AsyncDataDisplay({ fetchUrl }: AsyncDataDisplayProps) { const response = await fetch(fetchUrl); const data: DataItem[] = await response.json(); return ( {data.map(item => ( {item.value}
))} );}
同样，对于通用服务器组件，TypeScript 通常也能很好地推断其返回类型，无需显式声明。
总结与注意事项
告别 NextPage: 在 Next.js 13+ 的 App Router 中，请勿使用 NextPage 类型来定义服务器组件。它专为 pages 目录下的客户端页面组件设计。聚焦 Props 类型: 对于 App Router 中的所有服务器组件，核心的类型定义工作在于为其接收的 props 定义清晰的接口。页面组件 (page.tsx) 特殊 Props: page.tsx 组件会自动接收 params 和 searchParams。根据路由结构和 URL 查询参数，为这些 props 定义合适的类型。异步组件支持: App Router 完全支持将服务器组件（包括页面组件和通用组件）定义为 async 函数，以便在组件内部直接进行数据获取。TypeScript 类型推断: 在大多数情况下，TypeScript 能够自动推断出组件的返回类型（JSX.Element 或 Promise），因此通常不需要显式声明返回类型。结构清晰: 保持 props 接口定义清晰、具体，有助于提高代码的可读性和可维护性。
遵循这些指导原则，您将能够有效地在 Next.js App Router 环境中为服务器组件进行类型定义，从而构建出更健壮、更易于维护的应用程序。
以上就是Next.js App Router 中服务器组件的类型定义与最佳实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1535315.html
微信扫一扫 
支付宝扫一扫 
