Next.js 我该怎么爱你?
近日,Chatgpt
已经宣布放弃Nextjs
,转而使用Remix
来作为全栈开发框架,为什么越来越多人质疑Nextjs
? 很简单,一家商业公司(Vercel
)开源的框架,居然让框架运行机制跟自己的云服务强绑定,这让很多开发者望而却步,认为Nextjs
不够自由。 的确,Nextjs
的自由度不够,尤其是在Self-host
的时候,非常的蛋疼,但是幸好,我们有一些方法可以规避这些问题。
1. Next.js 的定位
Next.js
是一个 React 框架,提供了服务器端渲染(SSR)和静态网站生成(SSG)的功能。它常用于构建大前端(大前端通常指的是前后端同构的应用)应用,在这种架构中,后端通过微服务来提供数据服务,而前端则使用 Next.js 来渲染和展示数据。
传统技术(如 PHP 和 JSP) 与 Next.js
的主要区别在于:
- 前后端同构:
Next.js
使用 JavaScript/TypeScript 实现前后端同构,避免了在 PHP/JSP 中混入 JavaScript 代码的问题。 - 全栈开发:虽然
Next.js
更常被用作前端框架,但它也支持全栈开发,允许开发者使用同一语言(JavaScript/TypeScript)进行前后端开发。
2. Next.js 与 Vercel 的关系
Vercel
是 Next.js
的创始公司,提供了针对 Next.js
优化的部署平台。然而,使用 Vercel
也带来了一些问题:
2.1 缓存混乱
由于针对Vercel
云服务优化缓存,使得当我们在Self-Host
的时候, 尤其是在缓存更新和部署过程中,可能会出现缓存不一致的情况。不过,好消息是从 Next.js
版本 rc-15.0
开始,这些问题得到了显著改善。
2.2 Middleware 的 Node.js Runtime 限制
Next.js
的中间件(middleware)在早期版本中无法使用 Node.js runtime,这导致中间件无法直接连接数据库。官方曾推荐通过内部请求的方式来请求 API 路由,这种方法虽然有效,但可能会导致一些性能和开发体验上的问题。随着版本的更新,这个问题也在逐渐得到改进。
3. 如何实现全栈开发?
如果你希望在 Next.js
中实现全栈开发,可以考虑以下几个方案:
3.1 使用 Prisma 作为 ORM
Prisma
是一个强大的 ORM 工具,它与 Next.js
的集成非常顺畅。Prisma
提供了简洁的 API 来处理数据库操作,使得在 Next.js
中实现全栈功能变得更加高效和方便。
3.2 使用 NextAuth 实现 JWT 认证
NextAuth
提供了全面的认证机制,通过 JWT(JSON Web Tokens)进行会话管理。这种方式可以将账户信息嵌入 JWT,从而避免在中间件层重新构建会话的需求。这样一来,即使中间件无法直接访问数据库,也能实现有效的认证管理。
总结
Next.js
相较于传统的技术栈如 PHP 和 JSP,提供了更现代的前后端同构方案和更为强大的全栈开发能力。尽管在实际应用中可能会遇到与 Vercel
平台相关的问题,但这些问题也在不断被修复和改进。通过使用 Prisma
和 NextAuth
,开发者可以更好地实现全栈开发,并充分利用 Next.js
的优势。