If you are building server-rendered Angular or Next.js apps, check out next-generation Firebase App Hosting, a full-stack solution for modern web frameworks.

Эта страница переведена с помощью Cloud Translation API.

Интегрируйте Next.js

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

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

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

Firebase CLI версии 12.1.0 или более поздней. Убедитесь, что вы установили CLI выбранным вами способом.
Необязательно: включите оплату в вашем проекте Firebase (обязательно, если вы планируете использовать SSR).
Дополнительно: используйте экспериментальную библиотеку ReactFire, чтобы воспользоваться ее преимуществами, связанными с Firebase.

Инициализация Firebase

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

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

В интерфейсе командной строки Firebase включите предварительный просмотр веб-фреймворков:
```
firebase experiments:enable webframeworks
```
Выполните команду инициализации из командной строки, а затем следуйте инструкциям:
```
firebase init hosting
```
Ответьте «да» на вопрос «Хотите ли вы использовать веб-фреймворк? (экспериментальный)»
Выберите каталог с исходными файлами вашего хостинга. Если это уже существующее приложение Next.js, процесс CLI завершится, и вы сможете перейти к следующему разделу.
Если появится запрос, выберите Next.js.

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

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

firebase deploy

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

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

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

Дополнительно: интеграция с Firebase JS SDK.

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

Дополнительно: интеграция с Firebase Admin SDK.

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

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

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

Настройка поведения Hosting с помощью `next.config.js`

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

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

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

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

Дополнительно: интеграция с Firebase Authentication

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

Объект Express res.locals может дополнительно содержать аутентифицированный экземпляр приложения Firebase ( firebaseApp ) и текущего вошедшего в систему пользователя ( currentUser ). Доступ к ним можно получить в getServerSideProps .
Аутентифицированное имя приложения Firebase указывается в запросе маршрута ( __firebaseAppName ). Это позволяет выполнять ручную интеграцию в контексте:

// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);