概要

ZoteroのAPIをNext.jsから使う方法を調べましたので、備忘録です。結果、以下のアプリケーションを作成しました。

https://zotero-rouge.vercel.app/

ライブラリ

以下のライブラリを使用しました。

https://github.com/tnajdek/zotero-api-client

API Keyなどの取得

以下の記事を参考にしてください。

使い方

コレクション一覧

iiiiia)}mmmmmspppppyzz{ccraooooonooooeprrrrrcttnntpttttteessu/frrttra{a{{{uoonppnAUmciNipdgcpsyoc/ereetiealozxfictiKrpllotrsrSoeIieltRomyenydceeemaps::=tcrstsfitop"}iessaoi/oz}otttpnocnofncrrisnostrfhii(Rsleeor}ZnnzeRlrmooggosee}omft,tpsc-"reeoptfa@"orrnoirp/.moosnooil.CAesnm-i/"opescb.@li=./"l.alKrrnip/ueeaaoeerptcywwuxnioht)a;tttss0i.ie"mt/olt.s;asnnije"/esbmsr;ex(ryvntaaecjrprrsyi"y-(.;pa"ctuuoitsloheln0re"""c;;,tizoontse(r)o.Ugseetr(I)d;);

特定のコレクション

iiiiia)}mmmmmspppppyzzc{ccraooooonoooooeprrrrrcttlnntpttttteelssu/frrettra{a{{{uoocnppnAUtmciNipdgcpsiyoc/ereetieoalozxfictiKrnpllotrsrSoeIIieltRomyenyddceeemaps:::=tcrstsfitop"}iesssaoi/oz}ottttpnocnofncrrriRnostrfhiii(eRleeor}Znnnzselrmoogggopse}omft,,topc-"reenotfa@"orrsnirp/@mooesooil/CAenm-ia"op=./cbp@lir["l/palKaainip/ueewwdeeratcya;]xnipht)i/ttsi0i.tr"m//ols;apnnimue"oe(bytr;sxraevttap.esjritr/sy.s"e-(c;na"ocuulrtslyheep0rct""ti;,ioonzn"os;t(ecroolUlseecrtIido)n;Id).get();

特定のコレクション内のアイテム一覧

iiiiia)mmmmmspppppyzzc{ccraooooonoooooeprrrrrcttlnn...tpttttteelsscigu/frrettotera{a{{{uoocletnppnAUtmclm(iNipdgcpsiyoes)c/ereetieoalc(;ozxfictiKrnplt)lotrsrSoeIIieiltRomyenyddcoeeemaps:::=tncrstsfistop"}iesssao(i/oz}ottttpncocnofncrrriRonostrfhiii(elRleeor}Znnnzslel,rmoogggopeseomft,,tocpcN-"reentotea@"orrsinixp/@mooeosotil/CAnenR-ia"op=I./ecbp@lidr[ql/palKa)aiuip/ueewwdeeratcya;]snipht)i/ttsi0i.ti"m//olt};apnnime"oe(bymf;sxrasrttap/osjrirm/syoe-(u"na"tncuueerts.xyhettp0rs/t""si;,eornzv"oe;tre"r;oUserId);

参考

アプリケーションはVercelにホスティングされており、データベースにはVercel Postgres、ORMにはPrismaを使用しました。UIはTailwind CSSで構築され、ChatGPTのデザイン提案を使用しました。また、認証にはAuth0を採用しています。

まとめ

ZoteroのAPI利用にあたり、参考になりましたら幸いです。