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

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

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

firebase deploy

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

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

Firebase CLI обнаружит использование getStaticProps и getStaticPaths .

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

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

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

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

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

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

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

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

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

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

Firebase CLI учитывает перенаправления , перезаписи и заголовки в next.config.js , преобразуя их в соответствующие эквивалентные конфигурации Firebase Hosting во время развёртывания. Если перенаправление, перезаписи или заголовок Next.js невозможно преобразовать в эквивалентный заголовок Firebase Hosting , он откатывается и создаёт функцию, даже если вы не используете оптимизацию изображений или 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);