Pathmap Generator for Next.js Pages
npm install next-pathmap
Pathmap Generator for 'Pages' directory of Next.js
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.
- node.js >= 14.0.0
- globby
- inquirer
- json-format
You can run the binary without installation via the npx command. Or you can use it by installing it as a dependency.
``sh`
$ npx next-pathmap`
orsh`
$ npm install -D next-pathmap`
You can also enter the command directly through the global installation.sh`
$ npm install -g next-path
$ next-path
To configure required properties you should define either use pathmap.config.json or configure via command-line input. pathmap.config.json
If file is detected at the root of your project, script will use automatically as a configuration.
`js
/* @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;
`
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
.
.
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.
`json`
{
"/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"]
}
}
js
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