具有静态导出功能的 next.js 应用程序路由器中的动态页面

Question

我正在创建一个需要托管在 aws s3 存储桶上的应用程序，我们希望将其部署为静态应用程序，因此我们现在在 next.js 配置文件中使用

output: "export"

，我们希望使用客户端组件创建动态页面，但是它显示缺少

generateStaticParams

函数错误，我们不能使用这个，因为我们不知道什么 url slug 可以提前出现，所以有什么方法可以在 next.js 中实现这种行为

Answer 1

在 Next.js 中，使用输出：“export”将应用程序导出为静态 HTML/CSS/JS 包，这意味着它不支持服务器端渲染 (SSR) 或依赖于运行时数据的 API 路由等动态功能。由于您需要创建动态页面并且提前不知道 slugs，因此这对于纯静态导出来说具有挑战性。

1。客户端获取动态页面

您可以完全在客户端处理动态内容。您可以使用带有包罗万象的动态路由（例如，[slug].js）的 React 客户端组件，而不是使用generateStaticParams，并在该页面内根据当前客户端的 URL 获取数据。

示例：

// pages/[slug].js
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

const DynamicPage = () => {
  const router = useRouter();
  const { slug } = router.query;
  const [data, setData] = useState(null);

  useEffect(() => {
    if (slug) {
      // Fetch data dynamically based on the slug
      fetch(`/api/data/${slug}`)
        .then(res => res.json())
        .then(setData);
    }
  }, [slug]);

  return (
    <div>
      {data ? (
        <div>{data.content}</div>
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
};

export default DynamicPage;

这样，您的静态导出仅包含基本页面，动态内容将在页面呈现后加载到客户端。

2。将静态站点生成 (SSG) 与增量静态再生 (ISR) 结合使用 如果并非绝对需要纯静态导出，则可以使用 ISR。在 ISR 中，您可以预先生成某些页面，并根据请求在运行时生成其他页面。这可以在更动态的场景中工作，但需要您托管在 Vercel 等平台上或支持 ISR 而不是 S3 的其他服务器上。

3.处理无法识别的 URL 的 404 错误 如果未找到 slug（例如，客户端尝试获取无效 URL），您可以使用客户端逻辑来处理 404 页面或重定向。

通过在客户端加载页面后获取数据，您可以避免导出的限制。如果您想了解有关此方法的更多详细信息，请告诉我！