背景
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
importfirebasefrom'firebase/app'import'firebase/auth'// Your web app's Firebase configurationconstfirebaseConfig={apiKey:process.env.REACT_APP_FIREBASE_APIKEY,authDomain:"",databaseURL:"",projectId:"",storageBucket:"",messagingSenderId:process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,appId:"",measurementId:""};// Initialize Firebasefirebase.initializeApp(firebaseConfig);exportdefaultfirebasenext.config.jsの設定
next.config.js
constpath=require('path')constDotenv=require('dotenv-webpack')module.exports={webpack:config=>{config.plugins=config.plugins||[]config.plugins=[...config.plugins,// 設定を記述newDotenv({path:path.join(__dirname,'.env'),systemvars:true})]config.node={fs:'empty'}returnconfig}}終わりに
Next.jsの記事がもっと増えていってほしいですね！