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.

zotero-rouge.vercel.app
zotero-rouge.vercel.app

Library

I used the following library.

GitHub - tnajdek/zotero-api-client: Lightweight, minimalistic Zotero API client written in JavaScript.
Lightweight, minimalistic Zotero API client written in JavaScript. - tnajdek/zotero-api-client
GitHub

Getting the API Key and Other Information

Please refer to the following article.

App Development Using Zotero's API and Streamlit
App Development Using Zotero's API and Streamlit
ldas.jp

Usage

Collection List

// 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;
}

Specific Collection

// 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;
}

List of Items in a Specific Collection

// 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;

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.

Summary

I hope this is helpful for using the Zotero API.