Развертывание на хостинге приложений Firebase с помощью приложения Next.js

1. Прежде чем начать

В этой лабораторной работе вы узнаете, как выполнить развертывание на Firebase App Hosting с использованием веб-приложения Next.js под названием Friendly Eats, представляющего собой веб-сайт с отзывами о ресторанах.

Веб-приложение Friendly Eats

Готовое веб-приложение предлагает полезные функции, демонстрирующие, как Firebase может помочь вам создавать приложения Next.js.

  • Автоматическая сборка и развертывание: в этой лабораторной работе показано, как использовать Firebase App Hosting для автоматической сборки и развертывания кода Next.js при каждой отправке в настроенную ветку.
  • Вход и выход: готовое веб-приложение позволяет пользователям входить и выходить из аккаунта Google. Вход и сохранение данных пользователей полностью управляются через аутентификацию Firebase .
  • Изображения: Готовое веб-приложение позволяет зарегистрированным пользователям загружать изображения ресторанов. Изображения хранятся в Cloud Storage для Firebase . Firebase JavaScript SDK предоставляет публичный URL-адрес для загруженных изображений. Этот публичный URL-адрес затем сохраняется в соответствующем документе ресторана в Cloud Firestore .
  • Фильтры: Готовое веб-приложение позволяет зарегистрированным пользователям фильтровать список ресторанов по категории, местоположению и цене. Вы также можете настроить метод сортировки. Доступ к данным осуществляется из Cloud Firestore, а запросы к Firestore применяются на основе используемых фильтров.
  • Отзывы: Готовое веб-приложение позволяет зарегистрированным пользователям публиковать отзывы о ресторанах, состоящие из рейтинга в звёздах и текстового сообщения. Информация об отзывах хранится в Cloud Firestore.
  • Сводки отзывов: готовое веб-приложение автоматически суммирует отзывы, используя модель Gemini. Сводки, созданные ИИ, хранятся в Cloud Firestore.

Предпосылки

  • Знание Next.js и JavaScript

Чему вы научитесь

  • Как использовать Firebase с Next.js App Router и рендерингом на стороне сервера
  • Как авторизовать вызовы API Gemini, используя только серверные секреты

Что вам понадобится

  • Браузер по вашему выбору, например Google Chrome
  • Доступ к IDX.dev (рабочее веб-пространство)
  • Учетная запись Google для создания и управления вашим проектом Firebase.
  • Учетная запись GitHub (не обязательно должна совпадать с указанной выше учетной записью электронной почты)

2. Настройте среду разработки и репозиторий GitHub.

Эта кодовая лаборатория предоставляет стартовую кодовую базу приложения и использует Firebase CLI и IDX.dev.

Создайте новый репозиторий GitHub и импортируйте его в IDX

Firebase App Hosting позволяет вам настроить репозиторий GitHub, который будет собирать и развертывать ваш код Next.js каждый раз, когда вы отправляете его в настроенную ветку.

  1. Создайте новый репозиторий GitHub для этой лабораторной работы: https://github.com/new . Назовите его как угодно, например, MyFriendlyEatsCodelab .
  2. Скопируйте URL-адрес вашего нового репозитория. Он будет выглядеть так:
    https://github.com/ USER_NAME / REPOSITORY_NAME .git
  3. Перейдите на https://idx.google.com и войдите в систему.
  4. Нажмите «Импортировать репозиторий» и вставьте скопированный URL-адрес GitHub.
    IDX предложит вам подключиться к GitHub, после чего клонирует ваш (пустой) репозиторий.

Просмотреть репозиторий исходного кода codelab

Исходный код лабораторной работы можно посмотреть по адресу https://github.com/firebase/friendlyeats-web . Репозиторий friendlyeats-web содержит примеры проектов для различных платформ.

Эта практическая работа, над которой вы работаете, посвящена только Firebase App Hosting и Gemini API и представляет собой сокращённую версию полной практической работы «Интеграция Firebase с приложением Next.js» . Для выполнения этой сокращённой практической работы вам потребуется работать только с исходным кодом из ветки #io-connect репозитория friendlyeats-web , а именно с каталогом nextjs-step10 .

