我为什么选择Next.js+Supabase做全栈开发
原创
作为一名前端工程师，选择合适的技术栈对项目的成功至关重要，我最近一个星期尝试了下这两个技术栈的组合，大概在一个星期就写了一个小 SAAS，总共 10 多个页面。在本文中，我将分享为什么我选择Next.js 14和Supabase作为全栈开发的首选组合，并通过最新的代码示例和比较数据，直观地展示这个选择带来的诸多优势。
Next.js 14: 现代React应用的革新框架
默认服务器组件的优势
Next.js 14默认使用服务器组件，这对于提升性能和开发体验至关重要。
例如，一个简单的服务器组件如下：
// app/page.js
async function getData() {
const res = await fetch('https://api.example.com/data')
return res.json()
}
export default async function Home() {
const data = await getData()
return <div>Welcome to {data.name}</div>
}在这个例子中，Home组件是一个异步的服务器组件，它可以直接进行数据获取，而无需使用useEffect或getServerSideProps。
App Router: 更强大的路由系统
Next.js 14采用了新的App Router，提供了更灵活和直观的路由方式：
app/
page.js // 对应路由 /
about/
page.js // 对应路由 /about
posts/
[id]/
page.js // 对应路由 /posts/1, /posts/2, 等Server Actions: 无需API路由的表单处理
Next.js 14引入了Server Actions，允许我们直接在服务器上处理表单提交，无需单独的API路由：
// app/form.js
export default function Form() {
async function handleSubmit(formData) {
'use server'
// 在服务器上处理表单数据
const name = formData.get('name')
// ...处理逻辑
}
return (
<form action={handleSubmit}>
<input type="text" name="name" />
<button type="submit">Submit</button>
</form>
)
}这个能力好用到哭，不用再写API路由了，直接在页面上处理表单提交。代码简单了不止一点点。
Supabase: 开源Firebase替代品的崛起
数据库即服务的便利性
Supabase提供了PostgreSQL数据库即服务，使用起来非常简单：
import { createClient } from '@supabase/supabase-js'
const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_KEY')
// 插入数据
const { data, error } = await supabase
.from('users')
.insert({ name: 'John', email: 'john@example.com' })实时功能的强大支持
Supabase的实时订阅功能让实现实时更新变得轻而易举：
import { useEffect } from 'react'
import { createClient } from '@supabase/supabase-js'
const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_KEY')
function RealtimeData() {
useEffect(() => {
const channel = supabase
.channel('*')
.on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'users' }, payload => {
console.log('New user:', payload.new)
})
.subscribe()
return () => {
supabase.removeChannel(channel)
}
}, [])
return <div>Listening for new users...</div>
}身份认证和授权的简化
Supabase内置的身份认证系统大大简化了用户管理：
const { data, error } = await supabase.auth.signUp({
email: 'example@email.com',
password: 'example-password',
})Next.js 14 + Supabase: 完美的全栈开发组合
开发效率的显著提升
结合Next.js 14和Supabase，我们可以快速构建全功能的Web应用。以下是一个简单的例子，展示了如何在Next.js 14的服务器组件中使用Supabase：
// app/posts/page.js
import { createClient } from '@supabase/supabase-js'
const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_KEY')
export default async function Posts() {
const { data: posts } = await supabase.from('posts').select('*')
return (
<div>
{posts.map(post => (
<div key={post.id}>{post.title}</div>
))}
</div>
)
}这个例子展示了Next.js 14服务器组件如何与Supabase无缝集成，直接在服务器端获取数据并渲染。
与其他技术栈的对比
为了更直观地展示Next.js 14+Supabase的优势，我们来看一个更新后的比较表格：
特性 | Next.js 14+Supabase | MERN Stack | Firebase | Django |
|---|---|---|---|---|
默认服务器组件 | ✅ | ❌ | ❌ | N/A |
App Router | ✅ | ❌ | ❌ | ❌ |
Server Actions | ✅ | ❌ | ❌ | ✅ |
实时数据库 | ✅ | 需配置 | ✅ | 需配置 |
SQL支持 | ✅ (PostgreSQL) | ❌ (默认NoSQL) | ❌ (NoSQL) | ✅ |
身份认证 | ✅ | 需配置 | ✅ | ✅ |
学习曲线 | 中 | 中 | 低 | 高 |
全栈JavaScript | ✅ | ✅ | ✅ | ❌ |
开源 | ✅ | ✅ | ❌ | ✅ |
选型优势的直观感受
- 开发速度：使用Next.js 14+Supabase，你可以在几小时内搭建起一个包含用户认证、数据库操作和实时更新的全栈应用。
- 代码量减少：得益于Next.js 14的服务器组件和Supabase的简洁API，代码量可以减少40%-60%。
- 性能提升：通过Next.js 14的默认服务器组件和自动代码分割，页面加载速度可以提升40%-70%。
- 学习成本：虽然新概念（如服务器组件）需要一定学习时间，但整体学习曲线比传统全栈开发更平缓，2-3周即可上手。
- 维护简化：单一语言（TypeScript）贯穿全栈，加上Next.js的文件约定和Supabase的声明式API，大大减少了维护的复杂度。
- 可扩展性：Supabase基于PostgreSQL，为未来的扩展提供了更多可能性，而Next.js的渐进式框架特性也允许逐步采用高级功能。
一些想法
Next.js 14和Supabase是现代全栈开发的最佳选择，它们的结合提供了前所未有的开发体验和性能优势。如果你正在寻找一个全栈开发的新方向，不妨试试Next.js 14和Supabase，相信你会爱上这个组合。而且 supabase 学了也很划算，即便你想做 react native，Flutter，他都可以作为你坚实的后端。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
