Prezly Bea Theme

Bea Prezly Theme is based on Next.js 12+ framework.

• Made with TypeScript, Prezly SDK and Prezly Content React Renderer.
• Data-fetching is handled by Prezly Theme Kit and Prezly SDK.
• Multi-language is powered by React Intl and Prezly Themes Translations.
• Analytics powered by Prezly Analytics.
• Code-style is ensured by Biome.
• Search is powered by Meilisearch
• Error-logging with Sentry.

Requirements

• Node.js and pnpm (preferred). This repository includes a pnpm-lock.yaml lockfile. If you don't have pnpm installed, install it with npm install -g pnpm or enable Corepack (corepack enable).

Quick Start

Getting Started

Run the following command on your local environment

git clone https://github.com/prezly/theme-nextjs-bea
cd theme-nextjs-bea
pnpm install

Set up your .env.local file by copying .env.example:

cp .env.example .env.local

You'll need to populate it with your Prezly Access Token and your newsroom's UUID. You can use one from the Testing/Token section below.

Additionally, you'll need to provide:

• Sitekey for HCaptcha if you want HCaptcha to work on the Subscribe form.
• API key for Prezly's search index (you can contact Prezly support to issue a token for you)

After that you can run locally in development mode with live reload:

pnpm dev

Open http://localhost:3000 with your favorite browser to see your project.

Deploy your own

Deploy the example using Vercel or Netlify:

Vercel	Netlify

Deploying in a Subfolder (Reverse Proxy)

The theme supports being deployed behind a reverse proxy at a subfolder path (e.g., https://example.com/help/ instead of https://example.com/). This is useful when you want to integrate the help center into an existing website.

How it works

The application reads the base path from the X-Base-Path HTTP header, which should be set by your reverse proxy. All internal links will automatically include this prefix.

Nginx Configuration

# Proxy the help center at /help/
location /help/ {
    proxy_pass http://your-nextjs-app:3000/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Base-Path /help;
}

# Proxy Next.js static assets
location /help/_next/ {
    proxy_pass http://your-nextjs-app:3000/_next/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

Caddy Configuration

example.com {
    handle_path /help/* {
        reverse_proxy your-nextjs-app:3000 {
            header_up X-Base-Path /help
        }
    }
}

Apache Configuration

<Location /help/>
    ProxyPass http://your-nextjs-app:3000/
    ProxyPassReverse http://your-nextjs-app:3000/
    RequestHeader set X-Base-Path "/help"
</Location>

<Location /help/_next/>
    ProxyPass http://your-nextjs-app:3000/_next/
    ProxyPassReverse http://your-nextjs-app:3000/_next/
</Location>

Alternative: Environment Variable

If you cannot set headers in your reverse proxy, you can alternatively set the BASE_PATH environment variable:

BASE_PATH=/help

Note: The header method (X-Base-Path) takes precedence over the environment variable.

Testing Locally

To test the subfolder deployment locally, use the included test proxy script:

# Terminal 1: Start the Next.js dev server
pnpm dev

# Terminal 2: Start the test proxy
pnpm test:proxy

Then visit http://localhost:4000/help/ to see the app running as if deployed at /help/.

You can also specify a custom base path:

node scripts/test-proxy.mjs /docs

Scripts in package.json

In addition to regular Next scripts, we provide some scripts to help with code-styling and linting checks. This repo is configured with GitHub workflows to run linter checks on every push, but you can also run these checks locally, along with TypeScript checks, by running this script:

pnpm run check

Code formatting and linting is handled by Biome. You can run linting with pnpm run lint, auto-fix issues with pnpm run lint:fix, format code with pnpm run format, or auto-format with pnpm run format:fix.

Documentation

Business logic

The data layer is abstracted by Prezly Theme Kit. You can get more info on it in the repo README.

Logic for content display is based heavily on Prezly Theme Starter. Check it out if you only want to see the bare minimum required to display data from Prezly newsrooms.

Testing/Token

To ease with development we have created a few sample newsrooms in different categories:

• The Good Newsroom (preview on vercel): A newsroom filled with good news
• Cookbook (preview on vercel): Recipes shared by the Prezly team
• Anonymous Photographer (preview on vercel): Pictures from a photographer. Combination of albums and imagery

A list of tokens/newsroom uuids that can be used to kickstart the theme.

Name	API Token	Newsroom UUID
Good Newsroom	HKcab_nEbab_a7b2fe3a3465d3729772fa5381800ab5a0c30d8d	578e78e9-9a5b-44ad-bda2-5214895ee036
Cookbook	TKcab_nEbab_28432b75d3a85a826e51cd0b502a3d76acf98d19	9d90b2c1-aed9-4415-a9fb-82dd3a2a1b52
Anonymous Photographer	SKcab_nEbab_0b63a6dd0b09286cc99fab93e6e80bfd9aecfbb5	ce8299f6-a293-41df-8ffc-1c064d4401bc

Contributions

Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.

License

Prezly Bea Theme is MIT licensed.

---

Made with ♥ by Prezly