Интеграция Next.js

Используя интерфейс командной строки Firebase, вы можете развернуть свои веб-приложения Next.js в Firebase и обслуживать их с помощью хостинга Firebase. Интерфейс командной строки учитывает ваши настройки Next.js и преобразует их в настройки Firebase без дополнительных настроек с вашей стороны или с минимальными затратами. Если ваше приложение включает динамическую серверную логику, CLI развертывает эту логику в Cloud Functions for Firebase. Последняя поддерживаемая версия Next.js — 13.4.7.

Прежде чем вы начнете

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

  • Firebase CLI версии 12.1.0 или новее. Обязательно установите CLI, используя предпочитаемый вами метод.

  • Необязательно: в вашем проекте Firebase включена оплата (обязательно, если вы планируете использовать SSR).

  • Необязательно: используйте экспериментальную библиотеку ReactFire, чтобы воспользоваться ее функциями, удобными для Firebase.

Инициализировать Firebase

Для начала инициализируйте Firebase для вашего проекта платформы. Используйте интерфейс командной строки Firebase для нового проекта или измените firebase.json для существующего проекта.

Инициализировать новый проект

  1. В интерфейсе командной строки Firebase включите предварительный просмотр веб-платформ:
    firebase experiments:enable webframeworks

  2. Запустите команду инициализации из CLI и следуйте инструкциям:

    firebase init hosting

  3. Ответьте утвердительно на вопрос «Хотите ли вы использовать веб-фреймворк? (экспериментально)».

  4. Выберите исходный каталог хостинга. Если это существующее приложение Next.js, процесс CLI завершается, и вы можете перейти к следующему разделу.

  5. При появлении запроса выберите Next.js.

Размещать статический контент

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

firebase deploy

Вы можете просмотреть развернутое приложение на его действующем сайте.

Предварительный рендеринг динамического контента

Интерфейс командной строки Firebase обнаружит использование getStaticProps и getStaticPaths .

Необязательно: интеграция с Firebase JS SDK.

При включении методов Firebase JS SDK как в серверные, так и в клиентские пакеты защитите себя от ошибок во время выполнения, проверив isSupported() перед использованием продукта. Не все продукты поддерживаются во всех средах .

Необязательно: интеграция с Firebase Admin SDK.

Пакеты Admin SDK не будут работать, если они включены в сборку вашего браузера; ссылайтесь на них только внутри getStaticProps и getStaticPaths .

Предоставляйте полностью динамический контент (SSR)

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

Настройте поведение хостинга с помощью next.config.js

Оптимизация изображения

Использование оптимизации изображений Next.js поддерживается, но оно приведет к созданию функции (в Cloud Functions for Firebase ), даже если вы не используете SSR.

Перенаправления, перезаписи и заголовки

Интерфейс командной строки Firebase учитывает перенаправления , перезаписи и заголовки в next.config.js , преобразуя их в соответствующую эквивалентную конфигурацию хостинга Firebase во время развертывания. Если перенаправление, перезапись или заголовок Next.js не удается преобразовать в эквивалентный заголовок хостинга Firebase, он отступает и создает функцию, даже если вы не используете оптимизацию изображений или SSR.

Необязательно: интеграция с аутентификацией Firebase.

Инструмент развертывания Firebase с поддержкой веб-платформы автоматически синхронизирует состояние клиента и сервера с помощью файлов cookie. Существует несколько методов доступа к контексту аутентификации в SSR:

  • Объект Express res.locals может дополнительно содержать аутентифицированный экземпляр приложения Firebase ( firebaseApp ) и текущего пользователя ( currentUser ). Доступ к этому можно получить в getServerSideProps .
  • Аутентифицированное имя приложения Firebase указывается в запросе маршрута ( __firebaseAppName ). Это позволяет вручную интегрировать в контексте:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);