Using the Firebase CLI, you can deploy your Next.js Web apps to Firebase and
serve them with Firebase Hosting. The CLI respects your Next.js settings and
translates them to Firebase settings with zero or minimal extra configuration on
your part. If your app includes dynamic server-side logic, the CLI deploys that
logic to Cloud Functions for Firebase. The latest supported Next.js version is 13.4.7.
Before you begin
Before you get started deploying your app to Firebase,
review the following requirements and options:
Initialize Firebase
To get started, initialize Firebase for your framework project.
Use the Firebase CLI for a new project, or modify
firebase.json
for an
existing project.
Initialize a new project
- In the Firebase CLI, enable the web frameworks preview:
firebase experiments:enable webframeworks
Run the initialization command from the CLI and then follow the prompts:
firebase init hosting
Answer yes to "Do you want to use a web framework? (experimental)"
Choose your hosting source directory. If this an existing Next.js app,
the CLI process completes, and you can proceed to the next section.
If prompted, choose Next.js.
Serve static content
After initializing Firebase, you can serve static content with the standard
deployment command:
firebase deploy
You can
view your deployed app
on its live site.
Pre-render dynamic content
The Firebase CLI will detect usage of
getStaticProps
and
getStaticPaths
.
Optional: integrate with the Firebase JS SDK
When including Firebase JS SDK methods in both server and client bundles, guard
against runtime errors by checking
isSupported()
before using the product.
Not all products are
supported in all environments
.
Optional: integrate with the Firebase Admin SDK
Admin SDK bundles will fail if included in your browser build; refer to them
only inside
getStaticProps
and
getStaticPaths
.
Serve fully dynamic content (SSR)
The Firebase CLI will detect usage of
getServerSideProps
.
In such cases, the CLI will deploy functions to Cloud Functions for Firebase to run dynamic
server code. You can view information about these functions, such as their domain and runtime
configuration, in the
Firebase console
.
Image Optimization
Using
Next.js Image Optimization
is supported, but it will trigger creation of a function
(in
Cloud Functions for Firebase
), even if you’re not using SSR.
Redirects, Rewrites, and Headers
The Firebase CLI respects
redirects
,
rewrites
, and
headers
in
next.config.js
, converting them to their
respective equivalent Firebase Hosting configuration at deploy time. If a
Next.js redirect, rewrite, or header cannot be converted to an equivalent
Firebase Hosting header, it falls back and builds a function?even if you
aren’t using image optimization or SSR.
Optional: integrate with Firebase Authentication
The web framework-aware Firebase deployment tooling will automatically keep
client and server state in sync using cookies. There are some methods provided
for accessing the authentication context in SSR:
- The Express
res.locals
object will optionally contain an authenticated
Firebase App instance (
firebaseApp
) and the currently signed-in user
(
currentUser
). This can be accessed in
getServerSideProps
.
- The authenticated Firebase App name is provided on the route query
(
__firebaseAppName
). This allows for manual integration while in context:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);