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. n n p p m m e e r r r r o o r r E p R e E e S r O L r V e E a c c t o @ u " l > d = n 1 o 6 t . 8 r . e 0 s o < l v 1 e 9 " f r o m @ e l a s t i c / r e a c t - s e a r c h - u i @ 1 . 2 3 . 1 This article explains the cause of this problem and how to resolve it in detail. ...
Introduction This article explains how to integrate the research data management platform “GakuNin RDM” with a Next.js application using OAuth2. Since GakuNin RDM provides an API compatible with OSF (Open Science Framework), implementation can be based on the OSF OAuth2 flow. This article provides a detailed explanation of the implementation using next-auth and the pitfall of automatic access token refresh. What is GakuNin RDM? GakuNin RDM (Research Data Management) is a research data management service provided by the National Institute of Informatics (NII). ...
This article summarizes how to implement language switching without page reload in a multilingual application using Next.js App Router and next-intl. Environment Next.js 16 (App Router) next-intl TypeScript Configuration Overview localePrefix: ‘as-needed’ Using the localePrefix: 'as-needed' setting in next-intl, the default language does not have a URL prefix, while other languages do. Example (when the default language is Japanese): Japanese: /, /gallery, /viewer English: /en, /en/gallery, /en/viewer Implementation Steps 1. Middleware Configuration (Important) next-intl uses middleware to handle locale routing. It is important to configure the matcher so that static files are not redirected by the middleware. ...
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. ...
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. n p x c r e a t e - n e x t - a p p @ l a t e s t n e x t - i n t l - s s g Installing Required Packages Install next-intl for multilingual support. ...
Overview I created a sample repository for using clover-iiif with Next.js, so here are my notes. https://clover-iiif-demo.vercel.app/ Background clover-iiif is described as follows. https://github.com/samvera-labs/clover-iiif Extensible IIIF front-end toolkit and Manifest viewer. Accessible. Composable. Open Source. We will use this with Next.js. Data “Koui Genji Monogatari (held by the National Diet Library)” is used as sample data. https://dl.ndl.go.jp/pid/3437686 Repository It is published at the following link. https://github.com/nakamura196/clover-iiif-demo I referenced the following. ...
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. ...
Overview I created apps using the Azure OpenAI Assistants API with Gradio and Next.js, so here are my notes. Target Data I used articles published on Zenn as the target data. First, I bulk downloaded them with the following code. i f i f p u w f m r m r a r h o p o p o g l i r o m o m e s l r r e u r d a i f p u t i r s h t o w t b t t = = r e a r f o a r e f e o t x s i s q 1 l s t t r g l x s u m t . t r 4 o d 1 [ : p a i l e t o p p l m h e s m ] = o c e b a u i _ s c o = a f q i n = l n r r r + n o . o n = = k o . u m i f s e ( e t l = p p n s h e p w e p m " e r s a a i s t a a t e B s t d e r s o p h e r k c . 1 q t t i e o m i n i t r o t = s = t l a d h h n = a u l r ( t s t r t p i e p m . u u p . s t e t p r o d c p ( = e e r t . g ( e ( B s e n a l i e u x e i f e o x t e t : q s t e n n r f i q f i t s t x a q / u e a s d l " s u u n _ . _ t u d / e . [ ) a ( s d t e l d t p o ) t m z s j ' r " ) a s s S ( e a p i e t s a = t h : t ( t o c x t a f n s o r = i t a t s u l t h t u n . n t c t / e . p a ( . h l . g ( i 0 l p t x g ( s ) d , S d e ) c : e s e t e r s i o e t l s : x _ t e _ r " u v ( e : / t ( s = n w p / u s / p u p " a " a r ' z { a r o z m ) p l ] e u t l n n e i ) n r h ) s c ( a / n l ) e " t s a . . : . ) e r d s t x f t e p e t : i v l x _ c " i t o l t , p e + ( a s ' " t ? a / h h u r ' t ) s t ) m , e i [ l r c - . e n l 1 p x a e ] a i m [ } r s e ' . s t = p t e _ n a x r o a t t " k k h " ) = a ' T m ] r u ) u r e a ) 1 9 6 & p a g e = { p a g e } " Registering to the Vector Store Upload data files with the following code. ...
Overview This is a memo on using GakuNin RDM from Next.js. Background In the following article, I introduced how to authenticate with GakuNin RDM using NextAuth.js. As an extension of this, I prototyped a Next.js app that loads data from GakuNin RDM. Demo This is limited to those who can use GakuNin RDM authentication, but you can try it from the following link. https://rdm-app.vercel.app/ For example, below is a page for viewing the list of connected storage. ...
Overview This is a memo on how to use Knight Lab’s TimelineJS and StoryMapJS from Next.js. Background Knight Lab’s TimelineJS and StoryMapJS are open source tools for digital storytelling. https://knightlab.northwestern.edu/ Data We use text data from “Shibusawa Eiichi Biographical Materials” published at the following location. https://github.com/shibusawa-dlab/lab1 Repository Published at the following location. https://github.com/nakamura196/shibusawa StoryMap By preparing a component like the following, it was possible to use it from Next.js. ...
Overview This article introduces how to use LEAF Writer from Next.js. Demo You can try it from the following URL. https://leaf-writer-nextjs.vercel.app/ Below is a screenshot example. The header section is the part added using Next.js. The editor section uses LEAF Writer. The source code is available at the following link. https://github.com/nakamura196/leaf-writer-nextjs Usage Instructions are described at the following link. https://gitlab.com/calincs/cwrc/leaf-writer/leaf-writer/-/tree/main/packages/cwrc-leafwriter?ref_type=heads As a note, the div container’s id must be set to leaf-writer-container. I found that not doing so causes the styling to break. I would like to submit a pull request regarding this in the future. ...
Overview When creating an API like </api/_search>, I looked into how to create URL segments starting with underscores, so this is a personal note for future reference. Method The information was found in the following documentation. https://nextjs.org/docs/app/building-your-application/routing/colocation#:~:text=js file conventions.-,Good to know,-While not a The key point is: To create URL segments that start with an underscore, prefix the folder name with %5F (the URL-encoded form of an underscore). Example: %5FfolderName. ...
Overview I created a simple viewer that displays the contents of TEI/XML files. https://github.com/utda/tei-viewer Here is a display example targeting TEI/XML of the Koui Genji Monogatari: https://utda.github.io/tei-viewer/?u=https://kouigenjimonogatari.github.io/tei/01.xml&v=true Usage As a minimum feature, when a IIIF manifest file is associated, the Mirador viewer is displayed. The association method is based on the following format: https://github.com/TEI-EAJ/jp_guidelines/wiki/IIIF画像とのリンク Additionally, when the n attribute is given to the pb tag, a page number display feature is provided. Furthermore, for Japanese language support, when v=true is given as a query parameter, vertical text is displayed. ...
Overview Japan Search provides Web Parts, a feature that allows UI components used within Japan Search to be used as parts on websites outside of Japan Search. https://jpsearch.go.jp/static/developer/webparts/ja.html I had the opportunity to use this feature with Next.js, so here are my notes. Usage Example You can see it on the following page. https://jps-2023-next.vercel.app/jps Source Code It is published at the following URL. https://github.com/nakamura196/jps_2023_next By loading the JS file using the Script tag as shown below, I was able to display it successfully. ...