Обратите внимание на следующие дополнительные каталоги репозитория friendlyeats-web . Хотя для этой лабораторной работы они вам не понадобятся, полезно знать, что они собой представляют.

Скопируйте исходный код лабораторной работы в новый репозиторий.

Вот как скопировать каталог nextjs-step10 в свой репозиторий:

  1. В IDX откройте терминал, используя Меню > Терминал > Новый терминал .
  2. Используйте пакет npm giget для извлечения только каталога nextjs-step10 из ветки io-connect : 
    npx giget@latest gh:firebase/friendlyeats-web/nextjs-step10#io-connect . --force
  3. Отслеживайте изменения локально с помощью git: 
    git add -A
git commit -m "codelab starting point"
git branch -M main
git push -u origin main

Теперь вы должны увидеть стартовый код в вашем репозитории GitHub.

3. Проверьте начальную кодовую базу.

В этом разделе вы рассмотрите несколько областей начальной кодовой базы приложения, к которым вы добавите функциональность в этой лабораторной работе.

Структура папок и файлов

В следующей таблице содержится обзор структуры папок и файлов приложения:

Папки и файлы

Описание

src/components

Компоненты React для фильтров, заголовков, информации о ресторанах и отзывов

src/lib

Вспомогательные функции, которые не обязательно привязаны к React или Next.js

src/lib/firebase

Специфический для Firebase код и конфигурация Firebase

public

Статичные активы в веб-приложении, такие как значки

src/app

Маршрутизация с помощью маршрутизатора приложений Next.js

src/app/restaurant

Обработчик маршрутов API

package.json и package-lock.json

Зависимости проекта с npm

next.config.js

Конфигурация, специфичная для Next.js (действия сервера включены )

jsconfig.json

Конфигурация языковой службы JavaScript

Серверные и клиентские компоненты

Приложение представляет собой веб-приложение Next.js, использующее App Router . В приложении используется серверный рендеринг. Например, файл src/app/page.js — это серверный компонент, отвечающий за главную страницу. Файл src/components/RestaurantListings.jsx — это клиентский компонент, обозначенный директивой "use client" в начале файла.

Импортные заявления

В некоторых файлах вы можете заметить операторы импорта, подобные следующим:

import RatingPicker from "@/src/components/RatingPicker.jsx";

Приложение использует символ @ , чтобы избежать громоздких относительных путей импорта, и это стало возможным благодаря псевдонимам путей .

API, специфичные для Firebase

Весь код API Firebase упакован в каталог src/lib/firebase . Отдельные компоненты React импортируют упакованные функции из каталога src/lib/firebase , а не импортируют функции Firebase напрямую.

Фиктивные данные

Данные о фиктивных ресторанах и отзывах содержатся в файле src/lib/randomData.js . Данные из этого файла собираются в коде файла src/lib/fakeRestaurants.js .

4. Настройте свой проект Firebase

В этом разделе вы настроите проект Firebase и свяжете с ним веб-приложение Firebase. Вы также настроите службы Firebase, используемые примером веб-приложения.

Создать проект Firebase

  1. Войдите в консоль Firebase, используя ту же учетную запись Google, которую вы использовали на предыдущем шаге.
  2. Нажмите кнопку, чтобы создать новый проект, а затем введите имя проекта (например, FriendlyEats Codelab ).
  3. Нажмите «Продолжить» .
  4. При появлении соответствующего запроса ознакомьтесь с условиями Firebase и примите их, а затем нажмите кнопку «Продолжить» .
  5. (Необязательно) Включите помощь ИИ в консоли Firebase (так называемая «Gemini в Firebase»).
  6. Для этой лабораторной работы вам не понадобится Google Analytics, поэтому отключите опцию Google Analytics.
  7. Нажмите «Создать проект» , дождитесь завершения подготовки проекта, а затем нажмите «Продолжить» .

Обновите свой тарифный план Firebase

Чтобы использовать Firebase App Hosting и Cloud Storage для Firebase, ваш проект Firebase должен быть включен в тарифный план с оплатой по мере использования (Blaze) , что означает, что он должен быть связан с учетной записью Cloud Billing .

