Next.js 15 初体验：升级后的真实感受

上周我鼓起勇气把项目从 Next.js 14 升级到了 15，说实话，一开始还挺忐忑的。毕竟生产环境升级可不是闹着玩的。不过用了一周后，我想说：这次升级真的值了！

Turbopack：开发速度快到飞起

我的实际体验

之前用 Webpack 启动项目要等 30 多秒，现在用 Turbopack 只要 3 秒！这不是夸张，是真实体验。

最让我惊喜的是增量更新，以前改个样式要等 5-10 秒，现在几乎是瞬间刷新。我特意测试了一下：

• 启动速度：从 35秒 降到 3秒
• 热更新：从 8秒 降到 0.5秒
• TypeScript 检查：快了大概 10 倍

不过有个小坑，我之前用的一个自定义 Webpack 插件不兼容 Turbopack，花了半天时间才找到替代方案。

App Router：更灵活了

缓存策略改进

Next.js 15 的缓存策略更加智能了。我之前有个页面数据更新不及时，现在可以更精确地控制缓存：

// 我现在用的缓存配置
export const revalidate = 3600; // 1小时重新验证

// 动态缓存
export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

// 条件缓存
export const dynamic = 'force-static';

服务器组件更稳定

之前服务器组件偶尔会报一些奇怪的错，现在稳定多了。我特别喜欢这个改进：

// 服务器组件现在更可靠
async function ServerComponent({ id }: { id: string }) {
  const data = await fetchData(id);
  
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

服务器动作：表单处理变得超简单

我的表单重构

我之前处理表单要写一堆 API 路由，现在用服务器动作直接搞定：

// 之前的做法
// pages/api/contact.ts
export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email, message } = req.body;
    // 处理逻辑...
    res.status(200).json({ success: true });
  }
}

// 现在的做法
async function submitContact(formData: FormData) {
  'use server';
  
  const name = formData.get('name') as string;
  const email = formData.get('email') as string;
  const message = formData.get('message') as string;
  
  // 直接处理表单
  await saveContact({ name, email, message });
  
  // 可以直接重定向
  redirect('/contact/success');
}

// 在组件中使用
export default function ContactForm() {
  return (
    <form action={submitContact}>
      <input name="name" type="text" required />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button type="submit">发送</button>
    </form>
  );
}

这个改进让我的表单代码减少了 60%，而且更安全了，因为敏感逻辑都在服务器端。

一些小改进但很实用

更好的错误处理

Next.js 15 的错误页面更友好了，我之前调试时经常看不懂错误信息，现在清晰多了。

图片优化增强

图片组件现在支持更多格式，我发现 WebP 格式在某些情况下比 JPEG 小 40%：

// 新的图片组件用法
import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority // 优先加载
  placeholder="blur" // 模糊占位符
  blurDataURL="data:image/jpeg;base64,..."
/>

升级过程中遇到的问题

依赖兼容性

有几个第三方库还不兼容 Next.js 15，我花了些时间找替代方案：

• 问题：某个 UI 库的服务器组件不兼容
• 解决：改用客户端组件包装

构建配置调整

我之前的构建脚本需要一些调整：

json { "scripts": { "dev": "next dev --turbo", "build": "next build", "start": "next start", "lint": "next lint" } }

性能提升实测

我升级前后做了个性能对比：

这些提升虽然不是惊天动地，但在实际使用中能明显感觉到差异。

值不值得升级？

我的建议

如果你符合以下情况，我建议升级：

1. 新项目：直接用 Next.js 15，别犹豫
2. 开发体验差：如果现在开发时热更新很慢，升级后体验会好很多
3. 性能要求高：新版本的性能优化确实有用

暂时别升级的情况

1. 依赖不兼容：先检查关键依赖是否支持
2. 项目稳定：如果现有项目运行良好，可以再等等
3. 时间紧张：升级可能需要一些调试时间

总结

Next.js 15 是一次不错的升级，虽然没有革命性的变化，但各种小改进累积起来，体验提升还是很明显的。

对我来说，最大的惊喜是 Turbopack 的速度提升，开发效率真的高了很多。服务器动作也让代码更简洁了。

如果你在用 Next.js 14，我建议找个时间试试升级，但记得先在测试环境试试，别直接在生产环境搞！

希望我的经验对你有帮助，升级顺利！