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.

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

Library

I used the following library.

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

Getting the API Key and Other Information

Please refer to the following article.

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.