React

Improving DTS Viewer ― Multiple Citation Trees, Hierarchical Navigation, and XML Browser Display

Introduction In the previous article, the Kouigenji Monogatari Text Database DTS API was updated to the 1.0 specification, including the addition of a waka (tanka poem) Citation Tree. This article covers improvements made to the viewer application “DTS Viewer” that consumes this API. Three main improvements were made: Multiple Citation Tree support ― Correct tree parameter passing Hierarchical navigation display ― Switching from card grid to table layout Inline XML display ― Leveraging the mediaType parameter 1. Multiple Citation Tree Support Problem DTS 1.0 allows defining multiple Citation Trees per resource. Kouigenji Monogatari has two trees: “page/line” and “waka” (poems). ...

March 8, 2026 · 4 min · Nakamura

The Pitfall of JavaScript Operator Precedence - Investigating a Vercel Build Error

Introduction When trying to deploy a Next.js application to Vercel, we encountered a problem where the build succeeded locally but failed on Vercel. The error messages were vague, making it difficult to identify the cause. This article shares the process from discovering the problem to resolving it, and summarizes what we learned about JavaScript operator precedence. Symptoms Error Message Error occurred prerendering page "/en/smells/22-03" [Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details.] Notable Behavior Local build succeeds, but Vercel build fails Errors occur on different pages each time (22-03, 24-03, 25-04, etc.) Error details are hidden in production builds Discovering the Cause While investigating multiple files, we found the following code pattern: ...

January 28, 2026 · Updated: January 28, 2026 · 4 min · Nakamura

How to Use @elastic/react-search-ui with React 19 + Next.js 15.5

Introduction When trying to use @elastic/react-search-ui in a project using React 19 and Next.js 15, you may encounter the following dependency error: npm error ERESOLVE could not resolve npm error peer react@">= 16.8.0 < 19" from @elastic/react-search-ui@1.23.1 This article explains the cause of this problem and the solution in detail. Cause of the Problem The peer dependency of @elastic/react-search-ui@1.23.1 was set to react@">= 16.8.0 < 19", which did not support React 19. ...

January 19, 2026 · Updated: January 19, 2026 · 3 min · Nakamura

Record of Migrating mirador-annotations to Mirador 4.x

Background mirador-annotations is a plugin that adds annotation functionality to the IIIF viewer Mirador. The previous project configuration was as follows: Build tool: nwb (Create React App based) UI library: Material-UI v4 Mirador: 3.x React: 17.x However, the following issues had arisen: nwb maintenance discontinued - nwb had not been updated for a long time, and dependency conflicts occurred frequently npm install failures - Old dependencies made setup in new environments difficult Security vulnerabilities - Numerous vulnerability warnings from outdated packages To resolve these issues, we decided to migrate to: ...

January 13, 2026 · Updated: January 13, 2026 · 4 min · Nakamura

Japanese Localization of RAWGraphs 2.0

Introduction I localized and published a Japanese version of the data visualization tool RAWGraphs. https://rawgraphs-ja.vercel.app/ RAWGraphs is an open-source web application that can transform complex data into beautiful visualizations. Without any coding, you can create various charts simply by dragging and dropping CSV or JSON data. What is RAWGraphs? RAWGraphs is a data visualization tool developed by DensityDesign Research Lab in Italy. https://www.rawgraphs.io/ Key features: ...

December 3, 2025 · Updated: December 3, 2025 · 4 min · Nakamura

Using Rekichizu with Next.js

Overview I looked into how to use Rekichizu (historical maps) with Next.js, so here are my notes. Background In the following article, I introduced how to use “Rekichizu.” Then, I learned that the “nationwide version was released” on April 4, 2025. https://rekichizu.jp/ So I investigated how to integrate it into an application built with Next.js. Demo App I prototyped the following application. https://rekichizu-next.vercel.app/ja/ For the investigation, I aimed to reproduce features such as map switching, overlay, and search functionality provided on the official site. For this implementation, I used the following React library. ...

April 9, 2025 · Updated: April 9, 2025 · 1 min · Nakamura

Mirador 4 Plugin Development: Enabling Initial Angle Settings in the Image Rotation Plugin

Overview I enabled initial angle settings in the Mirador 4 plugin for rotating images at arbitrary angles. The repository is here. https://github.com/nakamura196/mirador-rotation-plugin The demo page is here. You can rotate images with initial settings for angle and bounding box. https://nakamura196.github.io/mirador-rotation-plugin/ Background The following article explains this plugin. However, there was an issue where initial angle values could not be provided. As introduced in the following article, it appeared that Mirador 4’s standard functionality allows providing initial angle values. ...

