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