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.
- ⚡ 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.
- 📦 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.
-
git clone git@github.com:agamm/pseo-next.git pseo-example -
npm i -
Start docker (for local postgress DB)
-
Open
https://localhost:3000/ -
Check the
Development section. -
Open http://localhost:3000 with your browser to see the result.
-
.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 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 initnpm run db
- Connect your repository to Vercel.
- Add your env variables to Vercel.
- In vercel change the build:
npm run prod:build