NEXT JS 环境变量在我的本地系统中不起作用

Question

我对 Next.js 比较陌生，由于某种原因，在我的本地系统中我无法访问环境变量。我在这里提供所有相关文件。

pages/index.js

import type {NextPage} from 'next'
import {useEffect} from "react";

const Home: NextPage = (props) => {

    useEffect(()=>{
        console.log("From Client API_URL:", process.env.API_URL)
        console.log("From Client NEXT_PUBLIC_API_URL:", process.env.NEXT_PUBLIC_API_URL)
    }, []);

    return (
        <>
            Hello World!
        </>
    )
}

export async function getServerSideProps() {
    console.log("From Client API_URL:", process.env.API_URL)
    console.log("From Client NEXT_PUBLIC_API_URL:", process.env.NEXT_PUBLIC_API_URL)
    return {
        props: {
            hello: "World!"
        }
    }
}

export default Home

.env.local文件

API_URL:https://fakestoreapi.com/
NEXT_PUBLIC_API_URL:https://fakestoreapi.com/

在浏览器中，我在控制台中得到了这个。

在服务器中，我得到了这个

> npm run dev

> dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from C:\...\next-app\.env.local
warn  - SWC minify beta enabled. https://nextjs.org/docs/messages/swc-minify-enabled
event - compiled client and server successfully in 361 ms (217 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 92 ms (220 modules)
From server API_URL: undefined
From server NEXT_PUBLIC_API_URL: undefined
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 78 ms (221 modules)

下一个js版本：12.0.7

节点js版本：14.17.1

npm 版本：8.1.4

Answer 1

您的.env.local 似乎配置不正确， 您应该在使用 = not 为键赋值时：

.env.local

API_URL=https://fakestoreapi.com/
NEXT_PUBLIC_API_URL=https://fakestoreapi.com/

Answer 2

您无法在 Next.js 中访问客户端的 .env 文件中的密钥，该文件不以 NEXT_PUBLIC_ 开头。

另外，你的文件应该是 .env 。

.env

NEXT_PUBLIC_API_URL:https://fakestoreapi.com/

pages/index.js

import type {NextPage} from 'next'
import {useEffect} from "react";

const Home: NextPage = (props) => {

    useEffect(()=>{
        console.log("From Client API_URL:", process.env.NEXT_PUBLIC_API_URL)
        console.log("From Client NEXT_PUBLIC_API_URL:", process.env.NEXT_PUBLIC_API_URL)
    }, []);

    return (
        <>
            Hello World!
        </>
    )
}

export async function getServerSideProps() {
    console.log("From Client API_URL:", process.env.NEXT_PUBLIC_API_URL)
    console.log("From Client NEXT_PUBLIC_API_URL:", process.env.NEXT_PUBLIC_API_URL)
    return {
        props: {
            hello: "World!"
        }
    }
}

导出默认主页