はじめに React 19 と Next.js 15 を使用しているプロジェクトで @elastic/react-search-ui を使おうとすると、以下のような依存関係エラーに遭遇することがあります。 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 この記事では、この問題の原因と解決方法を詳しく解説します。 ...
はじめに 研究データ管理基盤「GakuNin RDM」と Next.js アプリケーションを OAuth2 で連携する方法を解説します。GakuNin RDM は OSF（Open Science Framework）互換の API を提供しているため、OSF の OAuth2 フローを参考に実装できます。 本記事では、next-auth を使用した実装方法と、アクセストークンの自動リフレッシュ というハマりポイントについて詳しく説明します。 GakuNin RDM とは GakuNin RDM（Research Data Management）は、国立情報学研究所（NII）が提供する研究データ管理サービスです。 URL : https://rdm.nii.ac.jp/ API : OSF 互換 REST API（https://api.rdm.nii.ac.jp/v2/） 認証 : OAuth2（https://accounts.rdm.nii.ac.jp/） 研究者が研究データを安全に保存・共有・公開できるプラットフォームで、学認（GakuNin）認証との連携により、日本の大学・研究機関のユーザーが利用できます。 事前準備 1. OAuth アプリケーションの登録 GakuNin RDM の設定画面から OAuth アプリケーションを登録します。 https://rdm.nii.ac.jp/settings/applications/ にアクセス 「Developer application を登録する」をクリック 以下を設定： Application name : アプリ名 Application homepage URL : http://localhost:3000（開発時） Application description : 説明 Authorization callback URL : http://localhost:3000/api/auth/callback/gakunin 登録後、Client ID と Client Secret が発行されます。 ...
Next.js App Router と next-intl を使用した多言語対応アプリケーションで、リロードなしの言語切り替えを実装する方法をまとめます。 環境 Next.js 16 (App Router) next-intl TypeScript 設定概要 localePrefix: ‘as-needed’ とは next-intl の localePrefix: 'as-needed' 設定を使用すると、デフォルト言語ではURLにプレフィックスが付かず、その他の言語のみプレフィックスが付きます。 例（デフォルト言語が日本語の場合）: 日本語: /, /gallery, /viewer 英語: /en, /en/gallery, /en/viewer 実装手順 1. Middleware設定（重要） next-intl は middleware を使用してロケールのルーティングを処理します。静的ファイルが middleware によってリダイレクトされないよう、matcher の設定が重要です。 i i e e } m m x x p p p p m m o o o a i r r r r t d t t t t S c d k h l c { d c i e e r e o p r w e r f n : a a o a s m r t u u t i [ e e t l d ' . M i t c d / t i n o l ( s d g c n e ( d r f w ? l } e i a ! e a g r a w f t e p a r e = i r o M f | e m i { o _ d r n f d e r l s x o / e t t m s w a | r a t . ' c r i * n / e c \ e i ( \ x 1 r f . t 8 o i . - n u l * i / t e ) n r i s . t o n * l u g a ) / t ) n ' m i d ] i n d g A d ' P l I e w r a o r u e t ' e s 注意 : .*\\..* は「ドットを含むパス」を除外します。これにより /og-image.png などの静的ファイルがmiddlewareをスキップし、正常にアクセスできるようになります。 ...
概要 れきちずをNext.jsで使用する方法を調べてみましたので、備忘録です。 背景 以下の記事で、「れきちず」の使い方を紹介しました。 そして、2025年4月4日に「全国版が公開」されたことを知りました。 https://rekichizu.jp/ そこでNext.jsを用いて作成したアプリケーションへの導入にあたり、その使い方を調べてみました。 デモアプリ 以下のようなアプリケーションを試作しました。 https://rekichizu-next.vercel.app/ja/ 使用方法の調査にあたり、公式サイトで提供されている地図の切り替えや重ね合わせ機能、および検索機能などを再現することを目的としました。この実装にあたり、以下のReactライブラリを使用しました。 https://visgl.github.io/react-maplibre/ 開発メモ 検索機能 検索機能には、GeoLODのAPIを利用させていただきました。なお、「れきちず」の公式サイトでは、専用の検索APIが用いられているようでした。 https://geolod.ex.nii.ac.jp/doc/api/ react-maplibre 本ライブラリを使用して、やりたいことの多くを実現できました。一方、TerrainControlではTerrainのON/OFFと合わせてピッチを変更することが難しい？、useMapではaddLayer/removeLayerが難しい？など、いくつか苦労した点もありました。 まとめ 「れきちず」およびNext.jsを用いたアプリケーション開発にあたり、参考になりましたら幸いです。 「れきちず」の開発に関わる方々に深く感謝いたします。
はじめに この記事は、GPT-4oによって生成された内容です。Next.jsを使用して多言語対応の静的サイトを構築する方法について説明します。特に、メイン言語にはURLプレフィックスを付けず、その他の言語にはプレフィックスを付ける設定に焦点を当てます。GitHub Pagesを使用してデプロイする設定も含まれています。 プロジェクトのセットアップ まず、Next.jsのプロジェクトを作成します。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 必要なパッケージのインストール 多言語対応のために、next-intlをインストールします。 n p m i n s t a l l n e x t - i n t l プロジェクト構成 プロジェクトのディレクトリ構成は以下の通りです。 ...
概要 clover-iiifをNext.jsで使用するサンプルリポジトリを作成したので、備忘録です。 https://clover-iiif-demo.vercel.app/ 背景 clover-iiifは以下のように説明されています。 https://github.com/samvera-labs/clover-iiif Extensible IIIF front-end toolkit and Manifest viewer. Accessible. Composable. Open Source. （日本語訳）拡張可能な IIIF フロントエンドツールキットとマニフェストビューア。 これをNext.jsで使用します。 データ 「校異源氏物語（国立国会図書館所蔵）」をサンプルデータとして使用します。 https://dl.ndl.go.jp/pid/3437686 リポジトリ 以下で公開しています。 https://github.com/nakamura196/clover-iiif-demo 以下を参考にしました。 https://samvera-labs.github.io/clover-iiif/docs/composing クライアントサイドでの実行にあたり、以下のような工夫が必要でした。 " i i i c ) c } c } e u m m m o ; o ; o ; x s p p p n { n c c r ) n r ) p e o o o V s s o o e ; s e ; o r r r i t s t n n t < t t < r c t t t e = s s s u a / u S / t l w V > r W t t r r < a W r u < S i R d { e i : o n t V r o n s W u d e e y r e i r s m i i t r p o s e n a n u コ w m f k e a ( c e i k ( e r p f t c a s ン e p a C a n l w c n k e a " t m e ポ r o l o r i e e l = s C n u ; , i S ー r s n c f > r e e o s l c e ネ = t e t h e > n e t { a ン ( e P s i f t > f r ト d " } n a t i a e W S r c を y @ t r I i = l n o u o h 動 n s a d f > l t r s m P 的 a a = m C b k p a に m m s = o { a ; e " r イ i v n c n n a ン c e = s t k s e m ポ ( r e e = e x s ー a = u a n { t ト / > s r t < } / } （ c e c = d d S l { S h { i f y f S o e P m v r n r R v a a a > o a o を e r r n L m m m 無 r c a i o i 効 - h m f a " c " 化 i P s e d r " n ） i a . s i e ; e i r g t n a x f a e I g c t / m t d . t / v s ( } . " n i ( ' . ; a e ) m < v w ; a / i e n d g r i i a " f v t ) e > i , s } o t > n ' " ) ; " h t t p s : / / d l . n d l . g o . j p / a p i / i i i f / 3 4 3 7 6 8 6 / m a n i f e s t . j s o n " ; まとめ 不完全な点もあるかと思いますが、参考になりましたら幸いです。 ...
概要 Next 15（React 19 を使用）で、@react-three/fiberを使う際、以下のように説明されています。 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. （日本語訳）R3F v8 は React 19 や Next 15（React 19 を使用）と互換性がありません。代わりに R3F v9 RC を使用してください。インストールするには @react-three/fiber@rc を使用してください。 一方、マウス操作を行うために以下を追加しましたが、@react-three/fiber@rcとは相性が悪いようでした。 https://www.npmjs.com/package/@react-three/drei この問題に対する対処法の備忘録です。 方法 本記事執筆時点（2025-02-06）の情報です。 まず、@react-three/fiber@rcではなく、@react-three/fiber@alphaをインストールする必要がありました。（@betaでもよいかもしれません。） そして、dreiについては、@react-three/drei@10.0.0-rc.1をインストールしました。結果、以下のような組み合わせでは、無事にインストールすることができました。 " " @ @ r r e e a a c c t t - - t t h h r r e e e e / / d f r i e b i e " r : " : " ^ " 1 ^ 0 9 . . 0 0 . . 0 0 - - r a c l . p 1 h " a , . 8 " , まとめ 考慮が不十分な点があるかもしれませんが、参考になりましたら幸いです。 ...
概要 Azure OpenAI Assistants APIを用いたアプリをGradioとNext.jsで作成したので、備忘録です。 対象データ Zennで公開している記事を対象にしました。まず以下により、一括ダウンロードしました。 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 } " ベクトルストアへの登録 以下のようなコードにより、データファイルをアップロードします。 ...
概要 GakuNin RDMをNext.jsから使用する備忘録です。 背景 以下の記事で、NextAuth.jsを使って、GakuNin RDMの認証を行う方法を紹介しました。 この延長で、GakuNin RDMのデータをロードするNext.jsのアプリを試作します。 デモ GakuNin RDMの認証が使用できる方に限られますが、以下からお試しいただけます。 https://rdm-app.vercel.app/ 例えば以下は、接続したストレージの一覧を確認するページです。 選択したストレージ（ここではosfstorage）におけるフォルダやファイルの一覧です。 以下は、figshareに登録したファイルを参照している例です。 osfstorageやfigshare、GitHubなど、さまざまなストレージに格納されたデータを共通のAPIから利用できる点は便利だと感じました。 GitHubのリポジトリは以下です。 https://github.com/nakamura196/rdm_app まとめ 現時点（データをロードするだけ）においては、本アプリを使用する利点はありませんが、今後、他のアプリとの連携などを通じて、GakuNin RDMのデータを活用できればと思います。 参考になりましたら幸いです。
概要 Knight LabのTimelineJSやStoryMapJSをNext.jsから利用する方法のメモです。 背景 Knight LabのTimelineJSやStoryMapJSは、デジタルストーリーテリングのためのオープンソースツールです。 https://knightlab.northwestern.edu/ データ 以下で公開されている『渋沢栄一伝記資料』のテキストデータを利用します。 https://github.com/shibusawa-dlab/lab1 リポジトリ 以下で公開しています。 https://github.com/nakamura196/shibusawa ストーリーマップ 以下のようなコンポーネントを用意することで、Next.jsからも利用することができました。 https://github.com/nakamura196/shibusawa/blob/main/src/components/Storymap.tsx TypeScriptの利用にあたり、以下の型定義ファイルも作成しました。 https://github.com/nakamura196/shibusawa/blob/main/src/global.d.ts 以下のように表示することができました。 https://shibusawa.vercel.app/storymap/1868-08-02 タイムライン ストーリーマップ同様、タイムラインについても以下のようなコンポーネントを作成しました。 https://github.com/nakamura196/shibusawa/blob/main/src/components/Timeline.tsx 以下のように表示することができました。 https://shibusawa.vercel.app/timeline/1868 ただし、タイムラインについては、以下でES6 modules/webpackが公開されていることに後から気がつきました。こちらの使い方について、別途調査したいと思います。 https://www.npmjs.com/package/@knight-lab/timelinejs まとめ デジタル・ヒューマニティーズ（DH）の分野で広く活用されているTimelineJSやStoryMapJSについて、データの視覚化や物語の構築を行う際の参考になりましたら幸いです。 なお、これらのツールはプログラムを介さず、Googleスプレッドシートを入力として、可視化アプリを作成することもできます。こちらも参考になりましたら幸いです。 https://timeline.knightlab.com/ https://storymap.knightlab.com/
概要 LEAF WriterをNext.jsから使用する方法について紹介します。 デモ 以下のURLからお試しいただけます。 https://leaf-writer-nextjs.vercel.app/ 以下が画面例です。ヘッダー部分がNext.jsを用いて追加した部分です。エディタ部分はLEAF Writerを使用しています。 ソースコードは以下でご確認いただけます。 https://github.com/nakamura196/leaf-writer-nextjs 使用方法 以下に記載があります。 https://gitlab.com/calincs/cwrc/leaf-writer/leaf-writer/-/tree/main/packages/cwrc-leafwriter?ref_type=heads 注意点として、div containerのidをleaf-writer-containerにする必要があります。これを行わない場合、スタイルが崩れることがわかりました。この点は、今後プルリクエストを送りたいと思います。 # c o c n o s n t s t c o c n o t n a t i a n i e n r e r = = d o d c o u c m u e m n e t n . t g . e g t e E t l E e l m e e m n e t n B t y B I y d I ( d ' ( # ' l # e l a e f a - f w - r w i r t i e t r e - r c ' o ) n ; t a i n e r ' ) ; まとめ LEAF Writerの応用にあたり、参考になりましたら幸いです。 ...
概要 </api/_search> のようなAPIを作成するにあたり、アンダースコアから始まるURLセグメントを作成する方法を調べましたので、備忘録です。 方法 以下に記載がありました。 https://nextjs.org/docs/app/building-your-application/routing/colocation#:~:text=js file conventions.-,Good to know,-While not a 以下、日本語訳です。 URLセグメントでアンダースコアから始まる部分を作成するには、フォルダー名に %5F（アンダースコアのURLエンコード形式）を付けてください。例: %5FfolderName。 /api/%5Fsearch/route.ts のようにファイルを作成することで、解決することができました。 まとめ 参考になりましたら幸いです。
概要 TEI/XMLファイルの内容を表示する簡易なビューアを作成しました。 https://github.com/utda/tei-viewer 校異源氏物語のTEI/XMLを対象とした表示例は以下です。 https://utda.github.io/tei-viewer/?u=https://kouigenjimonogatari.github.io/tei/01.xml&v=true 使い方 最低限の機能として、IIIFマニフェストファイルが関連付けられている場合には、Miradorビューアが表示されるようにしました。関連付けの方法としては、以下のフォーマットをベースとしています。 https://github.com/TEI-EAJ/jp_guidelines/wiki/IIIF画像とのリンク またpbタグのn属性が与えられている場合は、ページ番号が表示される機能を提供します。さらに日本語への対応として、クエリパラメータにv=trueを与えた場合、縦書きテキストが表示されます。 https://github.com/utda/tei-viewer/blob/main/src/app/components/Ceteicean.tsx その他 フレームワークにはNext.js、TEI/XMLの表示スタイルにはCETEICeanを使用しました。 https://github.com/utda/tei-viewer/blob/main/src/app/CETEIcean.css そのほか、以下の記事を参考に、GitHubリポジトリとZenodoの連携を試行しています。 改善の余地があるかと思いますが、以下のコマンドを使って、新しいリリースを作成しています。 " r e l e a s e " : " n p m v e r s i o n p a t c h & & g i t p u s h o r i g i n - t a g s & & V E R S I O N = $ ( n o d e - p e \ " r e q u i r e ( ' . / p a c k a g e . j s o n ' ) . v e r s i o n \ " ) & & g h r e l e a s e c r e a t e \ " v $ V E R S I O N \ " - t i t l e \ " V e r s i o n $ V E R S I O N \ " " 今後 pbタグとMiradorビューアの画像表示が対応する機能を追加したいと思います。 ...
概要 ジャパンサーチでは、ジャパンサーチ内で使われている画面の構成要素を、部品としてジャパンサーチ以外のウェブサイトでも利用できる機能であるウェブパーツを提供しています。 https://jpsearch.go.jp/static/developer/webparts/ja.html 今回、Next.jsで本機能を使用する機会がありましたので、その備忘録です。 使用例 以下のページでご確認いただけます。 https://jps-2023-next.vercel.app/jps ソースコード 以下で公開しています。 https://github.com/nakamura196/jps_2023_next 以下のように、Scriptタグを使ってjsファイルを読み込むことで、うまく表示させることができました。 < L / a < < L y S C / a o c o s } < < C y u r n x } p / d o o t i t = m > 東 p i n u > p a { y 京 > v t t t i { : 大 a > n 学 c i s e 5 「 l n r r , 総 a e c 合 s r = 図 s > " 書 N h 館 a t バ m t ー e p チ = s ャ " : ル j / ミ p / ュ s j ー " p ジ s ア d e ム a a 」 t r を a c 改 - h 変 l . し a g て n o 作 g . 成 = j し " p て j / い a a ま " s す s 。 d e a t t s a / - j c s u / r w = p { . d b a u t n a d } l > e < . / j d s i " v > > < / S c r i p t > まとめ ジャパンサーチのウェブパーツを同様の環境でお使いになられる際の参考になりましたら幸いです。 ...