> Markdown version of [/videos/449-create-a-programmatic-seo-project-using-next-js-and-static-site-generation?t=108](https://www.wearedevelopers.com/videos/449-create-a-programmatic-seo-project-using-next-js-and-static-site-generation?t=108). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Create a Programmatic SEO Project Using Next.js and Static Site Generation

How do you algorithmically generate 30,000 SEO-optimized landing pages over a single weekend? Discover how Next.js and static site generation effortlessly automate programmatic SEO.

- **Speakers:** Dino Lozina
- **Event:** World Congress 2022
- **Published:** June 15, 2022
- **Duration:** 20:50
- **URL:** https://www.wearedevelopers.com/videos/449-create-a-programmatic-seo-project-using-next-js-and-static-site-generation

## Summary

**The Strategy:** This presentation explores the architecture of programmatic SEO, inspired by Zapier, which algorithmically generates thousands of integration landing pages. Instead of competing for highly saturated, broad terminology, programmatic SEO targets highly specific, long-tail search terms (e.g., "WhatsApp Salesforce C# integration") by generating dynamic pages at scale. **The Technical Challenge:** The primary hurdle involves web crawler behavior. Search engines struggle to index applications built with standard client-side rendering (CSR) tools, as the initial HTML load is empty. A backend engineer tasked with solving this over a weekend recognized that traditional templates would mandate manual repetition or result in invisible pages for search ranking algorithms. **The Next.js Solution:** To resolve this, the developer utilized Next.js for its built-in static site generation (SSG) and pre-rendering framework. Using just one React template and a .NET backend API, the application dynamically generated 30,000 unique URLs. The architecture leverages two core Next.js methods: getStaticPaths to securely map every permutation of integration routes at build time, and getStaticProps to inject external API data directly into each page. **Key Takeaways:** You do not need to manage 30,000 static files; rely on automated dynamic route generation. However, simply copy-pasting HTML structure can trigger search engine duplicate content penalties. To maintain high search ranking across such a vast programmatic surface area, developers must dynamically inject unique supplementary data, varied CSS properties, and dense linking structures directly from the API layer.

**Keywords:** programmatic SEO, static site generation, next.js pre-rendering, long-tail keywords, web crawler indexing, client-side rendering challenges, getstaticprops, getstaticpaths, landing page automation, API backend integration, duplicate content penalties, server-side HTML, dynamic route generation, search engine ranking

## Chapters

1. **Speaker background and initial programmatic SEO motivations** (00:05) — An overview of the engineering background guiding this dynamic site generation project.
1. **Drawing inspiration from Zapier for programmatic SEO** (01:48) — How management expectations to automatically generate thousands of landing pages initiated the architecture design.
1. **Targeting long-tail keywords for search engine optimization** (03:08) — Why generating specialized landing pages for niche queries avoids competing against established high-value search terms.
1. **Adapting template structures for company communication integrations** (04:30) — Mapping existing enterprise messaging integrations into a reusable layout containing channels, platforms, and programming languages.
1. **Establishing route paths from existing landing pages** (06:10) — Stripping JavaScript from an initial company template to create a clean HTML foundation for dynamic routing.
1. **Understanding how search crawlers process rendered content** (06:53) — Why standard web crawlers index raw HTML responses significantly faster than deferred JavaScript execution models.
1. **The limitations of client-side rendering for search visibility** (08:17) — How relying entirely on client-side frameworks like Blazor prevents search engines from properly indexing dynamic content.
1. **Selecting Next.js for hybrid static and server rendering** (09:50) — Adopting a batteries-included framework to dynamically construct HTML layouts instead of manually duplicating static files.
1. **File-based routing and pre-rendering architecture in Next.js** (11:29) — How built-in automated pre-rendering serves immediate HTML to search bots while preserving interactive client-side hydration.
1. **Data fetching with getStaticProps and getStaticPaths functions** (13:11) — Using framework lifecycle methods to construct specific page routes from external database entries at compile time.
1. **Connecting a backend API to the Next.js frontend** (14:35) — Serving an integration catalog from a dedicated API to supply the static generator with structured information.
1. **Reviewing the generated programmatic SEO landing pages** (16:12) — Comparing the dynamically stitched Next.js integration routes against the initial third-party examples that inspired the project.
1. **Addressing content uniqueness and framework compatibility concerns** (17:55) — Strategies for introducing page variety through backlinks alongside typescript support evaluations.

## Related Moments

- [Solving SEO challenges by pre-rendering AI-generated sites](https://www.wearedevelopers.com/videos/100083-kill-your-wordpress-ship-in-minutes-win-the-seo-game) (from "Kill Your WordPress. Ship in Minutes. Win the SEO game.")
- [Leveraging the Next.js framework for performance improvements](https://www.wearedevelopers.com/videos/973-next-js-unleashed-optimizing-web-vitals-for-superior-user-experience) (from "Next.js Unleashed: Optimizing Web Vitals for superior User Experience")
- [Optimizing static markup structure for machine learning web crawlers](https://www.wearedevelopers.com/videos/1286-wearedevelopers-live-browser-extensions-honey-scam-jailbreaking-llms-and-more) (from "WeAreDevelopers Live: Browser Extensions, Honey Scam, Jailbreaking LLMs and more")
- [Why single-page applications struggle with search engine optimization](https://www.wearedevelopers.com/videos/217-seo-in-angular-no-big-deal-with-ssr-and-angular-universal) (from "SEO in Angular? No big deal with SSR and Angular Universal ")
- [Building pre-rendered and serverless applications with Next](https://www.wearedevelopers.com/videos/421-next-nest-nuxt-nust) (from "Next, Nest, Nuxt… Nust?")
- [Fetching data using static and server-side Next.js props](https://www.wearedevelopers.com/videos/311-graphql-apollo-next-js-a-lovely-trio) (from "GraphQL + Apollo + Next.js: A Lovely Trio")

## Related Articles

- [SEO in an AI world - Google vs. ChatGPT and survival tips for content creators](https://www.wearedevelopers.com/magazine/534-seo-in-an-ai-world-google-vs-chatgpt-and-survival-tips-for-content-creators)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [Dev Digest 120 - Apple and peers](https://www.wearedevelopers.com/magazine/455-dev-digest-120-apple-and-peers)
- [The Web We Broke (And Why AI Agents Are Paying the Price) - AgentCon Berlin](https://www.wearedevelopers.com/magazine/735-the-web-we-broke-and-why-ai-agents-are-paying-the-price-agentcon-berlin)

## Related Jobs

- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**
- [Principal Engineer - AI Search & Vector Infrastructure](https://www.wearedevelopers.com/jobs/ext/353953-principal-engineer-ai-search-vector-infrastructure) at **Redis**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1377585-software-engineer) at **Bitpanda**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**