extract route traversin/parsing webpack plugin to separate module

[Guria]

You have implemented a good module which can be used for more potential use cases. I personally would like to have it for making custom navigation that will be auto generated from available routes. I see that you can have an can pass a callback option to NextJSRoutesPlugin. This callback will accept parsed data from routes and will do code generation.

class NextJSRoutesPlugin implements WebpackPluginInstance {

  apply() {
    // ...
    if (this.context.dev) {
      const watcher = watch(watchDirs, {
        persistent: true,
      });
      // batch changes
      const generate = debounce(() => this.processRoutes, 50);
      watcher.on("add", generate).on("unlink", generate);
    } else {
      this.processRoutes();
    }
  }
  collectRoutes() {
    const defaultOptions = {
      // ...
    };
    const opts = {
      ...defaultOptions,
      ...this.options,
    };
    // ...
    return nextRoutes(files);
  }
  processRoutes: () => {
    this.options.callback(this.collectRoutes)
  }
}

  config.plugins.push(
    new NextJSRoutesPlugin(nextConfig, context, {
      ...options,
      callback: (routes) => {
        const generated = generate(routes, options);
        writeFileSync(outputFilepath, generated);        
      }
    })
  );

[tatethurston]

Hey @Guria this is a cool idea, I’d be happy to look into supporting this use case. Could you tell me a little more about the code generation you would like to do?

[Guria]

I'd like to have something like on the https://ariakit.org/

It is also made with Next JS https://github.com/ariakit/ariakit/blob/main/website/build-pages/pages-webpack-plugin.js

In my case I don't need a full text search, but I will definetely will need some meta information like titles, descriptions, etc. It may be defined in route pages files or collocated in yml files. So potentially we will need to also be able to inject logic in traversing and not only just receiving final result.