注册
web

我为什么选择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">Submitbutton>

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+SupabaseMERN StackFirebaseDjango
默认服务器组件N/A
App Router
Server Actions
实时数据库需配置需配置
SQL支持✅ (PostgreSQL)❌ (默认NoSQL)❌ (NoSQL)
身份认证需配置
学习曲线
全栈JavaScript
开源

选型优势的直观感受



  1. 开发速度:使用Next.js 14+Supabase,你可以在几小时内搭建起一个包含用户认证、数据库操作和实时更新的全栈应用。
  2. 代码量减少:得益于Next.js 14的服务器组件和Supabase的简洁API,代码量可以减少40%-60%。
  3. 性能提升:通过Next.js 14的默认服务器组件和自动代码分割,页面加载速度可以提升40%-70%。
  4. 学习成本:虽然新概念(如服务器组件)需要一定学习时间,但整体学习曲线比传统全栈开发更平缓,2-3周即可上手。
  5. 维护简化:单一语言(TypeScript)贯穿全栈,加上Next.js的文件约定和Supabase的声明式API,大大减少了维护的复杂度。
  6. 可扩展性:Supabase基于PostgreSQL,为未来的扩展提供了更多可能性,而Next.js的渐进式框架特性也允许逐步采用高级功能。

一些想法


Next.js 14和Supabase是现代全栈开发的最佳选择,它们的结合提供了前所未有的开发体验和性能优势。如果你正在寻找一个全栈开发的新方向,不妨试试Next.js 14和Supabase,相信你会爱上这个组合。而且 supabase 学了也很划算,即便你想做 react native,Flutter,他都可以作为你坚实的后端。




作者:brzhang
来源:juejin.cn/post/7389925676520226825

0 个评论

要回复文章请先登录注册