LaunchApp
Guide1 min read

Upgrading all templates to Next.js 15 App Router

Step-by-step guide to the breaking changes we navigated when upgrading four template repos to Next.js 15 with full Server Components, Turbopack, and the new cache API.

Upgrading four template repos from Next.js 14 to Next.js 15 took us about three weeks of focused work. Here's what we learned.

The biggest breaking changes

Server Components by default: In Next.js 15, all components are Server Components unless explicitly marked with 'use client'. We had to audit every file that used useState, useEffect, or event handlers and add the directive.

The cache API overhaul: Next.js 15 replaced use cache with a new cache() function and changed how unstable_cache works. We had to update every data-fetching pattern across all four repos.

Turbopack in production: Turbopack is now the default bundler for both development and production. It mostly worked for us, but we hit a few edge cases with dynamic imports that required workarounds.

Step-by-step

  1. Audit current usage: Run the codemod against your codebase, then manually fix anything it can't handle.
  2. Update dynamic routes: generateStaticParams is now required for statically generated dynamic routes. Add it where missing.
  3. Fix client component boundaries: Move state and event handlers to the leaf components, keep the tree mostly server.
  4. Update cache calls: Replace use cache with cache() and update unstable_cache calls.
  5. Test with Turbopack: Run pnpm build with Turbopack enabled and fix any bundling issues.

Performance results

After the upgrade, average page load times improved by 18% across all Next.js templates. The Server Components default and the new cache API are the main contributors.

Want to follow along? Browse all posts or follow @launchappdev on X.