Next.js 16 + Cache Components Migration Workshop

Welcome to the Next.js 16 + Cache Components workshop! Learn how to migrate from Next.js 15 to Next.js 16's new caching features with cache components.

Prerequisites

• Node.js 18+ installed
• Basic knowledge of Next.js App Router
• Understanding of React Server Components

Getting Started

# Install dependencies
pnpm install

# Run development server
pnpm dev

# Visit http://localhost:3000

Current Implementation (Next.js 15)

The blog application currently uses:

• export const dynamic = 'force-dynamic' for the blog page
• export const dynamic = 'force-static' for the homepage
• Mocked data with simulated API delays

Check the console to see API calls being logged.

Migration Tasks

Task 1: Enable Next.js 16 Features

Update to Next.js 16 and enable new caching features.

1. Update package.json:

"next": "^16.0.0"

2. Configure next.config.ts:

const nextConfig = {
  cacheComponents: true,
};

3. Run pnpm install

Task 2: Home page

Migrate home page to use "use cache" directive. Remember to keep the original revalidation time of 60 seconds.

Task 3: Blog page

Migrate the blog page to use "use cache". Currently the entire page is dynamic because results are dynamic. Find a way of making the categories and layout static while keeping the posts dynamic.

Task 4: Blog post page

Create a fully static blog post page that uses cacheTag to set a tag with the blog post id.

Task 5: Revalidate the cache

Create a secured route to revalidate the cache of a given tag using revalidateTag.

Task 6: Add a dynamic featured posts section to blog post page

Add a dynamic section to the end of the blog post page to show the featured posts.

Bonus Tasks

• Show the active category in the category-filter component.
• Create a custom cache profile in next.config.ts and use it.
• Deploy the application and verify everything works.

Resources

• cacheComponents
• "use cache" Directive
• cacheLife Function
• cacheTag Function

---

Happy coding! 🚀