VISUALIZATION SOFTWARE FOR HIERARCHICAL TREE OF WEB COMPONENTS FROM NEXT.JS PAGE ROUTER SOURCE CODE

• Main Author: Fikri Ranjabi, Muhammad
• Format: Final Project
• Language: Indonesia
• Online Access: https://digilib.itb.ac.id/gdl/view/85012
• Institution: Institut Teknologi Bandung

This final project produces software for visualizing the hierarchical tree of web components from the Next.js page router source code. There are two visualization display options: page routes only or page routes along with the component hierarchy. This software is targeted at junior developers to help them understand the structure of React/Next.js. React is a component-based web interface development library. React is currently widely used in conjunction with the Next.js framework to simplify the development process. The modular nature of React components and file-system- based page routing in Next.js can cause the source code to become complex as the web application grows larger. Software visualization plays an important role in helping developers understand the structure of web applications. Currently, there are three popular libraries for visualizing React/Next.js, namely React Developer Tools, Next Route Visualizer, and React Bratus. However, there is no library capable of visualizing both page routes and components from the Next.js page router source code. The development process consists of three stages: data acquisition, analysis, and visualization. The data acquisition stage uses Node File System to extract the source code, searching for React files. The analysis stage uses Babel Parser. At this stage, parsing is performed to obtain the component hierarchy and page route hierarchy. The visualization stage uses React Flow to display the visualization. Testing is conducted by comparing the visualization results with the source code. The input for testing is a Reddit clone website taken from a public repository. The output of the test is the visualization of the page routes and the components within them. The test results show that the generated visualization is consistent with the Next.js source code.