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 . Последняя поддерживаемая версия Next.js — 13.4.7.

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

Прежде чем приступить к развертыванию приложения в 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 CLI обнаружит использование getServerSideProps . В таких случаях CLI развернет функции в Cloud Functions for Firebase для запуска динамического серверного кода. Вы можете просмотреть информацию об этих функциях, например их домен и конфигурацию времени выполнения, в консоли Firebase .

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

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

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

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

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

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

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

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

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