Nextjs has a static-site generation (SSG) feature that makes it possible to fetch data at build time and therefore generate already rendered pages (using getStaticProps and getStaticPaths).

Now let's say I have a blog with lots of articles that do not change, but some might get updated from time to time (especially the recent ones). I enable SSG on these articles.

Does it mean that everytime I update an article I have to rebuild the whole thing with tons of articles?

Or is there a way to tell Nextjs ≪ build only /article/[slug] as /article/123-my-title page ≫ ?

Nextjs has a static-site generation (SSG) feature that makes it possible to fetch data at build time and therefore generate already rendered pages (using getStaticProps and getStaticPaths).

Now let's say I have a blog with lots of articles that do not change, but some might get updated from time to time (especially the recent ones). I enable SSG on these articles.

Does it mean that everytime I update an article I have to rebuild the whole thing with tons of articles?

Or is there a way to tell Nextjs ≪ build only /article/[slug] as /article/123-my-title page ≫ ?

• javascript
• ecmascript-6
• frontend
• next.js

Share Improve this question Follow asked Aug 24, 2020 at 13:11 SugarMouseSugarMouse 23311 gold badge44 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You should check here the doc they show an example.

Today, we are also introducing Incremental Static Regeneration (beta), which is a mechanism to update existing pages, by re-rendering them in the background as traffic es in. Inspired by stale-while-revalidate, this ensures traffic is served uninterrupted, always statically, and the newly built page is pushed only after it's done generating.

Yes, you can do it using pageExtensions

In the current org, we have a mono repo Next JS project where we build multiple different websites (each having its own build process), accessible under the same domain but under different paths.

Let's say you need 3 different sets of files to be built, but not the entire app at once (if needed the entire app also can be built at once). You will need to categorize them by naming or renaming your files explicitly with a mon extension (Eg: .ila.tsx, .msr.tsx). You can then conditionally build only those files that match a particular extension name.

In next.config.js:

const nextConfig = {
  output: 'export',
  pageExtensions: (() => {
    const { NEXT_PUBLIC_BUILDTYPE } = process.env;
    switch (NEXT_PUBLIC_BUILDTYPE) {
      case 'ila':
        return ['ila.tsx', 'ila.ts', 'ila.js', 'ila.jsx'];
      case 'msr': 
        return ['msr.tsx', 'msr.js', 'msr.js', 'msr.jsx'];
      default:
        return ['tsx', 'ts', 'jsx', 'js'];
    }
  })()
}

Notice that we have an IIFE as the value for the property 'pageExtensions' which allows us to conditionally select the type of files we want to build. Here, we pass an ENV variable to decide that.

Good to know: Fortunately, the default case in the switch block makes sure that only those files ending with .tsx, .ts, .jsx, or .js explicitly are built and will not include .ila.tsx, .msr.js, etc although those files appear to match the one mentioned in the default case.