Selective static html export of pages in NextJS

Question

I am working on a NextJS project where we are planning to do static HTML export of pages as described here.

Here, Is the scenario I want to have worked:

Say we have already statically generated the following pages.

about/product1

about/product2

about/product3

During the course of the day, the availability of product1 has changed. Is there a way to only do a static export of about/product1 without touching the other pages which have been previously exported.

Answer 1

Based on your example, you should follow these steps:

Step 1

Create a configuration file to set up a custom exportMap:

// next.config.js
module.exports = {
  exportPathMap: async function(
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    return {
      // only include the pages that you want to export
      'about/product1': { page: 'about/product1' },
    }
  },
}

Step 2

Build and export making sure to set a different output folder. For instance, if your build and export script is called bexport and you want to name your new export folder as "out2" you would use:

yarn bexport -o out2

Warning: if you don't specify a different output folder, only about/product1 will be reexported to the original output folder, but about/product2 and about/product3 would be erased because they're not included in the current exportMap setup.

Step 3

Move the reexported file to the folder that contains all the exported pages to overwrite the previous version of about/product1:

mv out2/about/product1.html out/about/