Updating fromNext v14 to v15

⚡ TL;DR – Upgrade from Next.js 14 to 15

# 1. Upgrade Next.js & React
npm install next@latest react@latest react-dom@latest

# 2. If using React Compiler (optional)
npm install --save-dev babel-plugin-react-compiler --legacy-peer-deps

# 3. Remove i18n config if using App Router
# next.config.js → remove the i18n block

# 4. Enable React Compiler (optional)
# next.config.js:
experimental: {
  reactCompiler: true
}

# 5. Run build to spot issues
npm run build

# 6. Fix any deprecations or errors

# 7. Done ✅

---

🧱 Full Guide – Next.js 14 → 15 Upgrade (with React 18/19)

---

✅ 1. Upgrade Packages

Run this to get the latest Next.js 15 and React 18+:

npm install next@latest react@latest react-dom@latest

---

⚛️ 2. (Optional) Enable React Compiler

React 19+ supports the new React Compiler (codename: React Forget) for auto-memoizing components.

To use it:

1. Install the plugin:

   npm install --save-dev babel-plugin-react-compiler --legacy-peer-deps
   

2. Update next.config.js:

   const nextConfig = {
     experimental: {
       reactCompiler: true,
     },
   };
   
   module.exports = nextConfig;
   

⚠ If you’re on React 18 and want to try this, you’ll need to upgrade to React 19 first. And if you're using libraries like framer-motion that don’t yet support React 19, you may hit conflicts. Use --legacy-peer-deps to bypass them.

---

🌍 3. Remove i18n If Using App Router

If your project uses the App Router (app/ directory), remove the i18n config from next.config.js. It's only supported in the Pages Router.

// ❌ Remove this block if you're using the app/ directory
i18n: {
  locales: ['en', 'fr'],
  defaultLocale: 'en',
}

Want to do i18n in the App Router? Use custom routing and content-based translations (Next.js i18n guide).

---

🛠 4. Run the Build & Fix Issues

Run:

npm run build

• This will surface any deprecated APIs, middleware issues, custom config problems, etc.
• Look out for:
  • Deprecated image props
  • Middleware format errors
  • Server component boundary issues

---

💡 5. Check Your Code for Common Changes

✅ App Router

• No breaking changes, but metadata, loading UI, and streaming behavior improved.

⚠ Middleware

• _middleware.ts is deprecated; use middleware.ts at the root level
• Matchers may need tweaking

⚠ next/image

• More strict validations (e.g., layout prop is deprecated)
• Use width/height or fill

✅ Pages Router

• Still fully supported
• No major breaking changes if you stayed on pages/

---

🧼 6. Clean Up Optional Stuff

• Use npx @next/codemod for automated migrations (if any are available)
• Check for new config options or faster features you may want to opt into

---

✅ You're Done!

You're now on:

• Next.js 15
• React 18/19
• (Optionally) React Compiler enabled

---

🚀 Bonus: What’s New in Next.js 15?

• React Compiler Support (experimental)
• Improved streaming and caching
• Better App Router performance
• Smaller client bundles
• Stabilized Metadata, Loading, and Error components in App Router
• next/font and next/image improvements