|
14 | 14 | <br /> |
15 | 15 | <br /> |
16 | 16 |
|
| 17 | +`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. |
| 18 | +It was created to manage all the metadata for each page in one file or to use as a hashmap. |
| 19 | + |
| 20 | +<br /> |
| 21 | + |
17 | 22 | ## Requirements |
18 | 23 |
|
19 | 24 | - node.js >= 14.0.0 |
20 | 25 |
|
| 26 | +<br /> |
| 27 | + |
21 | 28 | ## Core dependencies |
22 | 29 |
|
23 | 30 | - [globby](https://github.com/sindresorhus/globby) |
24 | 31 | - [inquirer](https://github.com/SBoudrias/Inquirer.js) |
25 | 32 | - [json-format](https://github.com/luizstacio/json-format) |
26 | 33 |
|
27 | | -## How to use |
| 34 | +<br /> |
| 35 | + |
| 36 | +## Installations |
28 | 37 |
|
29 | | -npx script running fashion. |
| 38 | +You can run the binary without installation via the npx command. Or you can use it by installing it as a dependency. |
30 | 39 |
|
31 | 40 | ```sh |
32 | | -npx next-pathmap # cannot define config file. |
| 41 | +$ npx next-pathmap |
| 42 | +``` |
33 | 43 | or |
34 | | -npm install next-pathmap |
| 44 | +```sh |
| 45 | +$ npm install -D next-pathmap |
| 46 | +``` |
| 47 | +You can also enter the command directly through the global installation. |
| 48 | +```sh |
| 49 | +$ npm install -g next-path |
| 50 | +$ next-path |
35 | 51 | ``` |
36 | 52 |
|
37 | | -## Configuration vs. Cli Interactions |
| 53 | +<br /> |
38 | 54 |
|
39 | | -To configure required properties you should define either configuration in `pathmap.config.json` or `via CLI-input`. |
| 55 | +## Configurations |
40 | 56 |
|
41 | | -### pathmap.config.json |
| 57 | +To configure required properties you should define either use `pathmap.config.json` or configure via command-line input. |
| 58 | +If `pathmap.config.json` file is detected at the root of your project, script will use automatically as a configuration. |
42 | 59 |
|
43 | | -```json |
44 | | -{ |
45 | | - "pathToPages": "src/pages", |
46 | | - "pathToSave": "path/path.json", |
47 | | - "includes": ["**/*.page.{ts,tsx}"], |
48 | | - "excludes": ["!node_modules"], // remember, path expression in excludes must start with exclamation mark. |
49 | | - "schema": { |
50 | | - "query": [] |
51 | | - // any key:value pairs.. |
52 | | - } |
53 | | -} |
| 60 | +<br /> |
| 61 | + |
| 62 | +### 1. `pathmap.config.js` (Recommended) |
| 63 | + |
| 64 | +```js |
| 65 | +/** @type {import('next-pathmap/config').PathmapConfig} */ |
| 66 | +const PathmapConfig = { |
| 67 | + pathToPages: "src/pages", |
| 68 | + pathToSave: "src/pathmap/pathmap.json", |
| 69 | + includes: ["**/*.page.{ts,tsx}"], |
| 70 | + excludes: ["!**/_*.{ts,tsx}", "!**/[A-Z]*.{ts,tsx}", "!api"], |
| 71 | + schema: { |
| 72 | + /* properties you want */ |
| 73 | + }, |
| 74 | + categories: [ |
| 75 | + { |
| 76 | + /* first matching segment map of the path */ |
| 77 | + key: value, |
| 78 | + }, |
| 79 | + { |
| 80 | + /* second matching segment map of the path */ |
| 81 | + key: value, |
| 82 | + }, |
| 83 | + // and so on... |
| 84 | + ], |
| 85 | +}; |
| 86 | + |
| 87 | +module.exports = PathmapConfig; |
54 | 88 | ``` |
55 | 89 |
|
56 | | -### Interactive CLI Dialogs. |
| 90 | +<br /> |
57 | 91 |
|
58 | | -```sh |
| 92 | +### 2. Configure with command-line interface |
| 93 | + |
| 94 | +You can configure with command-line interface unless you don't have configuration file. |
| 95 | +You can select only basic options compared to setting via config file. |
| 96 | + |
| 97 | +``` |
59 | 98 | ? Enter the path to the '/pages' directory. src/pages |
60 | 99 | ? Enter the destination to save jsonized pathmap file. pathmap/pathmap.json |
61 | 100 | ? includes: **/*.page.{ts,tsx} |
62 | 101 | ? excludes: **/[!_]*.{ts,tsx}, **/[!A-Z]*.page.{ts,tsx}, !api |
| 102 | +. |
| 103 | +. |
63 | 104 | ``` |
64 | 105 |
|
| 106 | +<br /> |
| 107 | + |
65 | 108 | ## Result |
66 | 109 |
|
| 110 | +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. |
| 111 | + |
67 | 112 | ```json |
68 | 113 | { |
69 | | - "/": { |
70 | | - "alias": "", |
71 | | - "trackPageView": true, |
72 | | - "query": [] |
73 | | - }, |
74 | | - "/services/loan": { |
75 | | - "alias": "", |
76 | | - "trackPageView": true, |
77 | | - "query": [] |
78 | | - } |
| 114 | + "/services/insurance": { |
| 115 | + "alias": "serv-insurance-page-viewed", |
| 116 | + "trackPageView": true, |
| 117 | + "categories": [ |
| 118 | + "customer-service", |
| 119 | + "insurance/main" |
| 120 | + ], |
| 121 | + "query": [] |
| 122 | + }, |
| 123 | + "/services/loan": { |
| 124 | + "alias": "serv-loan-page-viewed", |
| 125 | + "trackPageView": true, |
| 126 | + "categories": [ |
| 127 | + "customer-service", |
| 128 | + "loan/main" |
| 129 | + ], |
| 130 | + "query": [] |
| 131 | + }, |
| 132 | + "/services/products/[id]": { |
| 133 | + "alias": "serv-prod-id-page-viewed", |
| 134 | + "trackPageView": true, |
| 135 | + "categories": [ |
| 136 | + "customer-service", |
| 137 | + "product/detail" |
| 138 | + ], |
| 139 | + "query": [ |
| 140 | + "id" |
| 141 | + ] |
| 142 | + }, |
79 | 143 | } |
80 | 144 | ``` |
81 | 145 |
|
82 | 146 | <br /> |
83 | 147 |
|
84 | 148 | © WONKOOK LEE |
| 149 | + |
| 150 | +<br /> |
0 commit comments