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

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

Примечание. Hosting с поддержкой Framework — это ранняя общедоступная предварительная версия. Это означает, что функциональность может измениться обратно несовместимым образом. Предварительная версия не подпадает под действие каких-либо соглашений об уровне обслуживания или политики прекращения поддержки и может получать ограниченную поддержку или вообще не поддерживаться.

Внимание! Разработчикам, создающим полнофункциональное приложение Next.js, мы настоятельно рекомендуем хостинг приложений Firebase . Если вы уже используете эксперимент с платформами в интерфейсе командной строки Firebase, мы рекомендуем «перейти» на App Hosting . Благодаря App Hosting у вас будет единое решение для управления всем — от CDN до рендеринга на стороне сервера, а также улучшенная интеграция с GitHub.

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

Прежде чем приступить к развертыванию приложения в 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() перед использованием продукта. Не все продукты поддерживаются во всех средах .

Совет: рассмотрите возможность использования ReactFire , который сделает это автоматически.

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

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

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

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

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

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

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

Примечание. Из-за этого каналы оптимизации изображений и предварительного просмотра Hosting плохо взаимодействуют друг с другом.

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

Интерфейс командной строки Firebase учитывает перенаправления , перезаписи и заголовки в 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);