reactjs 我的NextJS服务器因嵌套动态路由而崩溃

piok6c0g 于 2023-03-08 发布在 React

关注(0)|答案(1)|浏览(147)

所以我对NextJS领域还是个新手，我以前使用的是普通的React，但是我发现需要ISR，所以我来到了NextJS，因为到目前为止它是一个“不错”的过渡。
我得到的是下面的路由结构：/tutorials/minecraft/[version]/[tutorial]
现在我需要做的是使用这两个动态部件（version和tutorial）收集数据。我已经尝试了很多不同的东西，摆弄useRouter之类的东西。但它总是给我带来一些问题。
现在，这是我所拥有的（一个简化的版本，因为下面有很多内容，我知道这是非常好的）：

const getTutorial = async (version, tutorial) => {
    console.log("Server side props: " + version + " " + tutorial);
    const response = await fetch(
        `https://raw.githubusercontent.com/DaRealTurtyWurty/Minecraft-Tutorials/main/${version}/${tutorial}.json`,
        {
            next: { revalidate: 10 }
        }
    );

   return await response.json();
}

export default async function Page({ params }) {
    let tutorialData = await getTutorial(params.version, params.tutorial);
    let content = deserialize(tutorialData);

    return <div>
        {content}
    </div>
}

这是在控制台中发生的情况：

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - You have enabled experimental feature (appDir) in next.config.js.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

event - compiled client and server successfully in 1821 ms (263 modules)
wait  - compiling...
wait  - compiling /tutorials/minecraft/[version]/[tutorial]/page (client and server)...

PS E:\turtywurty-dev-next>

它只是崩溃了。没有错误或任何东西，无论是在服务器上还是浏览器上。我已经尝试了很多事情，使用路由器来获取参数等，但没有任何帮助，它仍然崩溃。
编辑：为了澄清，无论有没有getServerSideProps，都会发生同样的事情。

reactjs

来源：https://stackoverflow.com/questions/75643063/my-nextjs-server-is-crashing-with-nested-dynamic-routes

1条答案

按热度按时间

oalqel3c1#

在app目录中没有getServerSideProps导出函数来传递 prop 给你的组件，你需要自己从你的组件中获取数据并等待它。这可能看起来像这样：

// app/tutorials/minecraft/[version]/[tutorial]/page.tsx

const getData = async (version, tutorial) => {
  const response = await fetch(
    `https://raw.githubusercontent.com/DaRealTurtyWurty/Minecraft-Tutorials/main/${version}/${tutorial}.json`,
    {
      next: { revalidate: 10 },
    }
  );

  const data = await response.json();
  return {
    tutorialData: data,
  };
};

export default async function Page({ params: { version, tutorial } }) {
  const { tutorialData } = await getData(version, tutorial);
  const content = JSON.stringify(tutorialData);
  return <div>{content}</div>;
}

有关更多信息，请查看新的Nextjs 13 beta documentation

赞(0）回复(0）举报 2023-03-08

我来回答

reactjs 我的NextJS服务器因嵌套动态路由而崩溃

1条答案

相关问题

热门标签

最新问答