Pseo Next

Pseo Next is a Next.js 13 boilerplate for building programmatic SEO campaigns, combining static site generation, incremental static regeneration, and database-driven content into one deployable template.

What is Pseo Next?

Pseo Next is an open-source boilerplate that lets you generate large numbers of SEO-optimized pages from structured data. It uses the Next.js App Router and outputs pages at routes such as /variant/[slug] (for example, yoursite.com/hotels/spain-summer-2023). The template wires together static generation and ISR so pages load quickly on Vercel while still reflecting fresh database content. It is created by the maintainer of unzip.dev and lives at github.com/agamm/pseo-next.

Key Features

• Next.js 13 static generation — Pages are statically generated for fast loading and deploy directly to Vercel.
• Incremental Static Regeneration (ISR) — Revalidates content at runtime on Vercel, so database updates appear without a full rebuild.
• Automatic sitemaps and robots.txt — next-sitemap generates both files, even when ISR creates new pages during runtime.
• Three distinct layouts — Separate layouts for the site pages in /src/app/(site), blog posts in /src/app/blog, and programmatic variants in /src/variant/[slug].
• SEO metadata, JSON-LD, and Open Graph — Managed through Next SEO across all page types.
• Built-in cookie banner and Google Analytics — Included as components, so you don't need to integrate them separately.
• Prisma with Postgres — The schema lives in /prisma/schema.prisma, and local development uses Docker to run Postgres.
• Developer tooling — TypeScript strict mode, React 18, Tailwind CSS, Prettier, absolute imports with the @ prefix, and Playwright E2E testing.

Who is it for?

• SEO engineers who want to launch large sets of templated landing pages without building a content pipeline from scratch.
• Growth marketers who need to publish hundreds of keyword-specific pages (such as hotel pages per city and season) and want them indexed correctly.
• Next.js developers who want a preconfigured project with testing, formatting, Prisma, and Tailwind already wired up.

What can you do with Pseo Next?

• Launch programmatic landing pages: Use the variant route to generate pages like yoursite.com/hotels/spain-summer-2023, pulling live data from Prisma.
• Publish a blog alongside a campaign: Write posts as Markdown files in /posts and control the layout from /src/app/blog.
• Deploy directly to Vercel: Connect the repository, add environment variables, and set the build command to npm run prod:build.

How does Pseo Next work?

The setup flow is: clone the repo, run npm install, start Docker for the local Postgres database, copy .env.example to .env, and add your schema to /prisma/schema.prisma. Then run npx prisma migrate dev --name init and npm run db to start developing. For production, connect the repo to Vercel, set the environment variables, and use the custom build command npm run prod:build. The template contains FIXME comments that walk you through the required customizations.

FAQ

How do I create a new programmatic variant page?

Variant pages live in /src/variant/[slug]. Add your rendering logic there and uncomment the section that fetches from Prisma to populate each slug with database content.

Does Pseo Next generate sitemaps automatically?

Yes. The template uses next-sitemap, which generates sitemap.xml and robots.txt automatically, even when ISR adds new pages during runtime.

What database is required?

Pseo Next uses Prisma with a Postgres-compatible database. Locally, you start Docker to run Postgres; in production, you can connect any Postgres-compatible database.

What is the deployment build command for Vercel?

In Vercel, set the build command to npm run prod:build and add your environment variables before deploying.