frappe-nextjs

A TypeScript package to manage Next.js frontends for Frappe apps — with full SSR support, React hooks, and CLI tools.

Think of it as Doppio but purpose-built for Next.js.

Features

• 🚀 CLI — Scaffold, build, and deploy Next.js apps inside Frappe custom apps
• 🔌 API Client — Type-safe Frappe REST API client with CRUD, method calls, file uploads
• ⚛️ React Hooks — SWR-based hooks for data fetching, auth, and file uploads
• 🖥️ SSR — Full server-side rendering via supervisor-managed Node.js server
• 📦 Static Export — Simple static build that works on Frappe Cloud
• 📖 TypeScript — Fully typed, first-class TypeScript support

Quick Start

# Install
npm install -g frappe-nextjs

# Scaffold (inside your bench directory)
frappe-nextjs init --app myapp --name dashboard --mode ssr

# Start development
cd apps/myapp/dashboard && npm run dev

Usage

React Hooks

import { useFrappeDocList, useFrappeAuth } from 'frappe-nextjs';

function TodoList() {
  const { isLoggedIn, user } = useFrappeAuth();
  const { data, isLoading } = useFrappeDocList({
    doctype: 'ToDo',
    fields: ['name', 'description', 'status'],
    filters: [['status', '=', 'Open']],
    limit: 20,
  });

  return (/* ... */);
}

Server Components (SSR)

// app/todos/page.tsx — Server Component
import { frappe } from "@/lib/frappe";

export default async function TodosPage() {
  const todos = await frappe.getDocList({
    doctype: "ToDo",
    fields: ["name", "description"],
  });

  return (
    <ul>
      {todos.map((t) => (
        <li key={t.name}>{t.description}</li>
      ))}
    </ul>
  );
}

CLI Commands

| Command | Description | | ------------------------- | -------------------------------------------- | | frappe-nextjs init | Scaffold Next.js project inside a Frappe app | | frappe-nextjs build | Build and deploy (static or SSR) | | frappe-nextjs setup-ssr | Generate supervisor + nginx configs |

Documentation

• Getting Started
• Architecture
• Connecting to Frappe
• Data Fetching & SSR
• Build & Deployment
• API Reference

License

MIT