Blog

## 1. Learning Objectives By the end of this project, you will be able to design a Next.js blog with dynamic routes, static params, metadata, content loading, and a clean publishing flow. Difficulty: Intermediate. ## 2. Prerequisites - App Router file routing. - Server Components. - Metadata API. - Static generation. ## 3. Overview A blog is the classic content project because it combines route generation, content parsing, SEO, lists, detail pages, and publishing workflow. In Next.js, most blog pages can be static and fast while still supporting dynamic slugs. ## 4. Why This Topic Matters Blogs teach the foundation for documentation sites, marketing pages, changelogs, portfolios, and resource centers. The same routing and metadata patterns appear everywhere. ## 5. Real-World Analogy A blog is a library shelf. The index page is the shelf label, each post is a book, and metadata is the catalog card that helps search engines and social previews find it. ## 6. Core Concepts | Concept | Role in the Blog | |---|---| | Dynamic segment | Creates `/blog/[slug]` pages. | | `generateStaticParams` | Prebuilds known post routes. | | `generateMetadata` | Creates per-post titles and social previews. | | MDX | Stores content with JSX-friendly formatting. | | Revalidation | Refreshes content after publishing changes. | ## 7. Syntax & API Reference

## 8. Visual Diagram

## 9. Live Example - Full Working Code

What just happened? The index page lists posts, while the dynamic route prebuilds each known slug and renders the matching article. ## 10. Interactive Playground Try this: - Add a `featured` field to posts. - Sort posts by publish date. - Generate a per-post Open Graph image. - Add tag pages under `/blog/tags/[tag]`. ## 11. Common Mistakes | Mistake | Why It Happens | Correct Approach | |---|---|---| | Missing metadata per post | Index metadata is reused everywhere. | Use `generateMetadata` in the slug route. | | Building slugs from titles | Titles change over time. | Store stable slugs. | | Rendering missing posts as blank pages | Data lookup returns `null`. | Use `notFound()`. | | Client-rendering all posts | Familiar SPA pattern. | Load content in Server Components. | ## 12. Best Practices - Keep slugs stable. - Use Server Components for content loading. - Prebuild known posts with `generateStaticParams`. - Add metadata, canonical URLs, sitemap entries, and Open Graph images. - Treat drafts differently from published posts. ## 13. Browser Compatibility | Feature | Browser Impact | Notes | |---|---|---| | Static HTML | Excellent | Fast first load and easy indexing. | | MDX content | Server-rendered | Browser receives HTML. | | Client widgets | Optional | Keep comments/search isolated. | ## 14. Interview Questions **Easy:** Why use `[slug]` for blog posts? Answer: It lets one route render many posts based on a URL parameter. **Medium:** Why is `generateStaticParams` useful for a blog? Answer: It prebuilds known post pages, improving performance and reliability. **Hard:** How would you support draft previews? Answer: Keep published pages static, authenticate preview access, fetch draft content dynamically, and avoid exposing draft routes in sitemap output. ## 15. Debugging Exercise Bug report: "New blog posts do not appear after deployment." Solution Check whether posts are loaded at build time only. Add revalidation, trigger on-demand revalidation from the CMS, or rebuild after publishing. ## 16. Practice Exercises - Easy: Create a `/blog` index page. - Medium: Add `/blog/[slug]` with metadata. - Hard: Add tags, sitemap entries, and draft preview behavior. ## 17. Scenario-Based Challenge A content team wants scheduled posts, social previews, and tag archives. What architecture should you choose? Walkthrough Use a content source with publish metadata, prebuild published slugs, generate metadata per post, create dynamic tag routes, and revalidate pages when posts change. ## 18. Quick Quiz 1. What folder creates blog detail routes? Answer: `app/blog/[slug]`. 2. What function prebuilds known slugs? Answer: `generateStaticParams`. 3. What function builds per-post SEO data? Answer: `generateMetadata`. 4. What should missing posts call? Answer: `notFound()`. 5. Should stable URLs depend on mutable titles? Answer: No. ## 19. Summary & Key Takeaways - A blog ties together routing, data loading, metadata, and static generation. - Dynamic segments keep the route model simple. - Server Components are ideal for content loading. - Metadata and sitemaps make posts discoverable. - Revalidation keeps published content fresh. ## 20. Cheat Sheet | Need | Pattern | |---|---| | Blog index | `app/blog/page.tsx` | | Post detail | `app/blog/[slug]/page.tsx` | | Prebuilt slugs | `generateStaticParams` | | Per-post SEO | `generateMetadata` | | Missing post | `notFound()` | ## 21. Further Reading - Next.js Docs: Layouts and Pages. - Next.js Docs: Metadata and OG Images. - Next.js Docs: Revalidating. ## 22. Next Lesson Preview Next, you will build an ecommerce storefront that combines product routes, cart interactivity, checkout flows, and caching decisions.