Nextjs

Overview I prototyped a TEI/XML file creation app using Google Cloud Vision API and GakuNin RDM, so this is a memo of that work. Background I needed an environment for creating TEI/XML files that reflect OCR results using Google Cloud Vision API. So I prototyped an environment that uses GakuNin RDM as the backend to manage files per user and execute OCR. How to Use Creating a Folder Access the following. ...

Overview I added a route registration feature to the “Rekichizu x Next.js” site. Below is a display example. References The “Rekichizu x Next.js” site is introduced in the following article. As a precedent for displaying routes using “Rekichizu”, the following example exists. https://codh.rois.ac.jp/edomi/route/ This time, I added a route creation feature based on the above example. Usage Access the site. https://rekichizu-next.vercel.app/ja/ Click “Manage My Routes”. Login is required, so log in using the button in the upper right. ...

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. ...

Overview I built a tool for adding polygon annotations to IIIF images. https://next-fb-anno.vercel.app/ This article explains this tool. Usage Below is the top page. Enter the URL of a IIIF manifest file. You can also try it using the “Use sample input” option. It uses “Hyakki Yako-zu” (Night Parade of One Hundred Demons) from the University of Tokyo General Library collection. The following annotation registration screen is displayed. ...

Overview This article explains how to add dark mode using Tailwind CSS V4 with Next.js 15 App Router. The following article was helpful as a reference. https://sujalvanjare.vercel.app/blog/dark-mode-nextjs15-tailwind-v4 As shown below, it was possible to switch between dark mode and light mode. The following is a Japanese article about the above reference, generated by ChatGPT. Learn how to implement dark mode and light mode in a Next.js 15 App Router project using Tailwind CSS V4. This step-by-step guide covers the latest changes in Tailwind V4 and Next.js 15 for achieving a seamless theme switcher! ...

Overview The following article was helpful for handling the error: “Error: Do not use . Use Image from ’next/image’ instead.” https://stackoverflow.com/questions/68203582/error-do-not-use-img-use-image-from-next-image-instead-next-js-using-ht Based on the article above, I am posting a ChatGPT-generated response below. There may be some inaccuracies, but I hope it serves as a helpful reference. Changing Next.js ESLint Rules and Configuring Flat Config Since Next.js 11, ESLint configuration has been provided by default, and the @next/next/no-img-element rule was added. This rule restricts the use of regular <img> tags and recommends using Next.js’s next/image component. ...

Overview This is a memo on how to scroll to a specific element using CETEIcean and XPath. Demo You can try it at the following URL. https://next-ceteicean-router.vercel.app/xpath/ After accessing the page and scrolling, it is displayed as follows. Obtaining the XPath The above example targets the XML file from the “Koui Genji Monogatari Text DB.” https://kouigenjimonogatari.github.io/tei/01.xml The following XPath is specified. /TEI/text[1]/body[1]/p[1]/seg[267] To obtain this XPath, you can right-click on the target element in Oxygen XML Editor and select “Copy XPath.” ...

Overview Here are my notes on how to use the Universal Viewer npm package in Next.js. Installation Install with the following command. n p m i u n i v e r s a l v i e w e r Implementation Since it uses useEffect, it appeared necessary to implement it as a client component. Also, by adding the uv class to the div tag, the CSS was applied correctly. ...

