Как получить данные из Firebase в getServerSideProps с помощью NextJs

Я пытаюсь понять, как получить данные из Firebase внутри GetServerSideProps в NextJs.

Вот мой файл БД

import admin from "firebase-admin";
import serviceAccount from "./serviceAccountKey.json";

if (!admin.apps.length) {
  try {
    admin.initializeApp({
      credential: admin.credential.cert(serviceAccount),
    });
  } catch (error) {
    console.log("Firebase admin initialization error", error.stack);
  }
}
export default admin.firestore();

Затем внутри getServerSideProps

export async function getServerSideProps(context) {
  const id = context.params.profileId;
  const doc = await db.collection("profile").doc(id).get();
  const profile = doc.data();
  return {
    props: { profile },
  };
}

Получение следующей ошибки

error - ./node_modules/@google-cloud/storage/build/src/bucket.js:21:0
Module not found: Can't resolve 'fs'

Есть ли другой способ вызвать firebase без использования библиотеки узлов, которая зависит от файловой системы? Или есть способ обойти это?

Спасибо.

вы получаете эту ошибку, потому что где-то на стороне клиента вы используете код firebase, который принадлежит стороне сервера. На стороне клиента у вас нет модуля fs, поэтому код, работающий на клиенте, не работает.

Yilmaz 18.11.2022 23:37

Похоже, это так. Однако, согласно документации Next.js, getServerSideProps работает только на стороне сервера и никогда не запускается в браузере.

Ben Ahlander 19.11.2022 00:31
nextjs.org/docs/basic-features/data-fetching/…
Ben Ahlander 19.11.2022 00:32
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
JavaScript - For Loop
JavaScript - For Loop
Наиболее используемая компактная форма оператора цикла.
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
0
3
209
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы используете firebase-admin, вы можете использовать только в функциях API. вы даже не можете импортировать его на стороне клиента. Ему нужен доступ к модулю fs, который недоступен на стороне клиента. Если вам нужна firebase на стороне клиента, используйте модуль @firebase/app npm.

import { initializeApp, getApps } from 'firebase/app'
import { getAnalytics } from 'firebase/analytics'
export const createFirebaseApp = () => {
  const clientCredentials = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
  }

  if (getApps().length <= 0) {
    const app = initializeApp(clientCredentials)
    // Check that `window` is in scope for the analytics module!
    if (typeof window !== 'undefined') {
      // Enable analytics. https://firebase.google.com/docs/analytics/get-started
      if ('measurementId' in clientCredentials) {
        getAnalytics()
      }
    }
    return app
  }
}

у вас может быть два отдельных файла конфигурации firebase. Один для клиентской стороны, как указано выше, другой использует firebase-admin, как вы определили.

Красивый! Это работает.

Ben Ahlander 19.11.2022 04:08

Другие вопросы по теме

База данных Firestore: как искать электронное письмо в нескольких документах
Получение необработанного исключения: [cloud_firestore/permission-denied]. Я проверил, что все было в порядке в firebase
Тип элемента «int» не может быть назначен типу значения карты «FieldValue» при попытке присвоить новое значение
Как загрузить несколько изображений в FiresbaseStorage и вернуть URL-адреса в JetpackCompose
Ошибка TS: тип «Query<DocumentData>» не может быть назначен параметру типа «DocumentReference<DocumentData>»
TypeError: Невозможно прочитать свойства undefined (чтение «init») || Флаттер веб
Модуль не найден: путь к пакету. не экспортируется из пакета / Firebase не будет обновляться в приложении next.js
Как добавить SDK проверки приложения Firebase в мое веб-приложение?
При использовании onValue для прослушивания базы данных Firebase в реальном времени на наличие обновлений можно ли получить тип события child_added или child_changed?
Android Room и Firebase в архитектуре MVVM — первое автономное приложение