Astro & Next.js Series
Static and hybrid web app patterns with Astro, Next.js, MDX, dynamic routes, and Cloudflare deploys.
4 chapters · about 96 min end to end
- Why Use a Framework? Astro vs Next.js, Decided in One ChapterThe from-zero decision chapter on modern frontend frameworks. What a framework actually adds over plain HTML and a Worker that returns strings (component reuse, file-based routing, asset optimization, MDX, hot-reload), the two real options in 2026 (Astro and Next.js), the headline difference (Astro ships zero JS by default, Next.js ships React-everywhere), a decision table by site kind, and the Cloudflare bill for each — both are deployable on Workers for under $5/month at indie scale. Builds on the existing Workers / D1 / R2 chapters.Beginner · 22 min
- File-Based Routing + What `[slug]` Actually MeansThe single most under-explained syntax in modern web frameworks, finally pinned down. What 'file-based routing' is (your folder structure IS your URL structure), what a 'slug' actually is (a URL-safe identifier — the word comes from 1900s newspaper composing rooms), what the square-bracket `[slug]` filename does in both Astro (src/pages/) and Next.js (app/), the three route shapes (static, dynamic, catch-all), how you read the param at runtime in each, why this site's `/tutorials/web/[slug]/page.tsx` file renders a different chapter for each URL, and the file-naming gotchas (case sensitivity, special characters, route groups). Side-by-side Astro and Next.js code throughout.Beginner · 24 min
- Canonical URLs, Route Params, and the SEO Things People ForgetEvery dynamic page can be accessed multiple ways — `/about`, `/about/`, `/About`, `/about?utm=twitter` — and search engines treat each as a different URL. This chapter is the fix-it list: route params vs query params (and the SEO consequences of using the wrong one), the `<link rel="canonical">` tag and exactly when you need it, generateStaticParams (Next.js) vs getStaticPaths (Astro) — the functions that tell the framework which slugs to build, the trailing-slash war (pick one, 301 the other), permanent vs temporary redirects, Open Graph tags for social shares, and sitemap.xml + robots.txt for crawlers. Side-by-side Astro and Next.js.Beginner · 24 min
- MDX, Astro Islands vs Next.js Server Components, and Deploying Both on CloudflareThe content + rendering chapter that ties the series together. MDX in both frameworks (Markdown + JSX, the format every modern docs site uses, including this one), the four rendering models you'll meet (Astro static HTML, Astro Islands, Next.js Server Components, Next.js Client Components + Server Actions) with the directives that switch between them (`client:load` / `client:visible` / `use client` / `use server`), the exact deploy steps for each on Cloudflare via `@astrojs/cloudflare` and `@opennextjs/cloudflare`, and the real bill at indie scale (both under $5/mo). Series capstone, with a recap and clear next steps.Beginner · 26 min