How to use Dynamic Routing to trigger the same .js in pages?

Question

I have multiple routes for e.g:

1. /solutions/
2. /solutions/web-development/
3. /features/
4. /features/flexbox/
5. /plugins/
6. /plugins/permalink/

and so on.

I would like to run the same file (abc.js) for all of these routes. I have checked the Dynamic Routing Section of Next.js but according to that section, My understanding is that I need to create multiple directories and copy the same file on multiple instances.

Is there any way by which I can run the single file for all the DEFINED routes or for the whole site?

EDIT: I know that there is a way to do that by creating Custom Server and manually add dynamic routes BUT I am looking to achieve this without the creation of the external server.

Answer 1

I have found a way to tackle this thing. This can be done using the next.config.js file. The only thing which you needed is the page URLs and then you can apply the same file or even add conditions to apply using multiple files.

Here is the sample code:

module.exports = {
  exportPathMap: async function(
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    const paths = {};
    const pageURLs = [
      '/solutions/',
      '/solutions/web-development/',
      '/features/',
      '/features/flexbox/',
      '/plugins/',
      '/plugins/permalink/'
    ];

    var loopInit = 0;
    var loopCount = pageURLs.length;
    var url = '';
    for (loopInit = 0; loopInit < loopCount; loopInit += 1) {
      url = pageURLs[loopInit];
      switch(url) {
        case '/solutions/':
          paths[`${url}`] = {
            page: '/solutions',
            query: {
              slug: url
            }
          };
          break;
        case '/features/':
          paths[`${url}`] = {
            page: '/features',
            query: {
              slug: url
            }
          };
          break;
        default:
          paths[`${url}`] = {
            page: '/',
            query: {
              slug: url
            }
          };
          break;
      }
    }

    return paths;
  },
  exportTrailingSlash: true
};

In the above example, I have hardcoded the URLs in pageURLs variable. You can pass dynamic values in it like get Permalinks from WordPress, URL Alias from Drupal or from any other CMS or Headless CMS, etc.

In the switch case, I am applying different templates on /solutions/ and /features/. For the remaining URLs, I am applying a single template.

NOTE: page: '/' refers index.js under pages directory similarly, page: '/solutions' refers solutions.js under pages directory and so on. It can be changed/vary as per developer choice.

I have tested this solution on the 9.1.4 version of Next.js. Please refer to the Next.js documentation for further details.

1. https://nextjs.org/docs#custom-configuration
2. https://nextjs.org/docs#usage

EDITED: This solution works for both server-side rendering and Next.js export.