环境变量未注入到next.js中

3ks5zfa0  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(125)
import dotenv from 'dotenv';
dotenv.config();

export const getGoogleUrl = (from: string) => {
  const clientId: string = process.env.GOOGLE_CLIENT_ID!;
  const callback: string = 'http://localhost:3000/api/auth/callback/google';
  console.log(clientId)
  console.log(callback)

  const rootUrl = `https://accounts.google.com/o/oauth2/v2/auth`;

  const options = {
    client_id: clientId as string,
    redirect_uri: callback as string,
    access_type: 'offline',
    response_type: 'code',
    prompt: 'consent',
    scope: [
      'https://www.googleapis.com/auth/userinfo.profile',
      'https://www.googleapis.com/auth/userinfo.email'
    ].join(' '),
    state: from
  };

  const qs = new URLSearchParams(options);

  return `${rootUrl}?${qs.toString()}`;
};

字符串
我使用nextJs与应用程序路由器,我试图设置Oauth然而,我遇到了这个问题,其中进程.env变量没有被正确注册。在上面的例子中,CLIENTID和CALLBACK都应该是环境变量。
console.log正确地记录了这两个环境变量,但是,它实际上并没有注册,除非我直接粘贴字符串,就像回调一样。
我也试着直接粘贴clientId,它起作用了。

hs1rzwqc

hs1rzwqc1#

对于NextJS,在定义env时,知道你是在客户端/服务器端渲染是很重要的。

**如果您是客户端。**请尝试将env的名称更改为前缀“NEXT_PUBLIC_[您的env名称]”。在您的情况下,它应该是NEXT_PUBLIC_GOOGLE_CLIENT_ID="1234"
如果您是服务器端,则为其他情况。GOOGLE_CLIENT_ID="1234"应该可以工作。

如果你不知道你在哪一边。对于NextJSv 13,默认情况下它是服务端的,除非您在 *.tsx的顶部使用“use client”一词,否则您将处于客户端渲染。对于以前的版本,默认情况下是客户端,如果您在服务端,您将在 *.tsx文件中看到getStaticProps
查看更多:https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables

相关问题