Home
Softono

Pseo Next

Open source TypeScript
Website GitHub
60
Stars
9
Forks
1
Issues
2
Watchers
3 years
Last Commit
HTML CSS & Website Templates SEO Tools

 About Pseo Next

Next 13 Programmatic SEO template

Platforms

Web Self-hosted

Languages

TypeScript

Links

Website Source Code

Need Help Installing Pseo Next?

We provide expert installation service for this software. Our team will install, configure, and secure Pseo Next on your server. plans start at just $30.

Hire an Expert

Alternatives to Pseo Next

View All

Svelte Kit Ssr Boilerplate

🧵 Svelte server-side-rendering built with SEO in mind. Start your project with this friendly svelte kit boilerplate

37
Published by
agamm
Visit View Profile

Pseo Next

View on GitHub

Next 13 Boilerplate for Programmatic SEO Campaigns

A terse template for creating modern Programmatic SEO campaigns. Including all of the features you would expect in a modern pSEO campaign. From the creator of unzip.dev.

image

Programmatic SEO Features

  • ⚡ Utalizes Next 13 for Static Fast Webpage Loading and Deploy on Vercel.
  • 🏗️ Use ISR for regenerating infomration on Vercel during runtime.
  • 🗺️ Sitemaps and Robots.txt generated automatically even with ISR regeneration via next-sitemap.
  • 🏯 Site, Blog and Variant page have distinct layouts.
  • 🤖 SEO metadata, JSON-LD and Open Graph tags with Next SEO.
  • 💯 Maximize lighthouse score.
  • 🍪 Built in Cookie Banner.
  • 📊 Built in Google Analytics.
  • 📷 Auto 404 Image place holder component.

Developer experience first:

  • 📦 Prisma (Postgres-compatible) for easy DB interaction.
  • 🔥 Type checking TypeScript.
  • 💎 Integrate with Tailwind CSS.
  • ✅ Strict Mode for TypeScript and React 18.
  • 💖 Code Formatter with Prettier.
  • 💡 Absolute Imports using @ prefix.
  • 🧪 E2E Testing with Playwright.

Getting Started

  1. git clone [email protected]:agamm/pseo-next.git pseo-example

  2. npm i

  3. Start docker (for local postgress DB)

  4. Open https://localhost:3000/

  5. Check the Development section.

  6. Open http://localhost:3000 with your browser to see the result.

Development

  • .env.example -> mv to -> .env (change parameters if needed)

  • /src/app/(site) - all of your landing pages go here (Home page, about, terms etc...)

  • /posts - Your blog written as Markdown files.

  • /src/app/blog - change your blog layout.

  • /src/variant/[slug] - This is where you do your Programmatic variants.

    • Would be something like: yoursite.com/hotels/spain-summer-2023 (variant="hotels", slug="spain-summer-2023")
    • Remember to uncomment the comments there to actually fetch from your DB.

  • Make sure to look into /src/components (I recommend using <TryImage> everywhere)

Lastly after fixing all of the FIXME comments. Connect your project to Prisma by:

  • Adding your schema in /prisma/schema.prisma
  • npx prisma migrate dev --name init
  • npm run db

Deployment

  1. Connect your repository to Vercel.
  2. Add your env variables to Vercel.
  3. In vercel change the build: npm run prod:build