reactjs - 使用 Next.js 在构建时运行脚本

Question

我想知道推荐的方法是运行一个在构建时生成一些静态 XML 文件的脚本。理想情况下，这些脚本应该是 ES 模块，这样代码就可以在这些脚本和我的 Next/React 应用程序代码之间共享。

我想我需要 customize the Webpack config但我不确定如何在那里运行使用 ES 模块(而不仅仅是使用 require)的代码。

编辑:我有这样的想法，它也应该与模块一起工作:

{
  webpack: (config, { isServer }) => {
  if (isServer) {
    require('./scripts/generate-xml');
  }

  return config;
}

Answer 1

如果您能提供更多描述性内容将会很有帮助，但据我了解，您需要在构建时为您的 NextJS 应用程序运行特定脚本。您可以使用 NextJS 提供的 getStaticProps() 函数。

// your NextJS page

function Mypage() {
  return (
    <div></div>
  )
}

// This is the function you need
export async function getStaticProps() {
// do anything you want to do at build-time
// A good way would be to call a function by importing and the function will be executed at runtime. 
}

您可以在官方文档中查看更多详细信息 - https://nextjs.org/docs/basic-features/data-fetching#typescript-use-getstaticprops

另一方面，如果您想在构建时出于 SEO 原因生成 XML，更好的方法是使用 API 路由并将该 API 路由作为您在 robot.txt 中的 XML 文件位置。看到这个 - https://github.com/toughyear/blog/blob/master/pages/api/posts-sitemap.js