Next 16 support

[AyronK]

3.0.0 aka Next 16 support

#110

Disclaimer

✅ Version 3.0.0-next16-alpha.2 is considered compatible with Next.js 16 with no breaking changes. All non-experimental features used in your Next.js 15 projects work properly in a test environment. Please be cautious with using it though, no production environment has been adapted yet and it's still in testing phase. Please report any encountered problems as issues with [Next 16] tag.

⚠️ Experimental features from Next 15 and new cache features in Next 16 such as Components Cache are not supported! This can take several weeks to implement properly.

⚠️ cacheComponents IS NOT SUPPORTED WITH @fortedigital/nextjs-cache-handler and requires adaptation not only in the package but also projects using it as some of the old APIs are unsupported when cacheComponents is enabled.

const nextConfig: NextConfig = {
  cacheComponents: true,
}

#152 for reference

Progress on stabilization

redis-minimal example project

Are old features stable?

• Migrating to next 16
• Verify instrumentation
• Verifying fetch-example
• Verifying isr-example
• Veryfing static-params-test
• Veryfing tags
• Verifying ttl
• Verifying on demand revalidation
• Improve example for tag on demand revalidation
• Add example for full page on demand revalidation
• Add example for full layout on demand revalidation
• Add missing examples (to be decided what's missing)
• Improve example project, add examples menu and a shared layout
• Add examples README/docs

✅ Features without experimental flag in Next 15 are considered stable in Next 16 integration with no breaking changes.

New Next 16 stable caching features + examples

• revalidateTag() (updated) including new profile param
• updateTag() (new)
• refresh() (new) - It doesn't touch the cache at all:
• Cache Components - Move to a new issue [Next 16] cacheComponents and "use cache" cacheHandlers configuration and support #152 as it's a completely different cache handler setup/feature that does not overlap with existing config.

Bugs

• [Next 16] Manifest file and robots.txt are encoded #165

[AyronK]

Brainstorming session with AI agent in order to prepare examples.

Next 15

Fetch API Caching Examples

1. Fetch with force-cache (default behavior)

   • Default indefinite caching
   • Show how data persists across requests

2. Fetch with no-store (disable caching)

   • Always fetch fresh data
   • Use cases: real-time data, user-specific content

3. Fetch with time-based revalidation (next.revalidate)

   • Already have this, but could add variations:
   • Short intervals (seconds)
   • Long intervals (hours/days)
   • Different revalidate values per fetch

4. Fetch with cache tags (next.tags)

   • Already have basic example, could expand:
   • Multiple tags per fetch
   • Tag hierarchies/nesting
   • Tag-based invalidation patterns

5. Fetch with no-cache option

   • Revalidate on every request but store in cache
   • Compare with no-store

On-Demand Revalidation Examples

6. revalidateTag - Tag-based revalidation

   • Already have basic example, could expand:
   • Revalidating multiple tags
   • Revalidating from API routes
   • Revalidating from server actions

7. revalidatePath - Path-based revalidation

   • Revalidate specific page paths
   • Revalidate with type: 'page' | 'layout' | 'page'
   • Revalidate dynamic routes

8. Combined revalidation (tags + paths)

   • Revalidate both tags and paths together
   • Use cases: e-commerce product updates

Route Segment Config Examples

9. export const revalidate - Page-level revalidation

   • Time-based ISR at page level
   • Different revalidate values per route

10. export const dynamic = 'force-static'

    • Force static generation
    • Show build-time vs runtime behavior

11. export const dynamic = 'force-dynamic'

    • Force dynamic rendering
    • Always bypass cache

12. export const dynamicParams = true/false

    • Already have basic example, could expand:
    • Show behavior with missing static params
    • Dynamic route generation patterns

13. export const fetchCache = 'force-cache' | 'default' | 'only-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'

    • Control fetch caching at route level
    • Override default fetch behavior

Static Generation Examples

14. generateStaticParams - Static params generation

    • Already have basic example, could expand:
    • Large-scale static generation
    • Conditional static params
    • Static params with revalidation

15. Full Static Site Generation (SSG)

    • Fully static pages with no revalidation
    • Build-time data fetching

React Cache Function Examples

16. React.cache() - Request memoization

    • Memoize function calls within a request
    • Prevent duplicate fetches in same request
    • Show deduplication in action

17. unstable_cache - Persistent caching

    • Cache function results across requests
    • With tags and revalidation
    • Compare with fetch caching

API Route Caching Examples

18. API Route with caching headers

    • Set Cache-Control headers
    • CDN caching strategies
    • Browser caching from API routes

19. API Route with revalidation

    • API routes that trigger revalidation
    • Webhook handlers that revalidate cache

Next 16

1. use cache Directive

• Cache Components with "use cache" directive
• Show how to opt into caching at component level
• Demonstrate automatic cache key generation
• Compare with traditional caching approaches
• Show cache invalidation with use cache

2. Partial Prerendering (PPR) - Stable

• PPR with static and dynamic sections
• PPR with Suspense boundaries
• PPR with streaming
• PPR performance comparison (with/without)
• PPR with different revalidation strategies

3. Updated revalidateTag() with cacheLife Profiles

• revalidateTag() with 'max' profile
• revalidateTag() with 'hours' profile
• revalidateTag() with 'days' profile
• Custom cacheLife profiles
• Stale-while-revalidate behavior demonstration
• Comparison: old vs new revalidateTag() API

4. New updateTag() API

• updateTag() in Server Actions
• Read-your-writes semantics
• Immediate cache invalidation after mutations
• Form submission with instant cache update
• User settings update with immediate reflection
• Comparison: updateTag() vs revalidateTag()

5. Advanced Cache Life Profiles

• Custom cache life profiles
• Different profiles for different data types
• Profile-based cache strategies
• Combining multiple profiles

6. Cache Components Patterns

• Nested cache components
• Cache component with props
• Cache component invalidation
• Cache component with tags

7. PPR + Cache Integration

• PPR with use cache components
• PPR with unstable_cache
• PPR with fetch caching
• Optimizing PPR with proper caching

8. Server Actions + Caching

• Server Action with updateTag()
• Server Action with revalidateTag()
• Server Action with revalidatePath()
• Optimistic updates with cache invalidation

9. Cache Life Profile Examples

• Short-lived cache ('hours' profile)
• Long-lived cache ('days' profile)
• Maximum cache ('max' profile)
• Custom time-based profiles

10. Real-World Use Cases

• E-commerce product page with PPR + updateTag()
• Blog with PPR + cache components
• Dashboard with multiple cache strategies
• User profile with read-your-writes semantics

11. Performance Comparisons

• PPR vs traditional SSR
• use cache vs unstable_cache vs fetch
• Different cacheLife profiles performance
• Cache hit rate comparisons

12. Error Handling with Caching

• Cache fallback strategies
• Error boundaries with cached data
• Stale-while-revalidate error handling

[raine]

Good stuff! Can't wait for Next 16 🚀

[AyronK]

Good stuff! Can't wait for Next 16 🚀

I've heard some people already use this package on production with the 3.0.0-next16-alpha.5 version. I recommend waiting for our final checks before actually running this on production but it's ready to start integrating on your dev/test environment 😊 I hope to release 3.0.0 in the next 2 or 3 weeks.