Nextjs

Introduction One day, I noticed that annotations could no longer be created at all in a IIIF annotation editor deployed on Vercel. It worked correctly on the local development server, but in the production environment, drawing mode could not be entered. There were no console errors. The UI buttons switched correctly, but dragging on the image did nothing. The cause was an automatic upgrade of Annotorious due to caret (^) specification in package.json, and a state management library migration in v3.7.13 that caused issues with webpack’s production build. ...

Cause and Fix for localStorage.getItem is not a function Error in Node.js 25 + Next.js 15 Introduction When running npm run dev in a Next.js 15 project, the following error occurred and the development server stopped working properly. ⨯ } [ ( T ⨯ n [ d y o T i p [ d y g e T e p e E y : e s r p 2 E t r e 4 r : o E 0 r r r 5 o ' : r ) r 2 o : 8 l r W 9 o : a l 2 c r o 7 a l n c 0 l o i a 3 S c n l 8 t a g S 7 o l : t 9 r S o ' a t ` r g o - a e r - g . a l e g g o . e e c g t . a e I g l t t e s I e t t t m I o e t r m i e a s m g i e s n i - o s f n t i o n l t a o e t ` a f u a w f n a u c f s n t u c i n p t o c r i n t o o ] i v n o i ] n d ] e { d { w p i a t g h e o : u t / a j a v ' a l } i d p a t h There was no code directly calling localStorage, which made identifying the cause time-consuming. This article explains the root cause and solution for this error. ...

Introduction When I tried to deploy a Next.js application to Vercel, I encountered a problem where the build succeeded locally but failed on Vercel. The error message was vague, and it was difficult to identify the cause. In this article, I share the process from discovering the problem to resolving it, along with what I learned about JavaScript operator precedence. Symptoms Error Message E [ T r E h r r e o r r o s r p o : e c c c A i u n f r i r e c e r d r m o e p r s r s e o a r c g e c e n u d r i e r s r e i d o n m g i i n t p t a t e g h d e e i " S n / e e r p n r / e o s r d m u e C c l o t l m i s p o / o n 2 n 2 e b - n u 0 t i 3 s l " d r s e n t d o e r a . v o i d l e a k i n g s e n s i t i v e d e t a i l s . ] Characteristic 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 Finding the Cause While investigating multiple files, I discovered the following code pattern: ...

I built a web app that uses the Sketchfab API to download 3D models as GLB files and display them in the browser using Three.js. This article covers everything from the security-conscious architecture design to implementation. What I Wanted to Do Download 3D models from Sketchfab in GLB format Display downloaded GLB files in 3D within the browser Manage API tokens securely Tech Stack Next.js 16 (App Router) React Three Fiber / @react-three/drei TypeScript First Attempt: Client-Side Only Implementation Initially, I tried implementing it with just HTML + JavaScript. ...

Overview When deploying an application using Next Auth (Auth.js v5) to a Docker container or production environment, the following error occurs with GitHub OAuth authentication if the AUTH_URL environment variable is not configured: B T e h e c a r r e e d f i u r l e ! c t _ u r i i s n o t a s s o c i a t e d w i t h t h i s a p p l i c a t i o n . Development Environment vs Production Environment Development Environment (npm run dev) In the development environment, Next.js automatically detects host information, so configuring AUTH_URL is not required. ...

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

Overview @yuta1984 developed a “WebAssembly-based web port of NDL Kotenseki OCR-Lite”: https://github.com/yuta1984/ndlkotenocr-lite-web Using the above repository as a reference, I created a Next.js version: https://nkol.vercel.app/ja/ In addition, the following features have been added: IIIF manifest file input form TEI/XML file download functionality Creation of an ODD file for the output format Usage As an example, we use the Tale of Genji from the Kyushu University Library: https://catalog.lib.kyushu-u.ac.jp/image/manifest/1/820/411193.json After entering the manifest file and clicking the “Load” button, a list of images is displayed as shown below: ...

Overview In the following article, I introduced the “Image Collection Management” tool designed for easily trying out IIIF features. This time, I will introduce the technologies used behind this tool. Introduction The Image Collection Management tool is a web application for managing and publishing image collections in the IIIF (International Image Interoperability Framework) format, an international standard. This article explains the technical implementation of this tool, with a focus on the IIIF specification implementation and handling of geospatial information. ...

! This article was generated by AI. Introduction In the field of digital humanities, the 3D digitization of cultural properties and historical materials is rapidly advancing. However, appropriate tools are needed not only for simply viewing 3D models but also for utilizing them in academic analysis and education. This article introduces “IIIF 3D Viewer,” a web application for viewing 3D models that complies with the IIIF (International Image Interoperability Framework) standard. ...

This article was reviewed by a human for implementation and written by AI. Overview This template is a starting point for web application development that supports static site generation (SSG) with Next.js 15, with built-in multilingual support and dark mode. It combines TypeScript, Tailwind CSS, next-intl, and next-themes. https://nextjs-i18n-themes-ssg-template.vercel.app/ja/ Key Features 1. Static Site Generation (SSG) Full static export with output: 'export' Fast page loading and SEO optimization Reduced hosting costs 2. Internationalization (i18n) Full multilingual support with next-intl Japanese and English support (easy to add more languages) URL-based language switching (/ja/about, /en/about) Type-safe translation keys 3. Dark Mode System-linked dark mode with next-themes Automatic detection of user preferences Smooth theme switching animation Persistent settings via LocalStorage 4. Improved Developer Experience Type safety with TypeScript Efficient styling with Tailwind CSS Code quality management with ESLint Unified component structure Tech Stack { } " } d e " " " " " " p n r n n t @ e e e e e a t n x a x x i a d t c t t l i e " t - - w l n : " i t i w c : n h n i i " t e d n e ^ " l m c d s 1 ^ " e s c " 5 1 : s s s : . 9 " " s 4 . " : : / { . 1 ^ t 4 . 4 " " y " 0 . ^ ^ p , " 3 0 4 o , . . . g 4 4 1 r " . . a , 6 1 p " 1 h , " y , " : " ^ 0 . 5 . 1 6 " Project Structure s ├ │ │ │ │ │ │ │ ├ │ │ │ │ │ │ │ ├ │ └ r ─ ─ ─ ─ c ─ ─ ─ ─ / a ├ │ │ │ │ ├ └ c ├ │ │ │ │ │ └ i └ m ├ └ p ─ ─ ─ o ─ ─ 1 ─ e ─ ─ p ─ ─ ─ m ─ ─ 8 ─ s ─ ─ / p n s [ ├ ├ ├ └ i s o l ├ ├ ├ ├ └ p / r a e j l ─ ─ ─ ─ c i n a ─ ─ ─ ─ ─ a o g n a o ─ ─ ─ ─ o t e y ─ ─ ─ ─ ─ g u e . . c n e n o e t s j j a l p a e . m t u H F P T T i / s s l a a b x s a s t e o a o n o o e y g o a v p / a o g g g g n n ] e u m g . d t e g g . u . t p t e e L l l t t t / l s r r a e e s . s e . . y T L t x / t t o h a s s s u e n x x x t m g . e u t . a s t g x s e x . # # # t # # # # # # # s F S L x P i T R H A S a i a a 1 r o o b a v t y g 8 a o m o m i e o e n n t e u p c m u - s t l o a t s c l l p e n p p o a a a p c e n t y g a p g o c f i o e g a e m i i o u e g n p f g n t e e o i u r n c r f a e a i t n c t l i t o i e o s m o s n p n o n e n t s Notable Implementations 1. Static Export Support for sitemap.ts e e e } x x x p p p o o r r r t t t I m c c d p o o e l n n f e s s a m t t u e l n d r t t y e a n v f t a a u i m l n o i i c n c d t a i = t o e n ' f = s o i r f t c a e e l m - s a s e p t ; ( a ) t : i c M ' e ; t a d a t a R o u t e . S i t e m a p { 2. Unified Page Layout < P / a b t d < P g r i e Y a e e t s o g L a l c u e a d e r r L y c = i C a o r { p o y u u t t n o t m ( i t u b ' o e t I t n n > t i = t e t { m l t s e ( = ' ' { ) d b } e r s e c a r d i c p r t u i m o b n I ' t ) e } m s } 3. Configuration via Environment Variables # N N E E . X X e T T n _ _ v P P . U U e B B x L L a I I m C C p _ _ l S B e I A T S E E _ _ U P R A L T = H h = t t p : / / l o c a l h o s t : 3 0 0 0 Usage Installation g c n i d p t m n c e i l x n o t s n j t e s a - l [ i l r 1 e 8 p n o - s t i h t e o m r e y s - - u s r s l g ] - t e m p l a t e Development n p m r u n d e v Build n p m r u n b u i l d Customization Points Adding languages: src/i18n/routing.ts and messages/ directory Adding pages: Create new directories under src/app/[locale]/ Theme customization: tailwind.config.js and global CSS Metadata: generateMetadata function in each page Best Practices Component naming: Use PascalCase Translation keys: Organize with nested structure Type safety: Maximize use of TypeScript types Performance: Cache strategy utilizing static generation Summary This template aims to enable quick construction of static sites optimized for SEO, with built-in internationalization and dark mode features. The goal is to improve developer productivity while providing an excellent experience for end users. ...

This article was written by AI after a human verified the implementation. Background When using static site generation (output: 'export') in Next.js 15, errors may occur with the sitemap.ts implementation. E r r o r : e x p o r t c o n s t d y n a m i c = " f o r c e - s t a t i c " / e x p o r t c o n s t r e v a l i d a t e n o t c o n f i g u r e d o n r o u t e " / s i t e m a p . x m l " w i t h " o u t p u t : e x p o r t " . Solution This issue can be resolved by adding the following two exports to sitemap.ts: ...

Overview This article explains the technical architecture and implementation of a search application combining Next.js, Elastic Search UI, and Fuse.js. The created site is available here. https://nsf-psi.vercel.app/ja/ The GitHub repository is here. https://github.com/nakamura196/nsf Sample data uses the “Bird’s-eye View of the Main Campus and Faculty of Agriculture Buildings, Tokyo Imperial University (Graduate School of Agricultural and Life Sciences / Faculty of Agriculture, The University of Tokyo).” https://da.dl.itc.u-tokyo.ac.jp/portal/assets/187cc82d-11e6-9912-9dd4-b4cca9b10970 The following was generated by AI. ...

概要 I had the opportunity to test IIIF Authentication API 2.0, so here are my notes. https://iiif.io/api/auth/2.0/ I created the following demo site. https://iiif-auth-nextjs.vercel.app/ja The repository is as follows. https://github.com/nakamura196/iiif-auth-nextjs Below is an AI-generated explanation. Note that I was unable to get it working properly with Mirador, which remains a future task. 概要 This article provides a detailed explanation of the IIIF Authentication API 2.0 authentication flow at the level of actual HTTP requests/responses. We will trace what requests are sent and what responses are returned at each step. ...

Overview “Rekichizu x Next.js” is a web application built with Rekichizu and Next.js. I have added a route registration feature to this web application, which I will introduce here. Feature Introduction Access the top page and click the “Manage My Routes” button. You will be prompted to log in, so click the “Login” button in the upper right corner. After logging in, a list screen like the following will be displayed. ...

Notice: 2025-06-14 The development progress is summarized at the following link. https://zenn.dev/nakamura196/books/41693d2d017082 Overview As part of learning blockchain technology, I created a prototype management system for digital cultural heritage. Since the purpose is learning blockchain, there are many missing features, but I plan to add and improve them in the future. https://digital-heritage-five.vercel.app/ Technologies Used The Ethereum Sepolia network is used. Since the purpose is blockchain learning and prototype development, a test network is used. Pinata is used as the hosting service for the distributed file storage IPFS. https://pinata.cloud/ ...

Overview In the following article, I introduced how to create annotated IIIF manifest files and TEI/XML files using NDL Classical Book OCR-Lite. Since the explanation above was insufficient in many areas, I will re-introduce how to use it. Supplement Along with writing this article, the following improvements were made. Process 1: Creating IIIF Manifest Files Added support for IIIF Presentation API v3. Process 2: Creating TEI/XML Files Added a form that accepts string input, considering the connection with Process 1. Usage Process 1: Creating IIIF Manifest Files Access the following. ...

Overview This is a note about adding pagination support to the DTS (Distributed Text Services) viewer. https://dts-viewer.vercel.app/ja/ Background When providing a large number of resources through DTS, it appears that the view property is used to present pagination information, as shown below. https://distributed-text-services.github.io/specifications/versions/unstable/#collection-endpoint { } " " " " " " " " " } " ] " } @ d @ @ c t t t d , m , v c t i t o o o i u e " i o s d y l t t t b m . e n V " p l a a l l " " ] b . w " " " " " " t e e e l l e i p t e . " @ @ f p n l e r : " c P C " n u i r " : i t i r e a x s t a h : C b t " d y r e x s t i " : i r i o l l { : { " p s v t t " o l o e l " r i e " : e t i " " : n e " n n d L e s " l [ " " o : : " t C " t r e " h : a " : : u " : t o : s e t : e n / s " " h r l " n t r [ g a " " " / / t " e l " : " r { " " p P / : a a t 1 s e / : e : : i a a p p p - _ c a 1 s / g p " i i s a d t p , 1 [ " d i i / / : l e i i 0 d " f t n a d d / p _ o / 0 e É r s a d p t t / h p n d 0 c " / t t i s s d a o " t 0 P o , c i s / / i " i , s , o l o o d c c s , l / i e " l n c t o o t u c l v l " o s l l r s o u N a e , l / l l i " l s a l c l c e e b , l " t u t e o c c u e , i e i c l t t t c o " o t l i i e t n n i e o o d i a : / o c n n - o l ? n t / / t n e " i / i ? ? e / L d ? o i i x { d e = i n d d t ? e t l d / = = - i s t e = ? l l s d r t l i e e e , C e t e d t t r p h s r t = t t v a a e t l r r i g r d s r e e e c e t e _ e t s s e , e d s t _ _ s n s P e _ r d d . a " o _ d e e e g v , i p e s _ _ i } l o _ _ p p t " " u i p d o o h , h s l o e i i u t " u i _ l l b t } s l p u u . p & u o s s i s p s i & & o : a & l p p / / g p u a a s / e a s g g p v = g & e e e i 1 e p = = c a 9 = a 2 5 i f " 1 g 0 0 f . , " e " 0 i o , = , " c r 1 a g 8 t / " i v , o i n a s f / / c 1 o 6 n 7 t 8 e 7 x 4 t 5 / 8 1 5 - " a ] l , p h a 1 . j s o n " , I updated the DTS Viewer to support the view property described above. ...

Overview This is a note about creating an app that generates a CSV file containing a list of image URLs from a IIIF manifest file. You can access it from the following. https://iiif-demo-next.vercel.app/csv-converter Usage We will use “Koigenshimonogatari, Volume 1” from the National Diet Library collection as the target. https://dl.ndl.go.jp/api/iiif/3437686/manifest.json Enter the manifest file URL in the form below and press the “Download CSV” button. As a result, a CSV file containing URL and size information is downloaded as follows. ...

Overview This is a memo about hosting TEI/XML files on S3-compatible object storage. Specifically, we target the mdx I object storage. https://mdx.jp/mdx1/p/about/system Background We are building a web application (Next.js) that loads TEI/XML files and visualizes their content. When the number and size of files were small, they were stored in the public folder, but as these grew larger, we considered hosting them elsewhere. There are many options for storage locations, but this time we target mdx I’s S3-compatible object storage. ...