ReviseAlgo Logo

Projects

Blog

Build a production-style blog with App Router routes, dynamic slugs, static generation, MDX content, metadata, and revalidation.

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

    ConceptRole in the Blog
    Dynamic segmentCreates /blog/[slug] pages.
    generateStaticParamsPrebuilds known post routes.
    generateMetadataCreates per-post titles and social previews.
    MDXStores content with JSX-friendly formatting.
    RevalidationRefreshes 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

    MistakeWhy It HappensCorrect Approach
    Missing metadata per postIndex metadata is reused everywhere.Use generateMetadata in the slug route.
    Building slugs from titlesTitles change over time.Store stable slugs.
    Rendering missing posts as blank pagesData lookup returns null.Use notFound().
    Client-rendering all postsFamiliar 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

    FeatureBrowser ImpactNotes
    Static HTMLExcellentFast first load and easy indexing.
    MDX contentServer-renderedBrowser receives HTML.
    Client widgetsOptionalKeep 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

    NeedPattern
    Blog indexapp/blog/page.tsx
    Post detailapp/blog/[slug]/page.tsx
    Prebuilt slugsgenerateStaticParams
    Per-post SEOgenerateMetadata
    Missing postnotFound()

    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.