Firebase is back at Google I/O on May 10! Register now

Integrate Next.js

Stay organized with collections Save and categorize content based on your preferences.

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.

Before you begin

Before you get started deploying your Next.js app to Firebase, first review the following requirements and options:

  • Firebase CLI version 11.14.2 or later. Make sure to install the CLI using your preferred method.
  • Optional: Billing enabled on your Firebase project (required if you plan to use SSR)
  • Optional: use the experimental ReactFire library to benefit from its Firebase-friendly features

Initialize Firebase

To get started, initialize Firebase for your framework project.

  1. In the Firebase CLI, enable the web frameworks preview: 
    firebase experiments:enable webframeworks
  2. Run the initialization command from the CLI and then follow the prompts: 
    firebase init hosting
  3. Choose your hosting source directory. If this an existing Next.js app, the CLI process completes, and you can proceed to the next section.
  4. Choose "Dynamic web hosting with web framework"
  5. 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.

Configure Hosting behavior with next.config.js

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);