Приступаем к Firebase
Что такое Firebase?
Firebase — это бэкенд-как-услуга (Baas), принадлежащий Google, которая позволяет разработчикам создавать полнофункциональные веб-приложения за несколько минут. Такие сервисы, как Firebase, позволяют фронтенд-разработчикам очень легко создавать полноценные веб-приложения, практически не имея навыков внутреннего программирования.
Firebase предоставляет различные методы аутентификации, базу данных NoSQL, базу данных в реальном времени, хранилище файлов, облачные функции, услуги хостинга и многое другое.
Как добавить Firebase в приложение Next.js?
Чтобы добавить Firebase в приложение Next.js, выполните следующие действия:
Создайте приложение Next.js 13, использующее Typescript и app роутер.
$ npx create-next-app sales-app
Зайдите в консоль Firebase и войдите в систему с помощью учетной записи Gmail.
Создайте проект Firebase после входа в систему.
Нажмите значок </>, чтобы создать новое веб-приложение Firebase.
Укажите имя вашего приложения и зарегистрируйте приложение.
Установите Firebase SDK, запустив приведённый ниже фрагмент кода.
$ npm install firebase
Создайте файл firebase.ts в корне вашего проекта Next.js и скопируйте в него код конфигурации Firebase для вашего приложения.
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
const firebaseConfig = {
apiKey: "*****",
authDomain: "*****",
projectId: "*****",
storageBucket: "*****",
messagingSenderId: "*******",
appId: "********",
measurementId: "********"
};
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
Наконец, обновите файл firebase.ts, чтобы он содержал некоторые необходимые модули для аутентификации Firebase и базы данных Firestore.
import { initializeApp, getApps } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { EmailAuthProvider } from "firebase/auth";
import { getAuth } from "firebase/auth";
const firebaseConfig = {
apiKey: "AIzaSyCtmI3jLzqDSr3UIwuUdBa5ocsN5vjzpW8",
authDomain: "stock-taking-19198.firebaseapp.com",
projectId: "stock-taking-19198",
storageBucket: "stock-taking-19198.appspot.com",
messagingSenderId: "228033001185",
appId: "1:228033001185:web:b2020053fb824a87d9a9a0",
measurementId: "G-79BQVKMPSR"
};
// Initialize Firebase
let app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
const provider = new EmailAuthProvider();
const db = getFirestore(app); const auth = getAuth(app);
export { provider, auth };
export default db;
Поздравляем! 🎉 Вы успешно добавили Firebase в свое приложение Next.js. Далее давайте настроим необходимые функции Firebase.
Продолжение следует...
Перевод с некоторыми авторскими заголовками. Автор оригинала: David Asaolu.