TypeError: 在 nextjs 中使用环境变量时只支持绝对 URL答案

【问题标题】：TypeError: Only absolute URLs are supported when using environmental variable in nextjsTypeError: 在 nextjs 中使用环境变量时只支持绝对 URL
【发布时间】：2023-02-22 00:33:09
【问题描述】：

正如标题所暗示的那样，我在使用环境变量时出错，但是当我对 URL 进行硬编码时，它工作正常。

const URL1 = process.env.GRAPHQL_CONTENT_API
const URL2 = 'https://api-eu-west-2.hygraph.com/.................'
常量 graphcms = new GraphQLClient(URL)

如果我使用“ URL2 ”，一切正常，但如果我使用“ URL1 ”，我得到一个错误：
export async function getAllPosts() {
  const query = gql`
    query{
      posts {
        createdAt
        date
        content {
          markdown
          text
        }
      }
    }
  `
  const results = await graphcms.request(query)
  return results.posts
}

export async function getStaticProps() {
  const posts = (await getAllPosts()) || "No posts!"

  return {
    props: { posts },
  };
}

【问题讨论】：

你确定环境变量存在吗？
我如何检查它是否存在？
console.log 是最简单的
我有“ .env.local ”文件，我试图将它移动到不同的目录中以查看是否有帮助，但什么也没做。
我现在试过了，它给了我未定义的。我会进一步调查并更新帖子。谢谢！

标签： javascript variables next.js graphql environment-variables

【解决方案1】：

您必须在 nextjs 中的任何环境变量之前使用 NEXT_PUBLIC_。

https://stackoverflow.com/a/68136083/18317672 这是解决方案。

【讨论】：