Чтобы обновить свой проект до плана Blaze, выполните следующие действия:

  1. В консоли Firebase выберите обновление вашего плана .
  2. Выберите тарифный план Blaze. Следуйте инструкциям на экране, чтобы подключить аккаунт Cloud Billing к своему проекту.
    Если вам потребовалось создать учетную запись Cloud Billing в рамках этого обновления, вам может потребоваться вернуться к процессу обновления в консоли Firebase, чтобы завершить обновление.

5. Создайте серверную часть хостинга приложений

В этом разделе вы настроите бэкенд App Hosting для отслеживания ветки в вашем Git-репозитории. Вы также настроите все сервисы, с которыми будет взаимодействовать бэкенд.

К концу этого раздела у вас будет бэкэнд App Hosting, подключенный к вашему репозиторию в GitHub, который будет автоматически пересобирать и выпускать новую версию вашего приложения всякий раз, когда вы отправляете новый коммит в main ветку.

Создать бэкэнд

  1. В консоли Firebase перейдите на страницу App Hosting : Нулевое состояние консоли App Hosting с кнопкой «Начать»
  2. Нажмите « Начать» , чтобы начать процесс создания бэкэнда.
  3. Следуйте инструкциям, чтобы импортировать и подключить репозиторий GitHub, созданный ранее.
  4. Задайте параметры развертывания:
    • Оставьте корневой каталог как /
    • Установите живую ветку как main
    • Включить автоматическое развертывание
  5. Назовите свой бэкенд friendlyeats-codelab (или любое другое имя по вашему выбору). Это имя станет частью домена, используемого для доступа к бэкенду.
    Этот рабочий процесс также автоматически создаёт веб-приложение Firebase в вашем проекте Firebase. Далее в этой лабораторной работе вы будете использовать значения конфигурации этого веб-приложения для подключения вашей кодовой базы к проекту Firebase.
  6. Нажмите «Готово и развернуть» . Через мгновение вы перейдете на новую страницу, где сможете увидеть статус вашего нового бэкэнда App Hosting!
  7. Скопируйте новый домен из панели App Hosting.
    Он будет иметь следующий шаблон: BACKEND_ID -- PROJECT_ID . REGION .hosted.app . Этот домен понадобится вам для настройки аутентификации Firebase позже.

Начало работы домена может занять несколько минут, так как это связано с распространением DNS и созданием SSL-сертификата. Пока создаётся ваш бэкенд, продолжайте настраивать оставшуюся часть проекта Firebase и сам бэкенд (следующие шаги этой практической работы).

Каждый раз, когда вы отправляете новый коммит в main ветку вашего репозитория GitHub, вы увидите новую сборку и начало развертывания в консоли Firebase, а ваш сайт автоматически обновится после завершения развертывания.

6. Настройте другие службы Firebase

Несмотря на то, что эта лабораторная работа посвящена только Firebase App Hosting и Gemini API, для работы веб-приложения требуются другие сервисы Firebase. Код, обеспечивающий работу всех этих сервисов в вашем приложении, входит в кодовую базу, которую вы скопировали в свой репозиторий GitHub, но вам всё равно необходимо настроить эти сервисы в вашем проекте Firebase.

Настроить аутентификацию

  1. В консоли Firebase перейдите в раздел Аутентификация .
  2. Нажмите « Начать» .
  3. В столбце Дополнительные поставщики нажмите Google > Включить .
    1. В текстовом поле Публичное имя проекта введите имя, например, My FriendlyEatsCodelab app .
    2. В раскрывающемся списке «Электронная почта поддержки проекта» выберите свой адрес электронной почты.
    3. Нажмите «Сохранить» .
  4. Нажмите вкладку «Настройки» на странице «Аутентификация» .
    1. Нажмите «Авторизованные домены» в меню слева на экране.
    2. Нажмите Добавить домен , а затем добавьте недавно созданный домен App Hosting (он заканчивается на .hosted.app ).
    3. Нажмите «Добавить» , чтобы сохранить.

