What's the recommended way to run a script at build time?

[danptr]

Probably by changing the webpack config?

[jamesmosier]

Hi @Relypete. What is the script doing?

[danptr]

A script to generate a static XML file which will be served through the /public folder.

[jamesmosier]

Could you just run it before next build?

"build": "node generate-xml.js && next build"

Otherwise, as you mentioned, you could use webpack and execute your script before the build via a plugin like this

[DeBraid]

TIL, you can run nodejs scripts at build time with webpack config. Below, in the context of sitemap generation:

Finally, override your next.config.js to run this script as part of the build process. Your generated file gets created at public/sitemap.xml which then gets moved to the root of your site (requires Next v9.0+).

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

    return config;
  }
};

via https://leerob.io/blog/nextjs-sitemap-robots cc @leerob

[leerob]

You can use a postbuild script: https://github.com/leerob/leerob.io/blob/main/package.json#L6

[sebastienbarre]

Thanks @leerob ; I ended using iamvishnusankar/next-sitemap, easy peasy.

[scottgrunerud]

@leerob Are postbuild scripts able read .env vars at build time? I have a .env file and have: postbuild: 'npx ts-node ./my-script' in my package.json but it complains that .env vars are undefined ?

[deiga]

@scottgrunerud Only if the called script has the ability to do so. AFAIK neither npx nor ts-node read .env files automatically without instructing them to

[mihaibirsan]

Unfortunately, the webpack/isServer approach this doesn't work if you use next.config.mjs...

For what it's worth, I was able to use import('./scripts/generate-sitemap.js') and it worked.

[MauriceWebb]

@danptr

For any prebuild steps, just add the "prebuild" property to your package.json's "scripts" property:

{
  ...
  "scripts": {
    "build": "next build",
    "postbuild": "node ./path-to/my-prebuild-script.mjs",
    "dev": "next dev",
    "start": "next start",
    "lint": "next lint"
  }
  ...
}

When Next.js goes to run the "build" script, the "prebuild" script will get executed first and once completed, the "build" script will execute.

As @DeBraid referenced, checkout @leerob 's tutorial on creating a dynamic sitemap. In his example, he adds the script to the "postbuild" script.

[mitchierichie]

is this documented anywhere? I can't find it

[SimplyComplexable]

@mitchierichie https://docs.npmjs.com/cli/v6/using-npm/scripts#pre--post-scripts

[mitchierichie]

@mitchierichie https://docs.npmjs.com/cli/v6/using-npm/scripts#pre--post-scripts

Hey, thanks. 😅

[kcrwfrd]

The formerly helpful link to a tutorial on Lee Rob's site utilizing a postbuild script now redirects. Here's an archived version of the tutorial: https://web.archive.org/web/20231206223316/https://leerob.io/blog/nextjs-sitemap-robots#dynamic-sitemaps

[janigowski]

You may also be interested in this tool to fetch & save data in build time:
https://www.npmjs.com/package/next-plugin-preval

Use cases:

The primary mechanism Next.js provides for static data is getStaticProps — which is a great feature and is the right tool for many use cases. However, there are other use cases for static data that are not covered by getStaticProps.

Site-wide data: if you have static data that's required across many different pages, getStaticProps is a somewhat awkward mechanism because for each new page, you'll have to re-fetch that same static data. For example, if you use getStaticProps to fetch content for your header, that data will be re-fetched on every page change.

Static data for API routes: It can be useful to pre-evaluate data fetches in API routes to speed up response times and offload work from your database. getStaticProps does not work for API routes while next-plugin-preval does.

De-duped and code split data: Since next-plugin-preval behaves like importing JSON, you can leverage the optimizations bundlers have for importing standard static assets. This includes standard code-splitting and de-duping.

Zero runtime: Preval files don't get sent to the browser, only their outputted JSON.

[SimplyComplexable]

This is really cool, but is there a way to run scripts within the project? I'm using a Typescript project with various dependencies and the script I need to run is written in that architecture. I've tried using ts-node to run it, but keep running into issues. I really just want to use the final webpack config from the project to run the script, but I can't figure out a way to do that. Any suggestions?

[shamoons]

Same - would love to keep it all consolidated