如何将 NextJS 应用程序中的新页面添加到 AWS Amplify 应用程序？答案

【问题标题】：How do I add a new page from a NextJS app to an AWS Amplify application?如何将 NextJS 应用程序中的新页面添加到 AWS Amplify 应用程序？
【发布时间】：2022-01-25 14:57:48
【问题描述】：

我在 NextJS 应用程序的 src/pages/foo.tsx 中添加了一个新页面

如果我访问 http://localhost:3000/foo，我可以正常加载页面

但是，当我将其推送到我的 Amplify 应用程序时，页面无法加载。

我已尝试在 Amplify 控制台中更新我的路线，但无法加载

out/foo/index.html

但是如果我尝试去那个路径它仍然不会加载

这是我的 next.config.js

/* eslint-disable import/no-extraneous-dependencies */
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  poweredByHeader: false,
  trailingSlash: true,
  basePath: '',
  // The starter code load resources from `public` folder with `router.basePath` in React components.
  // So, the source code is "basePath-ready".
  // You can remove `basePath` if you don't need it.
  reactStrictMode: true,
});

有人可以帮忙吗？

谢谢

【问题讨论】：

标签： routes next.js aws-amplify

【解决方案1】：

你在foo.tsx 中使用了getStaticProps 函数吗？看起来您的页面已经存在，但尚未重新验证。尝试更改 getStaticProps 中 revalidate 属性的时间。你可以在这里查看文档https://nextjs.org/docs/api-reference/data-fetching/get-static-props#revalidate

【讨论】：