https://github.com/wonkooklee/next-pathmap
Pathmap Generator for Next.js Pages
https://github.com/wonkooklee/next-pathmap
metadata-management next next-pathmap nextjs path pathmap pathmapping route
Last synced: 4 months ago
JSON representation
Pathmap Generator for Next.js Pages
- Host: GitHub
- URL: https://github.com/wonkooklee/next-pathmap
- Owner: wonkooklee
- Created: 2023-05-03T12:41:29.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-14T11:34:17.000Z (over 2 years ago)
- Last Synced: 2025-09-07T05:28:37.662Z (5 months ago)
- Topics: metadata-management, next, next-pathmap, nextjs, path, pathmap, pathmapping, route
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/next-pathmap?activeTab=readme
- Size: 77.1 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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.
## Requirements
- node.js >= 14.0.0
## Core dependencies
- [globby](https://github.com/sindresorhus/globby)
- [inquirer](https://github.com/SBoudrias/Inquirer.js)
- [json-format](https://github.com/luizstacio/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.
```sh
$ npx next-pathmap
```
or
```sh
$ npm install -D next-pathmap
```
You can also enter the command directly through the global installation.
```sh
$ 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)
```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;
```
### 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
```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"]
}
}
```
### Example
```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
- Powered by Bash in iPad