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: サーバーサイド/クライアントサイドの両方で参照可能な変数
環境変数(.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)