Next js 嵌套动态路由：通过 getstaticprops 获取数据并在路由之间共享数据答案

【问题标题】：Next js nested dynamic routes: data fetching via getstaticprops with shared data between routesNext js 嵌套动态路由：通过 getstaticprops 获取数据并在路由之间共享数据
【发布时间】：2021-06-26 09:09:12
【问题描述】：

我正在尝试构建一个 next.js 应用程序，其中包含嵌套的动态路由和路由之间的共享数据。文件结构如下：

-pages
  -/level1
  -/[level1_id].js
    -index.js
    -/level2
      -/[level2_id].js
        -index.js

Level2 的页面组件目前看起来是这样的（level 1 看起来基本一样）

const Level2 = ({ data }) => {

  console.log("Level2 ID:", data.data.id)

    return (
        <div >
          {data.data.id}
      </div>
    )
}

export default Level2


export const getStaticPaths = async () => {

  return {
    paths: [ { params : {slug: ['1'], level1_id: '1', level2_id: '1'}}],
    fallback: false
  }
}


export const getStaticProps = async (context) => {

  const res = await fetch(`http://localhost:3000/api/level2/${context.params.level2_id}`);
  const data = await res.json();

  return {
    props: {
      data,
    }
  }
}

API 现在只返回关卡 ID：

export default (req, res) => {
  const { level2_id } = req.query;
  const data = { id: level2_id }

  res.status(200).json({ data })
}

我的问题是：

当有人通过路径访问网站时，有没有办法在不获取客户端数据的情况下获取 level1 的数据 /level1/1/level2/1 ?

级别 2 取决于在级别 1 中获取（和静态导出）的数据（不仅仅是示例中的级别 1 的 ID）。当我在主页上从 level1/1 导航到 level1/1/level2/1 时，我只是与反应上下文共享该数据。但是，如果有人通过嵌套链接访问我的网站，则该数据显然不存在。我很想找到一种使用 getstaticprops （或类似的东西）提供它的方法，以便可以静态导出站点，而无需运行 api 和客户端数据获取。

任何帮助将不胜感激！

【问题讨论】：

您可能想阅读以下内容：github.com/vercel/next.js/discussions/11272 基本上您需要将数据获取方法抽象到一个库中。您可以使用文件系统来缓存一些数据。然后，您可以简单地在两个页面中使用您的方法。这有点乏味，但目前没有更简单的方法，我认为复杂性源于构建是并行化的，因此共享数据并不明显。
感谢您的帮助！这看起来比我希望的要复杂，但我一定会看看它。

标签： node.js reactjs next.js

【解决方案1】：

我已经实现了基于文件的缓存解决方案以供将来参考。我自己的项目需要它： jrandeniya/nextjs-ssg-contentful-cached.

它在 Typescript 中，具有构建时类型生成和 getStaticProps 和 getStaticPaths 之间的缓存调用。 Contentful 恰好是数据源，但您可以将其换成您自己的。

【讨论】：