DEV Community

Cover image for How I Built an AI PDF Summarizer on Cloudflare Edge (Next.js + next-auth v5)
xiaowei
xiaowei

Posted on

How I Built an AI PDF Summarizer on Cloudflare Edge (Next.js + next-auth v5)

The Problem
I was tired of reading 50-page reports just to find 3 key points.

Existing tools either cost too much, require a desktop install, or just do dumb text extraction with no intelligence. I wanted something that could summarize, explain, and answer questions about any PDF β€” in the browser, for free.

So I built SumifyPDF.

What It Does
πŸ€– AI Summary β€” upload a PDF, get key insights in ~10 seconds
πŸ’¬ Chat with PDF β€” ask "what are the risks?" or "summarize section 3"
πŸ—ΊοΈ Mind Map β€” auto-generated visual overview
πŸ“ PDF β†’ Word conversion
πŸ–ΌοΈ PDF β†’ Image export
πŸ”— Merge PDFs
πŸ”’ Encrypt / Decrypt
πŸ“· OCR for scanned documents
All running in the browser. No install. Free to start.

Tech Stack
Next.js 14 on Cloudflare Pages (Edge Runtime)
Advanced AI models for summarization and chat
OCR API for scanned document support
next-auth v5 beta for Google OAuth
PayPal for Pro subscriptions
Cloudflare Workers for all API routes
The Hard Parts

  1. Cloudflare Edge + next-auth = Pain This was the biggest headache. next-auth v4 depends on Node.js crypto module β€” which doesn't exist on Cloudflare Edge Runtime.

The error:

Module not found: Can't resolve 'crypto'
​
Fix: Migrate to next-auth v5 beta (5.0.0-beta.30), which is Edge-compatible.

// src/lib/auth.ts
import NextAuth from 'next-auth';
import Google from 'next-auth/providers/google';

export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [Google],
trustHost: true,
session: { strategy: 'jwt' },
});
​
// src/app/api/auth/[...nextauth]/route.ts
export const runtime = 'edge'; // ← this is the key line
export { handlers as GET, handlers as POST } from '@/lib/auth';
​
Also: SessionProvider can't be used directly in layout.tsx β€” it causes prerender crashes on /_not-found. Wrap it in a 'use client' component:

// src/components/ClientProviders.tsx
'use client';
import { SessionProvider } from 'next-auth/react';
export function AuthProvider({ children }: { children: React.ReactNode }) {
return {children};
}
​

  1. Wrong Deploy Path First deployment: the site showed only 404 pages.

I was deploying .next/export β€” which only contains the 404/500 pages when using next-on-pages.

Correct path:

npx @cloudflare/next-on-pages@1
npx wrangler pages deploy .vercel/output/static --project-name=my-project
​
The build output goes to .vercel/output/static, not .next/.

  1. Prisma / SQLite on Edge Early version used Prisma + SQLite for session storage. Edge Runtime doesn't support Node.js file system APIs.

Fix: Switched to JWT sessions (stateless). No database needed for auth.

  1. pnpm Lockfile Conflicts Cloudflare Pages build kept failing with:

ERR_PNPM_OUTDATED_LOCKFILE
​
Fix: Delete pnpm-lock.yaml and let it regenerate. Or switch to npm.

Architecture Overview
User Browser
β”‚
β–Ό
Cloudflare Pages (Edge)
β”œβ”€β”€ Next.js App Router (SSR on Edge)
β”œβ”€β”€ /api/summarize β†’ AI summarization
β”œβ”€β”€ /api/chat β†’ Conversational Q&A
β”œβ”€β”€ /api/ocr β†’ Scanned PDF processing
└── /api/auth β†’ next-auth v5 (Edge)
​
All API routes run as Cloudflare Workers β€” globally distributed, ~0 cold start.

What I'd Do Differently
Start with next-auth v5 β€” don't waste time on v4 for Edge projects
Test the deploy path early β€” wrangler pages deploy has specific requirements
Keep auth stateless β€” JWT sessions are simpler and Edge-compatible
Ship fast, iterate β€” the first version had 3 features. Now it has 8.
Try It
πŸ‘‰ sumifypdf.com β€” free to use, no signup required for basic features.

If you're building on Cloudflare Edge with Next.js, happy to answer questions in the comments. The auth + Edge combination has a lot of undocumented gotchas.

Top comments (0)