Next.jsでenvファイルを使用する

背景

Next.jsでfirebaseを使ったユーザー認証を作成したときにenvファイル使ったのでそのメモです。

実施

dotenv-webpackパッケージを使用します。

yarn add dotenv-webpack

.envにはfirebaseのapiKeyとmessagingSenderIdを記述しました。

.env

REACT_APP_FIREBASE_APIKEY=""
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""

firebase.js

import firebase from 'firebase/app'
import 'firebase/auth'

  // Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: "",
    measurementId: ""
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

export default firebase

next.config.jsの設定

next.config.js

const path = require('path')
const Dotenv = require('dotenv-webpack')

module.exports = {
  webpack: config => {
    config.plugins = config.plugins || []
    config.plugins = [
      ...config.plugins,

    // 設定を記述
    new Dotenv({
        path: path.join(__dirname, '.env'),
        systemvars: true
      })
    ]

    config.node = {
      fs: 'empty'
    }

    return config
  }
}

終わりに

Next.jsの記事がもっと増えていってほしいですね！