Context (with Firebase Authentication)

在react裡，元件間的資料主要是靠props來傳遞，然而，當元件越來越多的時候，這樣的傳遞就會過於複雜，這時候就可以利用context來分享資料。在Routing 裡，我們介紹了ThemeProvider，其實，ThemeProvider就是利用context。當然，也可以使用更複雜的Redux/Recoil來達成這樣的效果，不過，多數的情況下，Context就能解決問題了。

產生Context

createContext

我們可以利用Context來記錄使用者是否已經登入以及使用者的權限。

首先，我們需要利用createContect()寫一個Context:

先寫一個/app/account/AuthContext.tsx

import { createContext } from "react";
export const AuthContext = createContext('email');

在React裡，我們會把Context套在App.js，但是，在Next.js裡，並沒有App.js，在Next.js 13裡，如同ThemeProvider的使用方式一樣，我們利用layout.tsx來套用:

    <html lang="en">
      <body className={inter.className}>
        <ThemeRegistry>
          <AuthContext.Provider value="email">
            <Menu />
            {children}
          </AuthContext.Provider>
        </ThemeRegistry>
      </body>
    </html>

我們會看到這個錯誤訊息，因為Context只適用在client component，然而，layout.tsx不是:

Untitled

所以，需要利用Provider來解決這問題。

/app/account/AuthContext.tsx

**'use client'**
import { createContext } from "react";

export const AuthContext = createContext('email');
**export const AuthContextProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {

  return (
    <AuthContext.Provider value="[email protected]">
      {children}
    </AuthContext.Provider>
  );
};**

套用Context

我們可以利用layout.tsx套用Context，讓所有的元件都可以取得元件。

在layout.tsx就改用AuthContextProvider: