如何正确地在Next页面组件之间传递Props？

起因

最近在写 Next （v14 App Router）时，发现运行 next build 出现了以下错误：

Linting and checking validity of types ...Failed compile.
"src/app/home/updatelog/bugfix/page.tsx" has an invalid "default" export: Type "{ type: number; }" is not valid.

查看报错是在 Next 进行类型检查时出现的，根据给出的文件路径查看相关文件：

// updatelog/bugfix/page.tsx

export default function BugFixPage({ type }: { type: number }) {
  return <div>...</div>;
}

发现组件定义并没有错，而且传入的参数的类型也没写错。

但报错却出现了 export: Type "{ type: number; }" is not valid. ，试着取消传递参数，再重新 build 时，发现就没报错了。

在其父文件中，是这样定义的：

// updatelog/page.tsx

export default function UpdateLogPage() {
  const [updatePage, setUpdatePage] = useState<string>("/home/updatelog/newfeature")

  const renderContent = () => {
    switch (updatePage) {
      // 这样的做法是错误的❌
      case "/home/updateLog/newfeature":
        return <NewFeature type={0} />;
      case "/home/updateLog/bugfix":
        return <BugFixPage type={1} />;
      default:
        break;
    }
  }

  ...
}

溯源

由于 Next 的路由是基于文件系统的，也就是说每个页面都是一个单独的组件文件，当然这里说的”每个页面”指的是在 pages 目录下或者 app 目录下的页面。正是由于这样的特点，Next 就不能像传统的 SPA 应用一样在组件之间传递 Props 了。但这并不是说 Next 的页面组件不能接受参数，它可以接受参数，但并不能像 SPA 应用一样可以接收从另一个组件传递过来的参数。

要在 Next 中的页面之间传递属性，可以通过 getStaticProps 、 getServerSideProps、fetch 等数据获取方法

getStaticProps

仅限 Pages Router 模式下才能使用

如果需要在构建时使用 Props，则可以使用 getStaticProps 方法，它是在构建时运行的服务端函数，并返回一个对象，该对象作为 Props 传递给组件。

import type { GetStaticProps } from "next";

export const getStaticProps: GetStaticProps = async (context) => {
  const res = await fetchAPI("...");

  return {
    props: {
      result: res.data,
    },
  };
};

export default function ResultPage({ result }) {
  return (
    <div>
      {result.map((item) => {
        <div key={item.id}>{item}</div>;
      })}
    </div>
  );
}

getServerSideProps

仅限 Pages Router 模式下才能使用

如果需要在请求时使用 Props，可以使用 getServerSideProps 方法，它也是一个服务端函数，但会针对每个请求运行。

import type { GetServerSideProps } from "next";

export const getServerSideProps: GetServerSideProps = async () => {
  const res = await fetchAPI("...");

  return {
    props: {
      result: res.data,
    },
  };
};

export default function ResultPage({ result }) {
  return (
    <div>
      {result.map((item) => {
        <div key={item.id}>{item}</div>;
      })}
    </div>
  );
}

fetch

在 App Router 模式下，可以直接 fetch 来获取数据

Next 扩展了原生的 fetch Web API ，额外添加了 配置缓存 和 重新验证行为。

可以在 服务器组件(Server Component)、路由处理程序(页面目录的API路由)、服务器操作(Server Action，在服务器上执行的异步函数)

async function getData() {
  const res = await fetch("...", {
    // 配置缓存
    cache: 'force-cache',
    // 重新验证行为
    next: {
      revalidate: 3600
    },
  })

  return res.json()
}

export default async function FetchPage() {
  const data = await getData()

  return (
    <div>
      {data.map(i => {
        <div key={i}>{i}</div>
      })}
    </div>
  )
}

希望给遇到同样错误的同学一个思路。

原文链接：https://juejin.cn/post/7317132381013065738 作者：Licodeao