Skip to content

This template repository contains the base structure of a nextjs app with a pocketbase backend.

License

Notifications You must be signed in to change notification settings

natrontech/pocketbase-nextjs-template

PocketBase Next.js Template

A
Template Repository
for Next.js apps with a PocketBase backend

Build Sponsors License CodeFactor

pocketbase-nextjs-template allowes you to create a Next.js app with a PocketBase backend in seconds. 🚀

Check out the company behind pocketbase-nextjs-template – https://natron.io

 

Everything you would expect

Getting started

Search through all files/folders and replace all instances of pocketbase-nextjs-template with your project name.
There is a bash script that does this for you:

Just run it and follow the instructions.
To deploy your app, you can containerize it with the included Dockerfile(s) under ./build/package/pocketbase and ./ui.
Or simply execute the docker-compose file docker-compose.yaml to run the app locally.

Open Source

Trust me, I'm open source.
You can find the source code on Github.
The frontend is written in Next.js and the backend in GoLang (Pocketbase).
License: GPL 3

Frontend

The frontend is written in TypeScript and uses Next.js.
It uses Tailwind CSS for styling with Flowbite React as a design system.
There are also some self-written components in the components folder.
These are mostly inspired by the ui of Pocketbase.
Just use them as you like. They are similar to the Pocketbase UI Components.

 

Setup

You can deploy pocketbase-nextjs-template in your Kubernetes cluster, but you have to set all the env variables.

Environment Variables

You need to set the following Environment

Pocketbase

  • POCKETBASE_DATA_DIR - The directory where the Pocketbase data is stored. Default: /pb_data
  • POCKETBASE_ENCRYPTION_KEY - The encryption key for the Pocketbase database. Must be 32 characters long.

UI

  • ENV_API_URL - The URL of the API, e.g. https://template.natron.io (without trailing slash, but /api at the end, must be accessible from the webclient)

Docker

You can also build and run pocketbase-nextjs-template with Docker.

version: "3.9"
services:
  pocketbase:
    build:
      context: ./
      dockerfile: ./build/package/pocketbase/Dockerfile
    ports:
      - "8090:8090"
    volumes:
      - data:/data

  ui:
    build: ./ui
    ports:
      - "3000:3000"
    environment:
      - ENV_API_URL=http://template.natron.io:8090


volumes:
  data: {}

Production

You can deploy pocketbase-nextjs-template in your Kubernetes cluster, but you have to set all the env variables.
For backing up the database, you can consider using Litestream.