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 init
npm run db
- Connect your repository to Vercel.
- Add your env variables to Vercel.
- In vercel change the build:
npm run prod:build