reactjs 在TypeScript中构建NextJS应用程序时是否需要NextPage

rqdpfwrv  于 2023-03-17  发布在  React
关注(0)|答案(3)|浏览(145)

在nextJS示例中,特别是显示如何将TypeScript与NextJS一起使用的示例中,它们不使用NextPage类型。
我说的文件在这里:https://github.com/vercel/next-learn-starter/blob/master/typescript-final/pages/posts/%5Bid%5D.tsx,相关代码如下:

export default function Post({
  postData
 }: {
    postData: {
    title: string
    date: string
    contentHtml: string
  }
 }) {
   return (...

我觉得可以这样写:

export default function Post : NextPage<Props> ({
  postData
 }: {
    postData: {
    title: string
    date: string
    contentHtml: string
  }
 }) {
   return (...

或者类似的东西。
我的问题是,我在NextJS站点中找不到任何关于使用导入接口NextPage的文档,特别是,下一个团队将其排除在文档之外。
我应该使用NextPage吗?

lf3rwulv

lf3rwulv1#

两个都可以。只是一种类型。
如果添加了NextPage<Props>,那么parameter中的类型声明就没有必要了,可以简化为

export default function Post : NextPage<Props> ({ postData }) {
  ...
}
2ledvvac

2ledvvac2#

我应该使用NextPage吗?
NextPage是返回值的类型,Props是函数参数的类型。
Post : NextPage<Props>
我将包括这两个,因为虽然这些可以由TS解释,但最好显式地说明它们-一些linter有强制它们包含的规则。

f4t66c6m

f4t66c6m3#

NextPage是由Next.js框架导出的类型,Next.js框架是用于构建Web应用程序的基于React的服务器端呈现(SSR)框架。它是React组件的类型别名,该组件包含用于获取服务器端呈现所需数据的getInitialProps函数。
在Next.js中定义页面组件时,建议使用下一个包中的NextPage类型,而不是定义自己的接口或类型。这有助于确保与Next.js的兼容性,并在代码编辑器中提供有用的类型检查和自动完成支持。
请参见下面的示例,HomePage是一个NextPage组件,它接受Props对象,并包含一个getInitialProps函数,该函数获取一些数据并将其作为props返回。

import { NextPage } from "next";

type Props = {
  title: string;
};

const HomePage: NextPage<Props> = ({ title }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>Welcome to my home page!</p>
    </div>
  );
};

HomePage.getInitialProps = async () => {
  // fetch some data here
  return { title: "My Home Page" };
};

export default HomePage;

相关问题