Lee has introduced a library for uniformly managing meta information on every page in Next.js projects.
Creation of next-pathmap
Lee and the team at 한국신용데이터 have built a library, next-pathmap, which parses the project folder according to the page directory or extension pattern and creates a JSON object containing meta information for each path. This was developed to manage page names for PV event tracking, PV tracking status, and service categories consistently in a single file and to avoid omissions.
Key Features
Feature 1: Utilizing Next.js File System-Based Routing
next-pathmap makes the most of the file system structure of pages in the Next.js framework to parse page component files and organize them in a structured format.
Feature 2: Library Setup via Prompt Input or Configuration File
The library allows customization of various settings such as the root location, pathmap saving location and filename, parsing scope, mapping of meta data structure for pages, and aliases for top-level route categories.
module.exports = PathmapConfig;
Feature 3: Outputting the pathmap as JSON
The result of the library's parsing is a JSON file that includes essential data like aliases, tracking status, categories, and queries for each route.
{
"/insurance/join/[:product]": {
"alias": "보험/가입/{{product}}",
"trackPageView": true,
"categories": ["금융/보험"],
"query": ["product"]
}
}
Feature 4: Automation Integration
The next-pathmap library is designed for simplicity: it parses the file system and outputs a JSON formatted data file. Lee's objective was to make pathmap generation automatic, linked to git hooks or CI tools, to enforce consistent management of pages and related events.
Problem-Solving Approach
After encountering issues with Korean pathname conventions derived from directory structures and issues related to Next.js routing especially with Korean pathnames not being supported, necessitating additional mapping, Lee envisioned a tool that could automatically convert filesystem structure into a pathmap.
The library aims to solve problems such as link breakages due to double encoding, tracking PageView events in Korean names, and discrepancies between managed rules and actual codebase when there are changes in page creation or route names.
Development of next-pathmap
The development involves parsing the project's directory and file names beneath the routes, including dynamic segments like [param]/index.js and saving the complete pathmap to the specified location.
The library uses other libraries like globby, inquirer, and json-format to achieve its goal.
Configuration Options
next-pathmap offers two ways for configuration—via a .config.js file or via an interactive command-line interface.
Execution with npx Command
To make the library executable through the npx command, a script file that can run on Node.js interpreter is written, and its reference is provided in the package.json with the "bin" key.
Setting Up next-pathmap in a Project
Setting up next-pathmap involves creating a config file at the root of the project, setting up scripts to execute next-pathmap, and running the library to parse and generate the pathmap.
Git Hook Integration
The library can be integrated with git hooks to ensure that page meta information is not omitted before pushing changes.
Developer Reflection
Lee reflects on the importance of asset and source code management in service development. By considering enhancements and more efficient management methods, developers can grow and contribute to better development practices.
In essence, next-pathmap is a tool created to address the complexities of managing meta information for pages within Next.js applications, offering automation and consistency, driving improved asset management and development workflow.
Tags:
Next.jsLibraryAutomationConfigurationPathmap
https://www.blog.kcd.co.kr/직접-만든-라이브러리로-next-js-페이지-메타-정보-관리하기-4e71a830b41d