March 26, 2025 · Updated: March 26, 2025 · 3 min · Nakamura

Developing a Viewer with Next.js + CETEIcean + React TEI Router

Overview This is a memo on developing a TEI/XML viewer combining Next.js, CETEIcean, and React TEI Router. Background CETEIcean is a JavaScript library that converts TEI/XML to HTML5. https://github.com/TEIC/CETEIcean React TEI Router is a library that enables structured display of TEI/XML using React components, based on CETEIcean. It is described as follows: https://github.com/pfefferniels/react-teirouter TEI for React using CETEIcean and routes By combining these, I created a viewer that can customize and display TEI/XML in Next.js. ...

March 2, 2025 · Updated: March 2, 2025 · 3 min · Nakamura

Building a Multilingual Static Site with Next.js

Introduction This article was generated by GPT-4o. It explains how to build a multilingual static site using Next.js. In particular, it focuses on a configuration where the main language has no URL prefix while other languages have prefixes. It also includes configuration for deploying to GitHub Pages. Project Setup First, create a Next.js project. Initialize the project using create-next-app. npx create-next-app@latest next-intl-ssg Installing Required Packages Install next-intl for multilingual support. ...

February 28, 2025 · Updated: February 28, 2025 · 2 min · Nakamura

Enabled Email-Based Registration in the Mirador 3 Firebase-Linked Annotations Plugin

Overview I have been developing a Firebase-linked annotations plugin for Mirador 3. Previously, only Google account login functionality was provided, but I have now added email-based login functionality. Feature Introduction Below is the screen after pressing the login button. With email-based login, new account creation is possible. After login, user information is now displayed. Clicking the icon displays a logout button. Summary I hope this serves as a helpful reference for creating and sharing annotations using IIIF. ...

February 21, 2025 · Updated: February 21, 2025 · 1 min · Nakamura

Using @react-three/fiber and drei with Next 15 (Using React 19)

Overview When using @react-three/fiber with Next 15 (which uses React 19), the following is stated: R3F v8 is not compatible with React 19 or Next 15, which uses React 19. Use the R3F v9 RC instead which can be installed with @react-three/fiber@rc. However, when I added the following for mouse controls, it did not work well with @react-three/fiber@rc. https://www.npmjs.com/package/@react-three/drei This is a note on how to address this issue. ...

February 6, 2025 · Updated: February 6, 2025 · 1 min · Nakamura

Trying aleph-r3f

Overview In the following article, I introduced the Aleph 3D viewer. After further investigation, I also discovered the following repository. https://github.com/aleph-viewer/aleph-r3f It is described as follows, with the key difference being its use of react-three-fiber and shadcn/ui. Aleph is a 3D object viewer and annotation/measurement tool built with react-three-fiber and shadcn/ui The annotation features also appeared to be improved, as shown below. In this article as well, I use 3D data of the “Ishibuchi Family Globe” published in the Kikuchi City Digital Archive. ...

December 29, 2024 · Updated: December 29, 2024 · 3 min · Nakamura

Mirador 3 Plugin Development: Copying a Window

Overview I created a plugin for Mirador 3 that copies a window. Note that this functionality is already provided by the following plugin. https://github.com/ProjectMirador/mirador-plugin-demos Therefore, this plugin was created to learn the plugin development process. I hope this plugin serves as a useful reference from that perspective. Here is a screenshot. The source code is available here. https://github.com/nakamura196/mirador-copy-window-plugin The demo site is available here. https://nakamura196.github.io/mirador-copy-window-plugin/ Development Notes For developing this plugin, I first cloned the following repository and made modifications to it. ...

July 19, 2023 · Updated: July 19, 2023 · 3 min · Nakamura

Using the onClose Prop

When using onBackdropClick in MUI’s Dialog component, the following warning occurred. Warning: Failed prop type: The prop `onBackdropClick` of `ForwardRef(Dialog)` is deprecated. Use the onClose prop with the `reason` argument to handle the `backdropClick` events. The warning message is about the deprecated prop onBackdropClick of the Dialog component. This means that this prop is being used somewhere in your code but is no longer supported or recommended. The warning suggests using the onClose prop instead. ...

July 11, 2023 · Updated: July 11, 2023 · 1 min · Nakamura