Dino Lozina

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

Generate over 30,000 unique landing pages from a single Next.js template. Learn to build a powerful programmatic SEO engine using static site generation.

Create a Programmatic SEO Project Using Next.js and Static Site Generation
#1about 3 minutes

How Zapier's SEO strategy inspired the project

The project was inspired by Zapier's success in generating massive organic traffic by creating thousands of integration-specific landing pages.

#2about 4 minutes

Targeting long-tail keywords instead of high-value terms

Programmatic SEO focuses on generating many pages for specific long-tail keywords instead of competing for broad, high-value keywords.

#3about 4 minutes

Why search engine crawlers prefer server-rendered HTML

Google crawlers can easily parse server-rendered HTML for quick indexing, whereas client-side rendered JavaScript can be slow and unreliable.

#4about 3 minutes

Choosing Next.js for static site generation

Next.js was selected for its powerful features like hybrid static and server rendering, route pre-fetching, and minimal configuration.

#5about 1 minute

Generating dynamic pages with getStaticPaths and getStaticProps

Use `getStaticPaths` to define all the dynamic routes and `getStaticProps` to fetch data for each page from an external API at build time.

#6about 3 minutes

Combining a .NET API with a Next.js frontend

The final solution uses a .NET backend API to provide path and content data to a Next.js frontend, which generates all static pages at build time.

#7about 3 minutes

Q&A on unique content, TypeScript, and Gatsby

The Q&A covers strategies for ensuring content uniqueness, Next.js's full TypeScript compatibility, and a comparison with Gatsby.

Related jobs
Jobs that call for the skills explored in this talk.

test

Milly

Milly
Vienna, Austria

Intermediate
.NET
TypeScript
+1

test

Milly

Milly
Vienna, Austria

Intermediate
.NET
TypeScript
+1

Matching moments

An overview of Next.js and its optimization capabilities
03:55 MIN

An overview of Next.js and its optimization capabilities

Next.js Unleashed: Optimizing Web Vitals for superior User Experience

Audience Q&A on use cases, CMS, and SEO
04:14 MIN

Audience Q&A on use cases, CMS, and SEO

One Framework To Rule Them All: Faster Websites With Astro

Creating dynamic product pages with Next.js
07:08 MIN

Creating dynamic product pages with Next.js

Teini - an extremely small webshop leveraging awesome and free tech

Answering questions on headless architecture
06:37 MIN

Answering questions on headless architecture

Fast & Furious - Going headless with Nuxt.js!

Using static site generators and Jamstack for efficiency
05:13 MIN

Using static site generators and Jamstack for efficiency

How Your Bundle Size Affects The Climate

Key takeaways and best practices for Angular SEO
05:21 MIN

Key takeaways and best practices for Angular SEO

SEO in Angular? No big deal with SSR and Angular Universal

Using static site generators to pre-render markup
04:02 MIN

Using static site generators to pre-render markup

Jamstack and Web Performance, a match made in heaven

Understanding the SEO problem in single-page applications
06:14 MIN

Understanding the SEO problem in single-page applications

SEO in Angular? No big deal with SSR and Angular Universal

Featured Partners

Related Videos

See all videos
GraphQL + Apollo + Next.js: A Lovely Trio40:45

GraphQL + Apollo + Next.js: A Lovely Trio

Josh Goldberg

SEO in Angular? No big deal with SSR and Angular Universal 44:00

SEO in Angular? No big deal with SSR and Angular Universal

Martina Kraus

Next, Nest, Nuxt… Nust?26:30

Next, Nest, Nuxt… Nust?

Marius Obert

Next.js Unleashed: Optimizing Web Vitals for superior User Experience26:44

Next.js Unleashed: Optimizing Web Vitals for superior User Experience

Eileen Fürstenau

Microfrontends at Scale43:20

Microfrontends at Scale

Josh Goldberg

Teini - an extremely small webshop leveraging awesome and free tech40:45

Teini - an extremely small webshop leveraging awesome and free tech

Christian K.

Fast & Furious - Going headless with Nuxt.js!42:21

Fast & Furious - Going headless with Nuxt.js!

Samuel Snopko

But, you're not Facebook31:12

But, you're not Facebook

Kristijan Ristovski

Related Articles

View all articles
AH
Astrid Horton
Role of Web Developer in SEO in 2022
Today's era is categorized by digital transformation, and the year 2022 will continue to categorize by digital transformation and rapid development of technologies. According to statistics, more than a half of surveyed companies stated that they want...
Role of Web Developer in SEO in 2022
LM
Luis Minvielle
Developers share the most interesting tech they ever built
Most people's first thoughts about Hacker News revolve around venture capital, stock prices, company valuations, and $1499 dongles. But what if we told you that Hacker News could also be a place for pure, consummate, wholesome content that tackles ho...
Developers share the most interesting tech they ever built
LM
Luis Minvielle
10 Developer Websites in 2023
As a web developer, you're always investigating how to level up your skills and streamline your workflow. That's why we've gathered a collection of 10 innovative tools that are guaranteed to boost your productivity, enhance your coding abilities, ele...
10 Developer Websites in 2023
CH
Chris Heilmann
All the videos of Halfstack London 2024!
Last month was Halfstack London, a conference about the web, JavaScript and half a dozen other things. We were there to deliver a talk, but also to record all the sessions and we're happy to share them with you. It took a bit as we had to wait for th...
All the videos of Halfstack London 2024!

From learning to earning

Jobs that call for the skills explored in this talk.