Next.js 14：穩(wěn)定性的重大升級

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

Supabase 與 Next.js 14：完美兼容

Supabase 是一個開源的 Firebase 替代品，提供數(shù)據(jù)庫、認證、實時訂閱等功能。而現(xiàn)在，Supabase 宣布完全支持 Next.js 14。這對于使用 Supabase 和 Next.js 構(gòu)建應(yīng)用的開發(fā)者來說，是一個巨大的利好消息。

如何實現(xiàn)兼容？

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

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

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

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

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 函數(shù)實現(xiàn)用戶的 OAuth 認證。

2、獲取數(shù)據(jù)變得更簡單：

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

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

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

3、結(jié)合數(shù)據(jù)獲取和變更邏輯：

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

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

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

  return ...
}

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

如何配置 Supabase 以使用 Cookies

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

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

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的服務(wù)器端部分，但由于我們建議使用行級安全性（RLS）策略保護應(yīng)用程序，您也可以在客戶端安全地訪問用戶的會話。因此，我們需要告訴瀏覽器如何訪問該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,
      })
    },
  },
})

這是一段非?；靵y的代碼！因此，我們決定創(chuàng)建一個名為 @supabase/ssr 的包，為您完成所有這些工作。然后，我們進一步創(chuàng)建了一個Next.js和Supabase的起始模板，這樣您就可以專注于構(gòu)建您的精彩應(yīng)用！

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

開始使用

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

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

這個命令會創(chuàng)建一個預(yù)配置的項目，使你能夠快速開始構(gòu)建應(yīng)用。

結(jié)束

Next.js 14 和 Supabase 的結(jié)合為開發(fā)者提供了一個強大、靈活且穩(wěn)定的平臺，用于構(gòu)建現(xiàn)代的網(wǎng)絡(luò)應(yīng)用。這對于想要在短時間內(nèi)快速構(gòu)建并擴展應(yīng)用的開發(fā)者來說，是一個非常有吸引力的選擇。