Overview In the following article, I introduced building applications using the GakuNin RDM API. In this article, I introduce how to search files in linked storage using the GakuNin RDM API. Implementation Example I implemented the search API as follows. Since directly accessing https://rdm.nii.ac.jp/api/v1/search/file/ from the client caused CORS errors, I implemented it as a Next.js API Route. i i i e } m m m x p p p p c c c c c c c c } c } c r o o o o o o o o o o o o ; o ) o e r r r r n n n n n n n n a s h e } n m h } b ; n t t t t t s G s s s s s s s p o i l , s e e , o s u t e t t t t t t t i r g a q } f s t t a " A d t r { { { a t _ t h s u , r i h d C u y n s s u q o s a a p v : l t e f } o z r o e o t : d N a g y e q r u f i c p a e i i r i , m e e d r n h a N e u e n s u l e f z c i r r " g c y l q } : , s : s t o J t e x t t c s e r s e e U a s c h s : t u , : e r S a x t h S i r = y e s r m i r t e e e q } o = " n i O t R O e f o y t = s l s o e : a { r r u , f P { t z N = R e p r u n n = T n a r e y e d f ] q a l f a O - a . e s t v n p e = p o = = : t " c d : r e i , u n e s w S T t s a s p i e c = a w u a k e t h : y f e " " " " " " " e a n e a T y i t w p o o r t r r p r e " { { d i _ { _ a l _ t d j s a a r l i t i " p o r a o n n S i a a U l a s n h _ t d { s u d a i e o c l l y y e , t , e n i i n s s e o w m R . r e t v d l s t l s l t s b h l l , z n " : n t s e s n a e L s s I = t e e e l r t : l l c ^ o _ _ e t f : g e } s i t ( e e n p n s : : i _ " e r 1 o j s _ : e ` i r . } i G t e r a I t s s d c 3 n f [ , ^ i " l o c w t " B f e j f o E r e r n ( e : o " 0 { g i 4 p , ^ b h i t c a e y s s f r n T g s q c t u s / r , , : e " t 1 s o l r h p a ( . o r o ( e . h ( r s / : n l , i " ^ o d u ( p r p j n o m } r t f u P u l i r a { d o , 0 l c e a l e a s ( m e S r r a r . o d " m : n . s a , p i r r o d " f q e o l r l s n m g e ^ 1 ^ r i c a n a " @ r : r m ) a . e ? . r : " 1 2 0 d U a $ m ( t n / o v ; m s a . n d 3 _ . 5 . : r t { s ) a e a m R e U s e r a i m 0 a 2 " 1 l i a ) ; ) x p e r R . a c c i " , l " , 2 t , o c , ; t p " q S L g r h c . , u l , 5 r n c / / n u e e c P e a s " " u { / e s a e e s t h a s c v e , , e j s e p x s s ( P r s . e r , s s r i t t i " a a T j r : o T v / - ) o f r m o p s 3 n o e a a n i a s k / i 0 " k r u u { ( l m . e a o , , e " t t a t s g n p n t n ; h h u e . e ; i : e } / " t r g t / x ` [ ; h [ e ( v 2 t , . O f t " 1 : . p u ( p / } 1 . t l " a s , 2 n i l p g e 4 e o t a e a , x n e g [ r c t s x e l c o a ) t [ i h m u ; ] o m / m t " f i f e h ) f t i n ] s ] l t / e " e s a t ) / . u ] " * t " " ; : h " 1 O ; 2 p " 4 t 2 " i 0 , o " " n 0 , s " " , 1 ; 0 1 ) 0 ; ) ; Usage Example You can try it at the following URL. (Login to GakuNin RDM is required.) ...

Overview This is a memo about prototyping a TEI/XML file editing environment using LEAF Writer and GakuNin RDM. References The following article introduced how to use LEAF Writer from Next.js. In particular, the following npm package is used. https://www.npmjs.com/package/@cwrc/leafwriter For the input/output of TEI/XML files to be edited above, GakuNin RDM is used. The following article may also be helpful regarding how to use the GakuNin RDM API from JavaScript. ...

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. ...

Overview Next.js for Drupal v2.0.0 was released on 2025/2/11. https://next-drupal.org/ https://next-drupal.org/blog/next-drupal-2-0 When I tried it out, I found that the handling of BASE_PATH required attention, so this is a memo about it. Environment Variables The sample environment variables are as follows. # # N N # D D # D E E R R R S R X X A U U R U e e T T u P P e P e q _ _ t A A q A u P I h L L u L h i U M e _ _ i _ t r B A n C C r R t e L G t L L e E p d I E i I I d V s C _ c E E A : _ D a N N f L / D O t T T o I / R M i _ _ r D n U A o I S A e P I n D E O T x A N = C n E t L = R R - _ - _ s e E d S d B i t T e E r A t r = m C u S e i R a R p E . e e n E a _ e v t d T l U x e r = . R a i R R o L m t e e e r = p h v v t g h l i e a r / t e s l i d t . t i e o p c f h d v c s o r i a e s : m o s t / / m i t e / f o h n s / r n i v i a o s i t d m r e m f o . i / r n e n a o m x / d m e a c m n m o i / t p n n a - l f / d v e i c m a . g i r c n n i o s f / a m e i c b r g o l v / n e i s f s c e i e r g s / / i s c c e o e r n s v s / i u c c m o e e n s r s / u n m e e x r t When specifying NEXT_PUBLIC_DRUPAL_BASE_URL with a base path included, such as https://site.example.com/xxx, API requests were sent to https://site.example.com/jsonapi/, failing to correctly retrieve resources. ...

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 This is a note about using Drupal OAuth with NextAuth.js. Behavior Access the app created with Next.js and press the “Sign in” button. If you are not logged into Drupal, you will be redirected to the login screen. If you are already logged in, an authorization button is displayed. Click to authorize. The login information is displayed. Drupal-Side Setup Module Installation Install the following module. ...

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 When building a chat interface using RAG (Retrieval-augmented generation) with OpenAI’s Assistants API, I used the following repository. https://github.com/openai/openai-assistants-quickstart A modification was needed regarding the handling of citation, so I am documenting it here as a memo. Background I used the above repository to try RAG with OpenAI’s Assistants API. With the default settings, citation markers like “4:13†” were displayed as-is, as shown below. Solution I modified annotateLastMessage as follows. By changing file_path to file_citation, the citation markers could be replaced. ...

