ZoteroのAPIをNext.jsから使う

概要

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

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

ライブラリ

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

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

API Keyなどの取得

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

https://zenn.dev/nakamura196/articles/4389eb6eb4e08a

使い方

コレクション一覧

// app/api/zotero/collections/route.js
import { NextResponse } from "next/server";
import api from "zotero-api-client";
import { prisma } from "@/lib/prisma";
import { decrypt } from "../../posts/encryption";
import { getSession } from "@auth0/nextjs-auth0";

async function fetchZoteroCollections(
  zoteroApiKey: string,
  zoteroUserId: string
) {
  const myapi = api(zoteroApiKey).library("user", zoteroUserId);
  const collectionsResponse = await myapi.collections().get();
  return collectionsResponse.raw;
}

特定のコレクション

// app/api/zotero/collection/[id]/route.ts
import { NextResponse } from "next/server";
import api from "zotero-api-client";
import { prisma } from "@/lib/prisma";
import { decrypt } from "@/app/api/posts/encryption";
import { getSession } from "@auth0/nextjs-auth0";

async function fetchZoteroCollection(
  zoteroApiKey: string,
  zoteroUserId: string,
  collectionId: string
) {
  const myapi = api(zoteroApiKey).library("user", zoteroUserId);
  const collectionResponse = await myapi.collections(collectionId).get();
  return collectionResponse.raw;
}

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

// app/api/zotero/collection/[id]/items/route.ts
import { NextResponse, NextRequest } from "next/server";
import api from "zotero-api-client";
import { prisma } from "@/lib/prisma";
import { decrypt } from "@/app/api/posts/encryption";
import { getSession } from "@auth0/nextjs-auth0";

async function fetchZoteroCollection(
  zoteroApiKey: string,
  zoteroUserId: string,
  collectionId: string
) {
  const myapi = api(zoteroApiKey).library("user", zoteroUserId);
  const collectionResponse = await myapi
    .collections(collectionId)
    .items()
    .get();
  return collectionResponse.raw;

参考

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

まとめ

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