Настройка Cloud Firestore

  1. На левой панели консоли Firebase разверните пункт «Сборка» , а затем выберите «База данных Firestore» .
  2. Нажмите Создать базу данных .
  3. Оставьте идентификатор базы данных равным (default) .
  4. Выберите местоположение вашей базы данных, затем нажмите «Далее» .
    Для настоящего приложения вам нужно выбрать местоположение, близкое к вашим пользователям.
  5. Нажмите «Начать в тестовом режиме» . Ознакомьтесь с отказом от ответственности о правилах безопасности.
    Далее в этой лабораторной работе вы добавите правила безопасности для защиты своих данных. Не распространяйте и не публикуйте приложение, не добавив правила безопасности для своей базы данных.
  6. Нажмите «Создать» .

Настройка облачного хранилища для Firebase

  1. На левой панели консоли Firebase разверните Сборка , а затем выберите Хранилище .
  2. Нажмите « Начать» .
  3. Выберите местоположение для контейнера хранения по умолчанию.
    Бакеты в US-WEST1 , US-CENTRAL1 и US-EAST1 могут воспользоваться тарифом «Всегда бесплатно» для Google Cloud Storage. Бакеты во всех остальных регионах следуют тарифам и условиям использования Google Cloud Storage .
  4. Нажмите «Начать в тестовом режиме» . Ознакомьтесь с отказом от ответственности о правилах безопасности.
    Далее в этой лабораторной работе вы добавите правила безопасности для защиты своих данных. Не распространяйте и не публикуйте приложение, не добавив правила безопасности для вашего контейнера хранилища .
  5. Нажмите «Создать» .

7. Настройте свое веб-приложение

Теперь, когда вы создали проект Firebase и включили все службы Firebase, используемые в вашем приложении, вы готовы начать работу в IDX, чтобы настроить ваше веб-приложение для использования этих служб.

Войдите в Firebase CLI через IDX.

В IDX уже установлены Node.js и Firebase CLI, поэтому вы можете пропустить их установку и просто начать настраивать CLI.

  1. В терминале IDX выполните следующие команды, чтобы настроить CLI для использования проекта Firebase, который вы создали ранее:
    firebase login --no-localhost
firebase use --add
    При появлении запроса на ввод псевдонима введите codelab .
  2. В зависимости от того, хотите ли вы, чтобы Firebase собирал данные, введите Y или N Для этой практической работы подойдет любой из вариантов.
  3. В браузере выберите свою учетную запись Google и нажмите Разрешить .

Развертывание правил безопасности и индексов

Код, скопированный вами в репозиторий GitHub, уже содержит наборы правил безопасности для Firestore (в файле firestore.rules ) и для Cloud Storage for Firebase (в storage.rules ). После внедрения правил безопасности данные в вашей базе данных и контейнере будут лучше защищены от несанкционированного использования.

Вы также можете использовать CLI для развертывания набора индексов для Firestore (в firestore.indexes.json ), чтобы включить расширенные запросы.

  1. В терминале IDX выполните следующую команду для развертывания этих правил безопасности и индексов: 
    firebase deploy --only firestore,storage
  2. Если появится вопрос: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" , нажмите Enter , чтобы выбрать Да .

Добавьте конфигурацию Firebase в код вашего веб-приложения

  1. В консоли Firebase выполните следующие действия:
    1. Перейдите в настройки вашего проекта .
    2. Прокрутите вниз до раздела «Ваши приложения» , а затем выберите приложение с таким же именем, как у вашего сервера App Hosting.
    3. В разделе «Настройка и конфигурация SDK» выберите параметр « Конфигурация» , затем скопируйте свойства переменной firebaseConfig и их значения.
  2. В IDX выполните следующие действия:
    1. Откройте файл apphosting.yaml . В нём вы настроите переменные среды App Hosting, а также секреты и конфигурацию среды выполнения.
    2. Заполните предоставленные значения переменных среды значениями конфигурации, скопированными из консоли Firebase. Например (замените своими значениями): 
      runConfig:
    minInstances: 0
    maxInstances: 2
env:
    # Get these values from the Firebase console
    - variable: NEXT_PUBLIC_FIREBASE_API_KEY
        value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
    - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
        value: project-id.firebaseapp.com
    - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
        value: project-id
    - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
        value: project-id.firebasestorage.app
    - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
        value: 111111111111
    - variable: NEXT_PUBLIC_FIREBASE_APP_ID
        value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
    3. Сохраните файл. Затем в терминале IDX выполните следующие команды, чтобы отправить изменения на GitHub: 
      git commit -a -m "Setup Firebase Config"

git push
  3. Вернитесь в консоль Firebase, перейдите обратно на страницу App Hosting и выполните следующие действия:
    1. Нажмите «Просмотреть панель управления» для вашего бэкэнда.
    2. Обратите внимание, что новая сборка запущена по вашему git-пушу! Сборка и её развёртывание в Cloud Run займёт около 3 минут. Вы можете отслеживать ход процесса, нажав на чип build- ID .
    3. Обновите страницу консоли, чтобы проверить, завершилось ли развёртывание. После завершения нажмите на ссылку вашего домена (заканчивающегося на .hosted.app ) в разделе «Домены» , чтобы открыть его и увидеть развёрнутое приложение!

Поздравляем, вы развернули первое веб-приложение! Давайте углубимся в детали.

8. Попробуйте веб-приложение в браузере.

Убедитесь, что вы можете войти в систему, используя аутентификацию Firebase.

  1. В браузере обновите страницу, на которой отображается ваше веб-приложение.
  2. Нажмите «Войти через Google» .
  3. Выйдите и войдите снова. Страница обновляется в режиме реального времени без перезагрузки. Вы можете повторить этот шаг для разных пользователей.
  4. Необязательно: обновите веб-приложение в браузере. Щёлкните правой кнопкой мыши по веб-приложению, выберите «Просмотреть исходный код страницы » и найдите отображаемое имя. Оно отображается в исходном HTML-коде, возвращаемом сервером.

Посмотреть информацию о ресторане

Веб-приложение включает в себя фиктивные данные о ресторанах и отзывах.

Чтобы вставить данные о фиктивном ресторане в базу данных Cloud Firestore, выберите 2cf67d488d8e6332.png > Добавить примеры ресторанов .

Убедитесь, что списки ресторанов загружаются во время работы сервера.

При использовании фреймворка Next.js может быть неочевидно, загружаются ли данные во время выполнения на сервере или во время выполнения на стороне клиента.

Чтобы убедиться, что списки ресторанов загружаются во время работы сервера, выполните следующие действия:

  1. В веб-приложении откройте DevTools и отключите JavaScript . Отключить JavaScipt в DevTools
  2. Обновите веб-приложение. Список ресторанов всё ещё загружается. Информация о ресторанах возвращается в ответе сервера. При включённом JavaScript информация о ресторанах обрабатывается клиентским JavaScript-кодом.
  3. В DevTools снова включите JavaScript .
  4. В веб-приложении выберите 27ca5d1e8ed8adfe.png > Добавьте примеры ресторанов . Если функция создания снимков реализована правильно, рестораны будут отображаться в режиме реального времени без обновления страницы.

Добавить отзывы о ресторане

Чтобы добавить отзыв и убедиться, что он добавлен в Cloud Firestore, выполните следующие действия:

  1. Обновите веб-приложение и выберите ресторан на домашней странице.
  2. На странице ресторана нажмите 3e19beef78bb0d0e.png .
  3. Выберите рейтинг (звезды).
  4. Написать отзыв.
  5. Нажмите «Отправить» . Ваш отзыв появится в верхней части списка отзывов.

9. Составляйте обзоры ресторанов с помощью генеративного искусственного интеллекта

В этом разделе вы добавите функцию сводки отзывов, чтобы пользователь мог быстро понять, что все думают о ресторане, без необходимости читать каждый отзыв.

Сохраните ключ API Gemini в Cloud Secret Manager

App Hosting интегрируется с Cloud Secret Manager , что позволяет безопасно хранить конфиденциальные значения, такие как ключи API.

  1. Для использования API Gemini вам понадобится ключ API. Создайте его в Google AI Studio .
    При появлении запроса выберите тот же проект, который вы использовали для этой лабораторной работы (на самом деле проект Firebase — это проект Google Cloud).
  2. В терминале IDX выполните следующую команду, чтобы создать новый секрет: 
    firebase apphosting:secrets:set gemini-api-key
  3. При появлении запроса на ввод секретного значения скопируйте и вставьте ключ API Gemini из Google AI Studio.
  4. Если появится вопрос: "To use this secret, your backend's service account must be granted access. Would you like to grant access now?" , нажмите Enter , чтобы выбрать «Да» .
  5. Когда вас спросят, следует ли добавить новый секрет в apphosting.yaml , введите Y для принятия, затем нажмите Enter , чтобы выбрать GEMINI_API_KEY в качестве имени переменной среды.

Ваш ключ API Gemini теперь безопасно хранится в Cloud Secret Manager и доступен вашему серверу App Hosting. Вы также можете просмотреть его значение на панели управления Secrets Manager в Google Cloud Console .

  1. Откройте файл apphosting.yaml и обратите внимание, что имя вашего секрета было записано, но не значения. Он должен выглядеть следующим образом: 
    runConfig:
    minInstances: 0
    maxInstances: 2
env:
    # Get these values from the Firebase console
    - variable: NEXT_PUBLIC_FIREBASE_API_KEY
        value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
    - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
        value: project-id.firebaseapp.com
    - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
        value: project-id
    - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
        value: project-id.firebasestorage.app
    - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
        value: 111111111111
    - variable: NEXT_PUBLIC_FIREBASE_APP_ID
        value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
    - variable: GEMINI_API_KEY
        secret: gemini-api-key

Реализовать компонент резюме обзора

  1. В IDX откройте src/components/Reviews/ReviewSummary.jsx .
  2. Замените функцию GeminiSummary следующим кодом: 
    export async function GeminiSummary({ restaurantId }) {
    const { firebaseServerApp } = await getAuthenticatedAppForUser();
    const reviews = await getReviewsByRestaurantId(
        getFirestore(firebaseServerApp),
        restaurantId
    );

    const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
    const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash",
    safety_settings: [
        {
        category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
        threshold: HarmBlockThreshold.BLOCK_NONE,
        },
    ],
    });
    const reviewSeparator = "@";
    const prompt = `
        Based on the following restaurant reviews,
        where each review is separated by a '${reviewSeparator}' character,
        create a one-sentence summary of what people think of the restaurant.

        Here are the reviews: ${reviews.map(review => review.text).join(reviewSeparator)}
    `;

    try {
        const result = await model.generateContent(prompt);
        const response = await result.response;
        const text = response.text();

        return (
            <div className="restaurant__review_summary">
                <p>{text}</p>
                <p>✨ Summarized with Gemini</p>
            </div>
        );
    } catch (e) {
        console.error(e);
        return <p>Error contacting Gemini</p>;
    }
}
  3. В терминале IDX выполните следующие команды, чтобы создать коммит и отправить его в репозиторий GitHub. 
    git commit -a -m "Use AI to summarize reviews"

git push
  4. В консоли Firebase откройте страницу App Hosting и дождитесь завершения развертывания нового приложения.
  5. В браузере нажмите на карточку ресторана. В верхней части экрана вы увидите краткое описание всех отзывов о нём.
  6. Добавьте новый отзыв и обновите страницу. Вы увидите изменение в кратком содержании.

10. Заключение

Поздравляем! Вы научились использовать Firebase App Hosting для развёртывания приложения Next.js и использовать API Gemini для реферирования текста. В частности, вы использовали следующее:

  • Firebase App Hosting для автоматической сборки и развертывания вашего кода Next.js каждый раз при его отправке в настроенную ветку GitHub.
  • Cloud Secret Manager (интегрированный с App Hosting) для безопасного хранения вашего ключа API Gemini, чтобы вы могли создавать функции генеративного ИИ в своем приложении.

Узнать больше

Изучите полную практическую работу «Интеграция Firebase с приложением Next.js», чтобы узнать, как мы добавили в это приложение аутентификацию Firebase, Cloud Firestore и облачное хранилище для Firebase.

Также ознакомьтесь с другими практическими занятиями: