Next.jsで.envファイルをprocess.env.~でアクセスするとunderfindになる

Question

Next.jsにてenvファイルを使いたいので、いろいろなやり方を試していますが、毎回どうしても参照するとunderfindになってしまします。
原因が何かわからないので見て頂けると助かります。

また、htmlタグの中で.envファイルを参照すると、Did not expect server HTML to contain the text nodeエラーが出ます。(☆印の部分)このエラーの意味も調べましたがいまいちわかりませんでした。

実際には、firebaseのapiキーなどを.envから参照したいと思っています。

何卒宜しくお願い致します。

.envファイル


TEST=hogehoge

//next.config.jsファイル


require('dotenv').config();

module.exports = {
  env: {
    TEST: process.env.TEST,
  },
};

const withSass = require('@zeit/next-sass');
module.exports = withSass({
  cssModules: true,
});
module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /.tsx?$/,
      loader: 'eslint-loader',
      exclude: /node_modules/,
    });
    return config;
  },
};

//.envファイルを参照するファイル


import React from 'react';

const Home: React.FC = () => {
  console.log(process.env.TEST);//←←underfindになってしまう
  return (
    <>
      <p>{/* process.env.TEST*/}</p>//☆
    </>
  );
};

export default Home;

Answer 1

module.exportsが複数あり重複しているためうまく動いていないと思います。
またv9.4移行ではdotenv等を使わなくても動くので不要です。

詳細がわからなければ以下を参考にしてください

Basic Features: Environment Variables | Next.js
NextJS における環境変数まわりの挙動まとめ

Comments

[kanabunhalosaka]

回答ありがとうございます。
どのようにしてmodule.exportsを一つにすればよいでしょうか。sassが絡んだものもあり、どうすればよいか見当がつきません。

[mouse_484]

単に１つのオブジェクトにすれば良いのでは...?

[kanabunhalosaka]

すみません。別の原因でエラーが出ていたみたいです。うまくいきました。
相変わらず.envファイルは参照できませんでしたが、参照名に「NEXT_PUBLIC_」を付ける方法をもう一度ためしてみると解決しました。今のところはこの方法でやっていこうと思います。
ありがとうございました。