使用 Next.js 和 Firebase 构建全栈应用的步骤详解-JavaScript中文网-JavaScript教程资源分享门户

前言

随着互联网技术的发展，前端工程师不再是简单的切图仔，而是需要承担更多的责任，例如构建全栈应用。本文将为大家介绍如何使用 Next.js 和 Firebase 构建全栈应用，旨在提高大家的全栈开发能力和水平。

什么是 Next.js？

Next.js 是一个 React 框架，它通过 Server-side Rendering 的方式实现了更快的加载速度和更好的 SEO，同时还提供了一些非常方便的功能，例如自动代码分割和静态导出等。

什么是 Firebase？

Firebase 是一个 Google 提供的后端服务，它提供了多种解决方案，包括数据库、认证、文件存储和推送通知等，极大的方便了开发者构建全栈应用。

使用 Next.js 和 Firebase 构建全栈应用的步骤

步骤一：创建 Firebase 项目并配置数据库

首先，在 Firebase Console 中创建一个项目，并启用 Firestore 数据库。然后，添加一个集合和一个文档，例如：

collection: users
document: uid_1
fields:
  - name: "Alice"
  - age: 25

步骤二：创建 Next.js 应用并安装 Firebase SDK

使用 create-next-app 命令创建一个新的 Next.js 应用，然后执行以下命令安装 Firebase SDK：

npm install --save firebase

在 Next.js 应用中配置 Firebase SDK：

// firebase.js
import firebase from "firebase";

const config = {
  apiKey: "Your API key",
  authDomain: "Your authDomain",
  databaseURL: "Your databaseURL",
  projectId: "Your projectId",
  storageBucket: "Your storageBucket",
  messagingSenderId: "Your messagingSenderId"
};

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

export default firebase;

步骤三：从 Firestore 中获取数据并显示到页面上

在 Next.js 应用中，创建一个页面 pages/index.js，然后从 Firestore 中获取数据，并将数据显示到页面上：

// pages/index.js
import React from "react";
import firebase from "../firebase";

function Home({ users }) {
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name}, {user.age}
          </li>
        ))}
      </ul>
    </div>
  );
}

export async function getServerSideProps() {
  const users = [];
  const snapshot = await firebase.firestore().collection("users").get();
  snapshot.forEach((doc) => {
    users.push({ id: doc.id, ...doc.data() });
  });
  return {
    props: {
      users,
    },
  };
}

export default Home;

步骤四：添加用户认证功能

首先，在 Firebase Console 中启用用户认证功能。然后，在 Next.js 应用中，创建一个页面 pages/login.js，然后添加用户登录功能：

// pages/login.js
import React, { useState } from "react";
import firebase from "../firebase";

function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleEmailChange = (event) => setEmail(event.target.value);
  const handlePasswordChange = (event) => setPassword(event.target.value);

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      await firebase.auth().signInWithEmailAndPassword(email, password);
      alert("Login successful.");
    } catch (error) {
      alert(error.message);
    }
  };

  return (
    <div>
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Email:
          <input type="text" value={email} onChange={handleEmailChange} />
        </label>
        <br />
        <label>
          Password:
          <input
            type="password"
            value={password}
            onChange={handlePasswordChange}
          />
        </label>
        <br />
        <button type="submit">Login</button>
      </form>
    </div>
  );
}

export default Login;

步骤五：限制未登录用户的访问权限

在 Next.js 应用中，创建一个高阶组件 withAuth.js，并使用它来限制未登录用户的访问权限：

// withAuth.js
import React from "react";
import firebase from "../firebase";
import Router from "next/router";

export default function withAuth(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      firebase.auth().onAuthStateChanged((authUser) => {
        if (!authUser) {
          Router.push("/login");
        }
      });
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

然后，在需要限制访问权限的页面中，使用这个高阶组件：

// pages/secret.js
import React from "react";
import withAuth from "../components/withAuth";

function Secret() {
  return (
    <div>
      <h1>Secret</h1>
      <p>This is a secret page!</p>
    </div>
  );
}

export default withAuth(Secret);

总结

本文详细介绍了如何使用 Next.js 和 Firebase 构建全栈应用的步骤，包括从 Firestore 中获取数据、添加用户认证功能和限制未登录用户的访问权限等。希望这篇文章可以提高大家的全栈开发能力和水平，并且对大家有指导意义。如果您有任何问题和建议，欢迎在下方评论区留言。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a79f90add4f0e0ff0c4a3d

使用 Next.js 和 Firebase 构建全栈应用的步骤详解

前言