Dino Lozina
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.
Matching moments
03:55 MIN
An overview of Next.js and its optimization capabilities
Next.js Unleashed: Optimizing Web Vitals for superior User Experience
07:08 MIN
Creating dynamic product pages with Next.js
Teini - an extremely small webshop leveraging awesome and free tech
04:14 MIN
Audience Q&A on use cases, CMS, and SEO
One Framework To Rule Them All: Faster Websites With Astro
05:13 MIN
Using static site generators and Jamstack for efficiency
How Your Bundle Size Affects The Climate
05:21 MIN
Key takeaways and best practices for Angular SEO
SEO in Angular? No big deal with SSR and Angular Universal
06:37 MIN
Answering questions on headless architecture
Fast & Furious - Going headless with Nuxt.js!
04:25 MIN
The challenge of building scalable frontend applications
Typescript, React and Atomic Design - a match made in heaven
04:02 MIN
Using static site generators to pre-render markup
Jamstack and Web Performance, a match made in heaven
Featured Partners
Related Videos
40:45GraphQL + Apollo + Next.js: A Lovely Trio
Josh Goldberg
43:20Microfrontends at Scale
Josh Goldberg
40:45Teini - an extremely small webshop leveraging awesome and free tech
Christian K.
29:01From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners
Marius Obert
1:24:47Build Your Own Subscription-based Course Platform
Dávid Lévai
1:02:24WeAreDevelopers LIVE – SEO, GEO, AI Slop & More
Chris Heilmann, Daniel Cranney & Simon Cox
44:00SEO in Angular? No big deal with SSR and Angular Universal
Martina Kraus
26:44Next.js Unleashed: Optimizing Web Vitals for superior User Experience
Eileen Fürstenau
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
&why GmbH
Berlin, Germany
€50-70K
Junior
Intermediate
Senior
React
Next.js
TypeScript
PiNCAMP GmbH
Berlin, Germany
Senior
React
GraphQL
Next.js
SMG Swiss Marketplace Group
Sachseln, Switzerland
Senior
GULP Information Services GmbH
Augsburg, Germany
Intermediate
.NET
Azure
React
Next.js
JavaScript
+2
Rocken AG
Bern, Switzerland
Senior
React
Next.js
TypeScript