使用 Next.js 在构建时运行脚本答案

【问题标题】：Running scripts at build-time with Next.js使用 Next.js 在构建时运行脚本
【发布时间】：2020-09-14 17:42:54
【问题描述】：

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

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

编辑：我有这样的想法，它也应该适用于模块：

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

  return config;
}

【问题讨论】：

标签： reactjs webpack next.js

【解决方案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 路由作为您在 robots.txt 中的 XML 文件位置提供。看到这个 - https://github.com/toughyear/blog/blob/master/pages/api/posts-sitemap.js

【讨论】：

我想生成多个 XML 文件，这样 API 路由就可以工作了。但是，我只想在构建时生成一次这些文件。我更新了原始答案以更好地解释我的想法。
为什么说使用API创建静态资产更好？我认为您的上述选项是最好的，因为它会在编译时发生，这意味着您不必运行 node.js 来为您的站点地图和您的 rss 提要提供服务吗？使用 api 路由有什么好处？

【解决方案2】：

如果你使用自定义的 babel.config.js，你可以使用babel macros，但这会在 Nextjs 12 中退出 SWC。我正在寻找与 SWC 兼容的替代方案。目前唯一的解决方法是使用“预构建”脚本。

您可以在调用 next build 之前包装您的 npm run start 脚本以运行您想要的任何内容

【讨论】：