next-pathmap is a tool that automatically extracts paths from the pages folder of the next.js project and converts them into JSON path-maps.
It was created to manage all the metadata for each page in one file or to use as a hashmap.

Requirements

• node.js >= 14.0.0

Core dependencies

• globby
• inquirer
• json-format

Installations

You can run the binary without installation via the npx command. Or you can use it by installing it as a dependency.

$ npx next-pathmap

or

$ npm install -D next-pathmap

You can also enter the command directly through the global installation.

$ npm install -g next-path
$ next-path

Configurations

To configure required properties you should define either use pathmap.config.json or configure via command-line input.
If pathmap.config.json file is detected at the root of your project, script will use automatically as a configuration.

1. pathmap.config.js (Recommended)

/** @type {import('next-pathmap/config').PathmapConfig} */
const PathmapConfig = {
  pathToPages: "src/pages",
  pathToSave: "src/pathmap/pathmap.json",
  includes: ["**/*.page.{ts,tsx}"],
  excludes: ["!**/_*.{ts,tsx}", "!**/[A-Z]*.{ts,tsx}", "!api"],
  schema: {
    /* properties you want */
  },
  categories: [
    {
      /* first matching segment map of the path */
      key: value,
    },
    {
      /* second matching segment map of the path */
      key: value,
    },
    // and so on...
  ],
};

module.exports = PathmapConfig;

2. Configure with command-line interface

You can configure with command-line interface unless you don't have configuration file.
You can select only basic options compared to setting via config file.

? Enter the path to the '/pages' directory. src/pages
? Enter the destination to save jsonized pathmap file. pathmap/pathmap.json
? includes: **/*.page.{ts,tsx}
? excludes: **/[!_]*.{ts,tsx}, **/[!A-Z]*.page.{ts,tsx}, !api
.
.

Result

All paths in the project are mapped to a JSON object as shown below. Use it as meta information on the page by importing it or refer to it as an alias in the path.

Artifact

{
  "/services/insurance": {
    "alias": "serv-insurance-page-viewed",
    "trackPageView": true,
    "categories": ["customer-service", "insurance/main"],
    "query": []
  },
  "/services/loan": {
    "alias": "serv-loan-page-viewed",
    "trackPageView": true,
    "categories": ["customer-service", "loan/main"],
    "query": []
  },
  "/services/products/[id]": {
    "alias": "serv-prod-id-page-viewed",
    "trackPageView": true,
    "categories": ["customer-service", "product/detail"],
    "query": ["id"]
  }
}

Example

import pathmap from '@/pathmap/pathmap.json';

export default function InsurancePage() {

  const pathInfo = pathmap['/services/insurance'];
  const pageAlias = pathInfo.alias;

  trackPageView({ pageName: pathInfo.categories.join('/') })
// ...

© WONKOOK LEE