Nextjs框架的探索

2025年我们拿Nextjs框架重构了电商网站，这个框架从开发到部署线上遇到的问题蛮多的，这里的原因有很多方面，里面肯定有一条是对于这个框架不够熟悉，因为框架内置了很多技术，如果不探究这些技术，那么在平时开发过程中就容易踩到这些坑，给自己的线上代码带来风险。在这一年的重构以及使用过程中，我对Nextjs框架的诸多特性进行了深入的研究，打算写一系列文章来记录一下。所有的探索的demo在AI的帮助下快速验证：nextjs-discovery，可预览的效果参考：http://nextjs.5udou.cn/

所有的探索都是基于Nextjs16 + React19

前情提要

上述说的事情有一个背景我简单提一下，并讲一下后续在未来的半年到一年的时间内要做的事情。今年我们把一个vue@2+nuxt@2版本的大型电商网站进行了重构，投入了5-6个人，在不影响业务的需求进度的前提下，把重构项目拆分了三期，前后折腾了7个月，最后在10.9号全量上线，当然这过程肯定包含了灰度、新老框架兼容等常规操作，也在这么几个月过程中，探索创新实践了很多技术能力，包括现在这套框架的探索系列。因此为了深入了解Nextjs框架，本来想写一套完整的系列的，后面想了想，缩减成两套，一是目前的这个框架探索的，二是整理我们在做电商网站使用Nextjs框架的一些思考和最佳实践。所以先把第一个基础的学习了解放在前面，第二个系列等2026年再整理。

探索系列的文章

• 讲清楚Hooks在Nextjs框架中的执行区别：《React的Hooks在Nextjs的表现》

• Nextjs的框架中basePath和assetPrefix字段会影响很多，那么它们的作用范围到底是什么？《basePath和assetPrefix在Nextjs框架的探索》

• Nextjs宣称自己对于字体是有做优化的？那么你知道有使用Nextjs的字体优化和没使用是有啥区别吗？《Nextjs的字体优化探索》

• Nextjs环境变量官网写的很简单，但是真的要发挥其作用并能够满足我们的业务使用，真的那么容易吗？《环境变量的探索》

• Nextjs之所以宣称自己性能贼棒，得益于设计了一套牛逼拉斯的缓存能力，那么整个框架的缓存都有哪些？开发者应该怎么使用呢？《Nextjs最牛的缓存设计探索》

• 你肯定好奇next.congig.ts文件中的这个字段serverExternalPackages到底有啥用，这篇文章简单讲解一下。《serverExternalPackages的使用优化探索》

• Nextjs的日志本身没有什么内置的开箱即用的能力，除了本地开发，那么作为线上运行的服务器，没有日志的话就犹如“瞎子”一个，那么如何做好日志的能力补充呢？《Nextjs的日志功能探索》