https://github.com/abrahamgalue/nextjs16-conf-workshop
https://github.com/abrahamgalue/nextjs16-conf-workshop
nextjs react vercel
Last synced: 5 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/abrahamgalue/nextjs16-conf-workshop
- Owner: abrahamgalue
- Created: 2025-11-06T15:59:51.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2026-05-23T13:52:41.000Z (about 1 month ago)
- Last Synced: 2026-05-23T15:26:08.622Z (about 1 month ago)
- Topics: nextjs, react, vercel
- Language: TypeScript
- Homepage: https://nextjs16-conf-workshop-abrahamgalue.vercel.app
- Size: 140 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```bash
# 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`:
```json
"next": "^16.0.0"
```
2. Configure `next.config.ts`:
```typescript
const nextConfig = {
cacheComponents: true,
};
```
3. Run `pnpm install`
### Task 2: Home page
Migrate home page to use [`"use cache"`](https://nextjs.org/docs/app/api-reference/directives/use-cache) directive. Remember to keep the original [revalidation time](https://nextjs.org/docs/app/api-reference/functions/cacheLife) 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`](https://nextjs.org/docs/app/api-reference/functions/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`](https://nextjs.org/docs/app/api-reference/functions/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
- [X] Show the active category in the `category-filter` component.
- [X] Create a custom cache profile in `next.config.ts` and use it.
- [X] Deploy the application and verify everything works.
## Resources
- [cacheComponents](https://nextjs.org/docs/app/api-reference/config/next-config-js/cacheComponents)
- ["use cache" Directive](https://nextjs.org/docs/app/api-reference/directives/use-cache)
- [cacheLife Function](https://nextjs.org/docs/app/api-reference/functions/cacheLife)
- [cacheTag Function](https://nextjs.org/docs/app/api-reference/functions/cacheTag)
---
**Happy coding!** 🚀