Next.js 14：穩定性的重大升級

在 Next.js Conf 2023 上，Vercel 團隊發布了 Next.js 14 版本。這個版本最大的亮點是不包含任何新功能。這種做法在技術界可能看起來不太常見，但這實際上是對 Next.js 穩定性和性能的一次重大提升。例如，Server Actions 特性現在被標記為穩定版本，這意味著開發者可以更簡單、更安全地在服務器端進行用戶認證。

Supabase 與 Next.js 14：完美兼容

Supabase 是一個開源的 Firebase 替代品，提供數據庫、認證、實時訂閱等功能。而現在，Supabase 宣布完全支持 Next.js 14。這對于使用 Supabase 和 Next.js 構建應用的開發者來說，是一個巨大的利好消息。

如何實現兼容？

• 服務器端組件：在 Next.js 中使用 Server Components，使得從 Supabase 獲取數據變得非常簡單。這意味著開發者可以在服務器端直接操作數據庫，無需擔心前端和后端的分離。
• 配置 Supabase 使用 Cookies：由于 Supabase 默認使用 localStorage 來存儲用戶會話信息，而在服務器端沒有 localStorage 的概念，因此必須將 Supabase 配置為在服務器上使用 Cookies。這需要一些編碼工作，但 Supabase 提供了一個名為 @supabase/ssr 的包，以簡化這一流程。
• 客戶端和服務器端的無縫集成：通過適當配置，Supabase 可以在客戶端和服務器端無縫工作，確保用戶會話的安全和可靠。

代碼示例：使用 Supabase 和 Next.js

1、Server Actions 的簡化認證流程：

下面的代碼示例演示了如何在 Next.js 中使用 Server Actions 進行用戶認證。這個過程完全在服務器端完成。

export default async function Page() {
  const signIn = async () => {
    'use server'
    supabase.auth.signInWithOAuth({...})
  }

  return (
    <form action={signIn}>
      <button>Sign in with GitHub</button>
    </form>
  )
}

在這個示例中，通過 signIn 函數實現用戶的 OAuth 認證。

2、獲取數據變得更簡單：

使用 Server Components，從 Supabase 獲取數據變得極為簡單。以下是一個示例：

export default async function Page() {
  const { data } = await supabase.from('...').select()
  return ...
}

在這里，通過一個異步函數直接從 Supabase 數據庫中獲取數據。

3、結合數據獲取和變更邏輯：

Server Actions 允許你將數據變更邏輯放在負責獲取數據和渲染頁面的 Server Components 旁邊：

export default async function Page() {
  const { data } = await supabase.from('...').select()

  const createNote = async () => {
    'use server'
    await supabase.from('...').insert({...})
  }

  return ...
}

在這個例子中，除了獲取數據，還展示了如何在同一個組件中添加數據。

如何配置 Supabase 以使用 Cookies

默認情況下， supabase-js 使用 localStorage 來存儲用戶的會話。這對于客戶端應用程序很有效，但是當您嘗試在服務器組件中使用 supabase-js 時，會失敗，因為服務器上沒有'localStorage'的概念。

為了做到這一點，我們需要配置 supabase-js 在服務器上運行時使用cookies而不是 localStorage 。但是這段代碼有點冗長，要求人們在使用Supabase構建的每個應用程序中都進行復制。

const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    flowType: 'pkce',
    autoRefreshToken: false,
    detectSessionInUrl: false,
    persistSession: true,
    storage: {
      getItem: async (key: string) => {
        cookieStore.get(key)
      },
      setItem: async (key: string, value: string) => {
        cookieStore.set(key, value)
      },
      removeItem: async (key: string) => {
        cookieStore.remove(key)
      },
    },
  },
})

這樣就處理了Next.js的服務器端部分，但由于我們建議使用行級安全性（RLS）策略保護應用程序，您也可以在客戶端安全地訪問用戶的會話。因此，我們需要告訴瀏覽器如何訪問該cookie：

const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    flowType: 'pkce',
    autoRefreshToken: true,
    detectSessionInUrl: true,
    persistSession: true,
    storage: {
      getItem: async (key: string) => {
        return parse(document.cookie[key])
      },
      setItem: async (key: string, value: string) => {
        document.cookie = serialize(key, value)
      },
    },
    removeItem: async (key: string) => {
      document.cookie = serialize(key, '', {
        maxAge: 0,
      })
    },
  },
})

這是一段非常混亂的代碼！因此，我們決定創建一個名為 @supabase/ssr 的包，為您完成所有這些工作。然后，我們進一步創建了一個Next.js和Supabase的起始模板，這樣您就可以專注于構建您的精彩應用！

https://supabase.com/docs/guides/getting-started/quickstarts/nextjs.

開始使用

對于新手開發者來說，使用 Next.js 和 Supabase 的啟動模板是一個簡單的開始方式：

npx create-next-app@latest -e with-supabase

這個命令會創建一個預配置的項目，使你能夠快速開始構建應用。

結束

Next.js 14 和 Supabase 的結合為開發者提供了一個強大、靈活且穩定的平臺，用于構建現代的網絡應用。這對于想要在短時間內快速構建并擴展應用的開發者來說，是一個非常有吸引力的選擇。