Next.js 启动应用程序时运行函数/脚本

Question

我有一个（服务器端）function 我想在第一次启动我的 next.js 服务器时运行。 通常我会在我的package.json脚本定义中做这样的事情： node./path/to/script.js && next start 。 但是有问题的脚本从“webpacked”代码中导入了几个资源，所以这并不容易。 （我知道可以使用--experimental-modules在 node.js 中打开 es6 支持，但这会带来自己的问题，我宁愿不要 go 进入那个兔子洞）

到目前为止，我拥有的最佳解决方案是创建一个 api 端点来运行这些脚本，然后在启动后手动点击该端点。 但这似乎是一种黑客攻击，如果有人发现这个端点，它可能会被用于某种 DoS 攻击。

有没有更好的解决方案，只允许注册一个函数/回调以在应用程序启动时运行？ 我想一个可能的地方是next.config.js ，但我在可能的设置列表中看不到任何可能的地方。

Answer 1

我猜你可以在 next.config 文件中使用 webpack 配置来注册一个新插件并在构建完成后运行它。

module.exports = {
    webpack: (config, options) => {
        config.plugins.push(
            {
                apply: (compiler) => {
                    compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
                        console.log(".. Run after build")
                    });
                }
            }    
        )
        return config
    },
}

Answer 2

输入代码后是否可以运行api？

_app.js

const MyApp({pageProps}) {
   useEffect(() => {
   /* call to run API on app mount */
      return ( /* Call to clean up after app unmounted*/);
   },[])

   return (
      <Component {...pageProps} />
   );
}
export default MyApp;

另一种解决方案可能是在应用程序的索引/入口点上使用 Next 的getServerSideProps或getStaticProps

index.js

export default function foo({props}) {
   /* Do something */
   return( /* return something to renderer */);
}

export function getServerSideProps() {
   const caller = fetch(/* Return from running API endpoint*/)
   return (
      props: caller;
   )
}

Next.js 中的两个 get* 函数都将在组件呈现之前运行，以确保已获取数据。 它们用于获取数据，但我不明白为什么它们不能用作黑客来强制 API 在启动附近运行。

Answer 3

我为 2022 年底找到的唯一解决方案是使用一些 bash 脚本。 其实很简单。 原bash回答我的开发脚本：

start_dev.sh

yarn run dev & curl -I http://localhost:3002 & wait

我的制作脚本：

开始.sh

yarn run start & curl -I http://localhost:3000 & wait

在这里，我使用 curl 来查看我的网站。 这会导致网站实际启动通常在首次访问时启动的脚本。 当然，您可以将启动脚本放在任何您想要的地方，不需要使用主页。

就我而言，我需要一些数据库准备和页面数据缓存。 所以我为此使用 NextConnect。 这里我举一个例子（我有每个页面的模拟代码和 api 路由）：

export async function getServerSideProps({ req, res }) {
    const middlewares = NextConnect().use(waitDB).use(withUser).use(withPagesCache)
    await middlewares.run(req, res);
    ...
}

我的 withUser 中间件：

export default async function (req, res, next) {
  let cookies = getCookies({ req, res });
  let { user_id, token } = cookies;
  // some logic. You are free to use your globals, your DB and so on.
  console.log("Test this middleware");

  next();
}