next-pathmap v1.1.29
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
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago