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

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

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

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

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

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

Предварительные требования

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

Что вы узнаете

  • Как использовать Firebase с приложением Next.js, маршрутизатором и рендерингом на стороне сервера.
  • Как авторизовать вызовы к 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

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

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

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

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

Вот как скопировать каталог 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 (в Firebase она называется "Gemini").
  6. Для этого практического занятия вам не понадобится Google Analytics, поэтому отключите эту опцию.
  7. Нажмите «Создать проект» , дождитесь завершения подготовки проекта, а затем нажмите «Продолжить» .

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

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

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

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

5. Создайте бэкэнд для размещения приложений.

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

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

Создайте бэкэнд.

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

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

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

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

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

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

  1. В консоли Firebase перейдите в раздел «Аутентификация» .
  2. Нажмите « Начать» .
  3. В столбце «Дополнительные поставщики» нажмите Google > Включить .
    1. В текстовом поле « Название проекта, доступное для всех» введите название, например, My FriendlyEatsCodelab app .
    2. В раскрывающемся списке «Адрес электронной почты службы поддержки для проекта» выберите свой адрес электронной почты.
    3. Нажмите « Сохранить ».
  4. На странице аутентификации нажмите вкладку «Настройки» .
    1. В меню слева на экране выберите пункт «Авторизованные домены» .
    2. Нажмите «Добавить домен» , а затем добавьте свой недавно созданный домен для размещения приложений (он заканчивается на .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 в 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. Прокрутите вниз до раздела «Ваши приложения» , а затем выберите приложение с тем же названием, что и ваша панель управления хостингом приложений.
    3. В разделе «Настройка и конфигурация SDK» выберите пункт «Config» , затем скопируйте свойства переменной firebaseConfig и их значения.
  2. В IDX выполните следующие действия:
    1. Откройте файл apphosting.yaml . Здесь вы настроите переменные среды для хостинга приложений, а также секреты и конфигурацию среды выполнения.
    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, перейдите на страницу «Хостинг приложений» и выполните следующие действия:
    1. Чтобы открыть панель управления, нажмите «Просмотреть панель управления» .
    2. Обратите внимание, что после выполнения команды `git push` запущена новая сборка! На завершение сборки и развертывание в Cloud Run потребуется около 3 минут. Вы можете отслеживать ход выполнения, щелкнув по build- ID .
    3. Обновите страницу консоли, чтобы проверить, завершилось ли развертывание. После завершения щелкните ссылку для вашего домена (заканчивающегося на .hosted.app ) в разделе «Домены» , чтобы открыть его и увидеть только что развернутое приложение!

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

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

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

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

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

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

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

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

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

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

  1. В веб-приложении откройте инструменты разработчика и отключите JavaScript . Отключение JavaScript в инструментах разработчика
  2. Обновите веб-приложение. Список ресторанов по-прежнему загружается. Информация о ресторане возвращается в ответе сервера. Если JavaScript включен, информация о ресторане заполняется с помощью клиентского JavaScript-кода.
  3. В инструментах разработчика повторно включите 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 и доступен для бэкэнда вашего приложения. Вы также можете просмотреть его значение на панели управления Secrets Manager в консоли Google Cloud .

  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-2.5-flash-lite",
    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 откройте страницу «Размещение приложений» и дождитесь завершения развертывания.
  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 Authentication, Cloud Firestore и Cloud Storage for Firebase.

Также посмотрите другие примеры кода: