next-pathmap
v1.1.29
Published
Pathmap Generator for Next.js Pages
Downloads
98
Maintainers
Readme
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
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