Overview This article describes how to perform authentication with ORCID, OSF (The Open Science Framework), and GRDM (GakuNin RDM) using NextAuth.js. Demo Apps ORCID https://orcid-app.vercel.app/ OSF https://osf-app.vercel.app/ GRDM https://rdm-app.vercel.app/ Repository ORCID https://github.com/nakamura196/orcid_app Below is an example of the options configuration. https://github.com/nakamura196/orcid_app/blob/main/src/app/api/auth/[…nextauth]/authOptions.js e } x ; p p ] c } o r , a , r o { } l a } a } t v , l s , s , i i n t c c a } t u } p } b y s s r y i } r c d d a y l l u , o s , r , a n e e e n f e o e : m p i i t u p } k e u a } o r } c c s s t c t t t n r e e e e h r a , e r r s , f e ; k s s u ( o o u s s " : : n n o l r s r r n i l y c } r i t i n e s s i i r j a k k r t : o t t r : a c e e : n : n o ) e l u d a m : e o o n w c e e n r " " I S i m o s d f c n h } ; t e r : m a s n n t c n n a [ c O o d e z " s p p i " o " s e , u ( n e i { s . . s ( o . . t u i R a : c a h : e o r h : h r t a A A r p p : l i a u e { u a o o t d C u r t t : n e t t e d u c n r { r : o c s s n c r k h " I t p e i t { s c t { t q r e t c o o p n c e s t t c c e O , D h r t o p " e t p p u e r h e a f f r p ( e r i o ) e i n p " " o : n s / _ _ s s e s s o p w i i o r { s . o k s d ; t , , c : : a t u : : s : r t a l l f o s i n e { s i e p / u y r / / t = i : i e e i f s T d ; n T = o s r { / t p i / / ( { z t ) [ l i e o , o n s o o h e : o p { a a " " e l s k = k a s . c r e : r u w t a r { o . e s e a e c e e c n p c b t a i p e r p . i n t c n c = n s i t " r i . o i o p s c e p o o c o v s d i c o d o k t n l . i r e n = k o = u { . . . c o c . r e : i j d s r , e u n O e o a d e o c n f c s - o s t n n a t R n r t e s r i s e ` a o i n o t o . t c . C v g e " s g d t B t n d ? n o k o c o I . / " , . / . } c e i ( e . ? k e r } o r D O o , e o o ) h a o ) n n . e n c ) u c _ R a n a r ( r n ; t a e n . i n i C C u v u g { ` e / i m m a d { t d L I t . t / h r j f e a } c ; . ; I D h N h v t s i ? i ) c a E _ / E / 3 t $ o e . l e c N C a X t . p { n r [ s { s c T L u T o 0 s t " " " ? s e _ I t A k / : o , ] g . T A s I E h U e [ / k . i e o d s D N o T n O / e p v m k d _ , T r H " R p n a e a e t _ i _ , C u s t n i n O o S z U I b . h - l ; R k E e R D . a , n ? C e C " L ] o c a . I n R , " r c m [ D ; E + , c e e 0 T i s s ] I , " d s G " ? D / . _ e ] . a o t t ? e t p r o . m o i g k O v a / / e R a i s a v n C l l e u 3 } I u , s t . ` D e s h 0 , i / / I + o c $ D n a { " l t l o " b k a e + c n k s p / . r o o o r r f c c i i i l d d e " } . , ` p , e r { s o n ? . n a m e ? . [ " f a m i l y - n a m e " ] ? . v a l u e , OSF https://github.com/nakamura196/osf-app ...

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 I looked into how to use the Zotero API from Next.js, so this is a memo. As a result, I created the following application. https://zotero-rouge.vercel.app/ Library I used the following library. https://github.com/tnajdek/zotero-api-client Getting the API Key and Other Information Please refer to the following article. Usage Collection List i i i i i a ) } m m m m m s p p p p p y z z { c c r a o o o o o n o o o o e p r r r r r c t t n n t p t t t t t e e s s u / f r r t t r a { a { { { u o o n p p n A U m c i N i p d g c p s y o c / e r e e t i e a l o z x f i c t i K r p l l o t r s r S o e I i e l t R o m y e n y d c e e e m a p s : : = t c r s t s f i t o p " } i e s s a o i / o z } o t t t p n o c n o f n c r r i s n o s t r f h i i ( R s l e e o r } Z n n z e R l r m o o g g o s e e } o m f t , t p s c - " r e e o p t f a @ " o r r n o i r p / . m o o s n o o i l . C A e s n m - i / " o p e s c b . @ l i = . / " l . a l K r r n i p / u e e a a o e e r p t c y w w u x n i o h t ) a ; t t t s s 0 i . i e " m t / o l t . s ; a s n n i j e " / e s b m s r ; e x ( r y v n t a a e c j r p r r s y i " y - ( . ; p a " c t u u o i t s l o h e l n 0 r e " " " c ; ; , t i z o o n t s e ( r ) o . U g s e e t r ( I ) d ; ) ; Specific Collection i i i i i a ) } m m m m m s p p p p p y z z c { c c r a o o o o o n o o o o o e p r r r r r c t t l n n t p t t t t t e e l s s u / f r r e t t r a { a { { { u o o c n p p n A U t m c i N i p d g c p s i y o c / e r e e t i e o a l o z x f i c t i K r n p l l o t r s r S o e I I i e l t R o m y e n y d d c e e e m a p s : : : = t c r s t s f i t o p " } i e s s s a o i / o z } o t t t t p n o c n o f n c r r r i R n o s t r f h i i i ( e R l e e o r } Z n n n z s e l r m o o g g g o p s e } o m f t , , t o p c - " r e e n o t f a @ " o r r s n i r p / @ m o o e s o o i l / C A e n m - i a " o p = . / c b p @ l i r [ " l / p a l K a a i n i p / u e e w w d e e r a t c y a ; ] x n i p h t ) i / t t s i 0 i . t r " m / / o l s ; a p n n i m u e " o e ( b y t r ; s x r a e v t t a p . e s j r i t r / s y . s " e - ( c ; n a " o c u u l r t s l y h e e p 0 r c t " " t i ; , i o o n z n " o s ; t ( e c r o o l U l s e e c r t I i d o ) n ; I d ) . g e t ( ) ; List of Items in a Specific Collection i i i i i a ) m m m m m s p p p p p y z z c { c c r a o o o o o n o o o o o e p r r r r r c t t l n n . . . t p t t t t t e e l s s c i g u / f r r e t t o t e r a { a { { { u o o c l e t n p p n A U t m c l m ( i N i p d g c p s i y o e s ) c / e r e e t i e o a l c ( ; o z x f i c t i K r n p l t ) l o t r s r S o e I I i e i l t R o m y e n y d d c o e e e m a p s : : : = t n c r s t s f i s t o p " } i e s s s a o ( i / o z } o t t t t p n c o c n o f n c r r r i R o n o s t r f h i i i ( e l R l e e o r } Z n n n z s l e l , r m o o g g g o p e s e o m f t , , t o c p c N - " r e e n t o t e a @ " o r r s i n i x p / @ m o o e o s o t i l / C A n e n R - i a " o p = I . / e c b p @ l i d r [ q l / p a l K a ) a i u i p / u e e w w d e e r a t c y a ; ] s n i p h t ) i / t t s i 0 i . t i " m / / o l t } ; a p n n i m e " o e ( b y m f ; s x r a s r t t a p / o s j r i r m / s y o e - ( u " n a " t n c u u e e r t s . x y h e t t p 0 r s / t " " s i ; , e o r n z v " o e ; t r e " r ; o U s e r I d ) ; References The application is hosted on Vercel, using Vercel Postgres for the database and Prisma as the ORM. The UI was built with Tailwind CSS, using design suggestions from ChatGPT. Auth0 was adopted for authentication. ...