本文将详细介绍如何使用 Next.js 和 Firebase 构建实时应用。我们将介绍如何设置 Firebase 身份验证和数据库，并将在 Next.js 中创建基本应用程序以验证这些设置的正确性，最后我们将演示如何使用 Firebase 实时数据库使应用程序变得实时。
准备工作
在开始之前，您需要先安装 Node.js 并熟悉 React 和 Next.js 框架的基础知识。您还需要在 Firebase 控制台上创建一个项目并启用身份验证和实时数据库服务。
设置 Firebase 身份验证
在 Firebase 控制台中启用身份验证服务后，我们需要设置适当的规则。为此，请在 Firebase 控制台中导航到“Database”选项卡，选择“规则”选项卡，并将规则设置为如下方式：
-- -------------------- ---- -------
-
-------- -
-------- -
------- -
-------- ----- --- ----------
--------- ----- --- ---------
-
-
-
-以上规则将允许每个用户仅读/写其用户数据，以确保数据的安全性。
设置 Firebase 数据库
接下来，我们需要创建一个实时数据库。要创建一个实时数据库，请在 Firebase 控制台中导航到“Database”选项卡，并按照说明进行设置。
在数据库设置完成后，我们需要将其添加到我们的 Next.js 应用程序中。
创建 Next.js 应用程序
为了使用 Firebase 实时数据库，我们将使用 Next.js。我们将开始使用以下命令创建新的 Next.js 应用程序：
npx create-next-app --example with-firebase-authentication with-firebase-authentication-app
我们还需要安装 Firebase 和其他必要的依赖项。请使用以下命令：
cd with-firebase-authentication-app npm install firebase next-redux-wrapper react-redux redux
现在我们已成功创建应用程序并安装 Firebase 需要的依赖项。
实现 Firebase 身份验证
我们将首先实现 Firebase 身份验证。要使用 Firebase 身份验证，请打开“/utils/firebase.js”文件，并将以下代码添加到文件末尾：
-- -------------------- ---- ------- ------ -------- ---- --------------- ------ ---------------- ------ --------------------- ------ -------------------- ----- -------------- - - -- ---- -------- ------ ------- - -- ----------------------- - --------------------------------------- - ------ ------- ---------
接下来，我们将创建一个名为“auth.js”的新文件，并在其中添加以下代码：
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
------ -------- ---- --------------------
----- --------- - -------------
----- -------
------------- -
----- -----
-------- -----
--
--------- -
-------------- ------- -
---------- - ---------------
--
----------------- -
---------- - -----
--
----------------- ------- -
------------- - ---------------
--
--
---
------ ----- - -------- ----------- ---------- - - ------------------
------ ----- ---------- - ------- -- ----------------
------ ----- ------------- - ------- -- -------------------
------ ----- ------------------- - -- -- ----- ---------- -- -
----------------------------------------- -- -
------------------------
----------------------------
---
--
------ ----- ---------------------- - ------- --------- -- ----- -- -- -
----- ------------------------------------------------- ----------
--
------ ----- ------ - -- -- ----- -- -- -
----- --------------------------
--
------ ----- ----------------------- - ------- --------- -- ----- -- -- -
----- ----------------------------------------------------- ----------
--
------ ------- ------------------将“auth.js”文件添加到“/store/index.js”文件末尾，并将其添加到 Redux 存储中：
-- -------------------- ---- -------
------ - -------------- - ---- -------------------
------ ----------- ---- ---------
----- ----- - ----------------
-------- -
----- ------------
--
---
------ ------- ------现在，我们已经成功实现了 Firebase 身份验证，并通过 Redux 存储了用户数据。
实现 Firebase 实时数据库
现在，我们将通过 Firebase 实时数据库使应用程序变成实时。首先，我们将添加一个页面来测试 Firebase 实时数据库。我们将创建一个名为“/pages/realtime.js”的新文件，并在其中添加以下代码：
-- -------------------- ---- -------
------ - ---------- -------- - ---- --------
------ - ----------------- - ---- ---------------------------------
------ - ----------- - ---- ----------------------------
------ -------- ---- --------------------
----- -------- - -- -- -
----- -- - --------------
----- ---------- -------- ------ - ------------------
--------------------------------------------
-
-------- -----
-
--
----- ------ -------- - -------------
----- ---------- - ----- -- -- -
-- ------------ --- --- -
----- --------------- -- -- -
----- --------------
----------------
------------- -- --------- - -------
---
------------
-
--
------------ -- -
----- ----------- - ------------------------------------
----------------------------- ---------- -- -
---------------------- ---------- ----------------
---
------ -- -- ------------------
-- ----
------ -
-----
------ -- -------------- ---------------------------------
-------- -- ----------------------
--------- -- -
-----
----------------------- -- -
---- -------------------------------------
---
------
-----------
------------
------------- -- ------------------------
--
------- ------------------------ ----------------
------
--
------
--
--
------ ------- ---------该页面将显示从 Firebase 实时数据库中检索的消息。我们还可以添加新消息并查看实时消息。
现在，我们已经成功实现了 Firebase 实时数据库，并且应用程序变得实时了。
结论
在本文中，我们详细介绍了如何使用 Next.js 和 Firebase 构建实时应用。我们学习了如何设置 Firebase 身份验证和实时数据库，并使用它们构建了实时应用程序。这个完整的示例工程可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f138416fbf96019737a473