[Next.js] 環境変数の使い方

2024.3.6

INDEX

はじめに

Next.jsの環境変数とは

読み込みの優先順位: .env < .env.local

種類	説明
先頭NEXT_PUBLIC_なし	サーバーサイドのみ参照可能な変数
先頭NEXT_PUBLIC_あり	サーバーサイド/クライアントサイドの両方で参照可能な変数

使い方

環境変数(.env)を取得するページの実装

STEP

.envを新規で作成する

TEST='TEST: サーバーサイドのみ参照可能な変数です'
NEXT_PUBLIC_TEST='NEXT_PUBLIC_XXX: サーバーサイド/クライアントサイドの両方で参照可能な変数'

STEP

src/pages/env.tsxを新規で作成する

mkdir -p frontend/src/pages && touch frontend/src/pages/env.tsx

src/pages/env.tsxの中身を下記の通りに設定する

import * as next from 'next'
import Head from 'next/head'
import Link from 'next/link'
import { useRouter } from 'next/router'

type ISRProps = {
  message: string
}

const ENV: next.NextPage = (props) => {
  console.log('ENV -> process.env.TEST', process.env.TEST)
  console.log('ENV -> process.env.NEXT_PUBLIC_TEST', process.env.NEXT_PUBLIC_TEST)

  return (
    <>
      <Head>
        <title>Static Site Generation</title>
        <Link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <p>下記に`process.env.TEST`を表示しております。</p>
        <p>{process.env.TEST}</p>
        <p>下記に`process.env.NEXT_PUBLIC_TEST`を表示しております。</p>
        <p>{process.env.NEXT_PUBLIC_TEST}</p>
      </main>
    </>
  )
}

export const getStaticProps: next.GetStaticProps = async (context) => {
  console.log('getStaticProps -> process.env.TEST', process.env.TEST)
  console.log('getStaticProps -> process.env.NEXT_PUBLIC_TEST', process.env.NEXT_PUBLIC_TEST)
  return { props: {} }
}

export default ENV

STEP

実行コマンドを実行してローカルで起動する

npm run dev

出力結果を確認します

$ npm run dev

> frontend@0.1.0 dev
> next dev

  ▲ Next.js 14.0.4
  - Local:        http://localhost:3000
  - Environments: .env

✓ Ready in 4.8s
○ Compiling / ...
✓ Compiled / in 1352ms (268 modules)
✓ Compiled /favicon.ico in 312ms (152 modules)
○ Compiling /env ...
✓ Compiled /env in 654ms (475 modules)
getStaticProps -> process.env.TEST TEST: サーバーサイドのみ参照可能な変数です。
getStaticProps -> process.env.NEXT_PUBLIC_TEST NEXT_PUBLIC_XXX: サーバーサイド/クライアントサイドの両方で参照可能な変数
ENV -> process.env.TEST TEST: サーバーサイドのみ参照可能な変数です。
ENV -> process.env.NEXT_PUBLIC_TEST NEXT_PUBLIC_XXX: サーバーサイド/クライアントサイドの両方で参照可能な変数

STEP

.env実装ページにアクセスする

下記の画像のようなページが表示される

※下記画像の通りエラー画面が表示される為、右上の×ボタンで閉じます

環境変数(.env.local)を取得するページの実装

 .env.local > .env ファイルを優先して取得されるのかを確認する

STEP

.env.localを追加で作成する

TEST='TEST: サーバーサイドのみ参照可能な変数(local)'
NEXT_PUBLIC_TEST='NEXT_PUBLIC_XXX: サーバーサイド/クライアントサイドの両方で参照可能な変数(local)'

STEP

実行コマンドを実行してローカルで起動する

npm run dev

出力結果を確認します

$ npm run dev

> frontend@0.1.0 dev
> next dev

  ▲ Next.js 14.0.4
  - Local:        http://localhost:3000
  - Environments: .env.local, .env

✓ Ready in 4.1s
○ Compiling /not-found ...

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
✓ Compiled /not-found in 12.5s (619 modules)
getStaticProps -> process.env.TEST TEST: サーバーサイドのみ参照可能な変数(local)
getStaticProps -> process.env.NEXT_PUBLIC_TEST NEXT_PUBLIC_XXX: サーバーサイド/クライアントサイドの両方で参照可能な変数(local)
ENV -> process.env.TEST TEST: サーバーサイドのみ参照可能な変数(local)
ENV -> process.env.NEXT_PUBLIC_TEST NEXT_PUBLIC_XXX: サーバーサイド/クライアントサイドの両方で参照可能な変数(local)
⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
getStaticProps -> process.env.TEST TEST: サーバーサイドのみ参照可能な変数(local)
getStaticProps -> process.env.NEXT_PUBLIC_TEST NEXT_PUBLIC_XXX: サーバーサイド/クライアントサイドの両方で参照可能な変数(local)
ENV -> process.env.TEST TEST: サーバーサイドのみ参照可能な変数(local)
ENV -> process.env.NEXT_PUBLIC_TEST NEXT_PUBLIC_XXX: サーバーサイド/クライアントサイドの両方で参照可能な変数(local)
getStaticProps -> process.env.TEST TEST: サーバーサイドのみ参照可能な変数(local)
getStaticProps -> process.env.NEXT_PUBLIC_TEST NEXT_PUBLIC_XXX: サーバーサイド/クライアントサイドの両方で参照可能な変数(local)
ENV -> process.env.TEST TEST: サーバーサイドのみ参照可能な変数(local)
ENV -> process.env.NEXT_PUBLIC_TEST NEXT_PUBLIC_XXX: サーバーサイド/クライアントサイドの両方で参照可能な変数(local)
✓ Compiled /favicon.ico in 391ms (297 modules)

STEP

.env実装ページにアクセスする

下記の画像のようなページが表示される