pocketbase-nextjs-auth

pocketbase-nextjs-auth is an open-source Next.js boilerplate that shows developers how to wire PocketBase as a self-hosted backend for authentication, server actions, and mixed rendering strategies. The project is built on Next.js and pairs it with a Dockerized PocketBase server, so the whole backend can be started with a single docker compose command. It is distributed as a GitHub repository and is intended as a learning resource and starter kit.

What is pocketbase-nextjs-auth?

pocketbase-nextjs-auth is a sample Next.js application that integrates the PocketBase backend as its database and authentication layer. It takes no input beyond a browser request, and it produces a running web app with registration and login pages, protected routes, and server action examples. The repository runs on Next.js (App Router implied by the use of server actions and middleware) and provides a typed PocketBase client generated by pocketbase-typegen. The author is not stated on the page; it is a public repository with 24 stars.

Key Features

• Dockerized PocketBase server — The docker-compose.yml file starts a PocketBase instance with one command, docker compose up --detach, so no manual backend installation is needed.
• Registration and login pages — Basic auth pages are included, giving developers a starting point for PocketBase email/password authentication.
• Server actions example — The repo demonstrates how to handle mutations on the server with Next.js server actions, a pattern for form handling without custom API routes.
• Server-side and client-side rendering techniques — The code shows how to mix SSR and CSR with Next.js, including a middleware file that checks authentication on the server side.
• Typed PocketBase client — Uses pocketbase-typegen to generate TypeScript types for the PocketBase schema, giving autocompletion and type safety.
• Middleware auth checks — src/lib/pocketbase/middleware.ts is where server-side auth checks happen; the README reminds developers to adjust it to allow public access to specific pages.

Who is it for?

• Next.js developers who want a working starting point for a full-stack app with a self-hosted backend can clone the repo and run two commands to get a local PocketBase instance and Next.js dev server.
• Developers learning server actions can study the included server action examples to see how to handle form submissions and data mutations inside Next.js.
• Teams building products with PocketBase can use the template as a reference for adding typed clients, middleware-based auth, and Dockerized deployment to their own projects.

What can you do with pocketbase-nextjs-auth?

• Scaffold a PocketBase-backed app: Clone the repository, run docker compose up --detach to launch PocketBase, then npm run dev to start the Next.js app on localhost:3000.
• Learn PocketBase auth flows: Explore the registration and login pages to see how PocketBase sessions are created and protected through Next.js middleware.
• Generate typed PocketBase code: Run pocketbase-typegen against the PocketBase schema to keep the client in sync with the database.

How does pocketbase-nextjs-auth work?

The setup workflow is three steps: start the PocketBase server with Docker Compose, install dependencies, and run the Next.js development server. The middleware file runs before requests reach page components and checks whether a user is authenticated, allowing routes to be protected or public as configured. Server actions in the app handle data mutations directly from React components.

Pros and cons

• Dockerized backend — PocketBase runs in a container, making the setup reproducible across machines.
• Type safety — pocketbase-typegen generates TypeScript types, catching schema mismatches at compile time.
• Requires middleware configuration — The README explicitly says you must adjust the middleware to allow unrestricted access to specific pages; this is a manual step, not an automatic feature.

FAQ

Is pocketbase-nextjs-auth free?

Yes, the repository is publicly available on GitHub with an open-source license (implied by the public repo; the exact license is not stated in the README). You can clone it and use it as a starting point for your own Next.js and PocketBase project.

What is PocketBase?

PocketBase is an open-source backend that bundles a SQLite database, file storage, admin UI, and authentication API into a single binary. In this template, it is run inside Docker and used as the data store and auth provider for the Next.js app.

How do I run the PocketBase server?

Run docker compose up --detach from the project root. This starts the PocketBase container in the background. Then start the Next.js dev server with npm run dev (or yarn/pnpm/bun) and open http://localhost:3000.

What is pocketbase-typegen?

pocketbase-typegen is a tool that generates TypeScript types from your PocketBase collection schema. This template uses it to produce a typed client, so your code gets autocompletion and compile-time checks against the database structure.

Does the template support client-side rendering?

Yes, the README explicitly lists "techniques for both server-side and client-side rendering" as a feature. The middleware handles server-side auth, while regular Next.js components can be client-side.