質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Q&A

解決済

1回答

300閲覧

環境変数「.env」の使い方が分かりません。

Koock

総合スコア32

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

0グッド

0クリップ

投稿2022/12/25 02:40

前提

NextアプリをWindows10で作成しています。
環境変数「.env」の使い方が分かりません。

実現したいこと

何方かNextにて環境変数「.env」の使い方をご教授願います

試したこと

次の実験をしました。
[実験A]
1.NextアプリNextアプリのトップフォルダーに「.env」を置く
内容は「API_KEY=12345」とします。
2.page\index.jsにおいて次のように書きます
export default function Home({blog}) {
console.log("key=", process.env.API_KEY)
...
3.コンソールで「yarn dev」を実行すると、次の文字が出力される
key= undefined

[実験B]
1.[実験A]の1において、pageフォルダーに「.env」を置く
2.[実験A]の2と同じ
3.[実験A]の3と同じ

[実験C]
「.env」を「.env.local」に名前変更して、[実験A]と[実験B]を行う

[実験D]
ある記事でWindowsの場合、次のようにする、とあったのでコンソールでやってみた
1.「.env.local」は削除しておく
2.次を実行
npx cross-env API_KEY=12345
3.[実験A]の3と同じ

補足情報(FW/ツールのバージョンなど)

私の環境
OS:Windows10
コンソール:WindowsPowerShell
node -v:v16.14.0
Nextアプリ:npx create-next-app@latest で作成

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

okakemetal

2022/12/26 04:05

process.env ファイルをpage\index.jsと同じ階層においてもダメですか?
Koock

2022/12/26 06:22

okakemetalさん。[実験B]で示したように、.envファイルをpage\index.jsと同じ階層においてもダメだったです。
okakemetal

2022/12/26 08:50

ほんとですね 失礼しました
guest

回答1

0

自己解決

ある記事を見て、私の[実験C]と同じなので、もう1度行いました。つまり、
トップフォルダーに「.env.local」を置く。
console.log("key=", process.env.API_KEY)
で確認したら、正しく表示された。
何が悪かったのか不明だが、解決した。

投稿2022/12/28 07:26

Koock

総合スコア32

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問