Firebase x Next.js Configuration

next.config.js

const merge = require('lodash').merge

/**
 * @file Next.js Configuration
 * @see https://firebase.google.com/docs/web/setup
 * @see https://nextjs.org/docs/api-reference/next.config.js/introduction
 */

const {
  FIREBASE_API_KEY,
  FIREBASE_APP_ID,
  FIREBASE_PRIVATE_KEY,
  FIREBASE_PROJECT_ID,
  FIREBASE_MESSAGING_SENDER_ID
} = process.env

module.exports = {
  /**
   * Add environment variables to the JavaScript bundle.
   */
  env: {
    FIREBASE_API_KEY,
    FIREBASE_APP_ID,
    FIREBASE_AUTH_DOMAIN: `${FIREBASE_PROJECT_ID}.firebaseapp.com`,
    FIREBASE_DATABASE_URL: `https://${FIREBASE_PROJECT_ID}.firebaseio.com`,
    FIREBASE_MESSAGING_SENDER_ID,
    FIREBASE_PRIVATE_KEY,
    FIREBASE_PROJECT_ID,
    FIREBASE_STORAGE_BUCKET: `${FIREBASE_PROJECT_ID}.appspot.com`
  },

  /**
   * Extends the native Webpack configuration.
   *
   * @param {object} config - Webpack config object
   * @param {object} helpers - Next.js helpers
   * @param {string} helpers.buildId - Unique identifier between builds
   * @param {object} helpers.defaultLoaders - Default loaders used internally
   * @param {object} helpers.defaultLoaders.babel - `babel-loader` config
   * @param {boolean} helpers.dev - True if the compiling in development mode
   * @param {boolean} helpers.isServer - `true` for server-side compilation
   * @param {object} helpers.webpack - Webpack
   * @returns {object} Altered Webpack configuration
   */
  webpack: (config, helpers) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [{ loader: 'awesome-typescript-loader' }]
    })

    if (!helpers.isServer) {
      config.resolve.alias = merge(config.resolve.alias, {
        'firebase-admin': 'firebase'
      })
    }

    return config
  }
}