Next.js - 使用 BigQuery 客户端库出现错误：找不到模块：无法解析“child_process”

Question

我正在尝试从 next.js 项目中查询 bigQuery 数据集。

我已安装 @google-cloud/bigquery 并按照 here 中的步骤操作 我也尝试过来自 this link 的 next.js 相关解决方案，但仍然出现以下错误。

看起来需要为此配置 next.config.js 以允许此 api 调用。我不确定需要更改什么。

有人可以帮我解决这个问题吗？
这是我的代码：

const { BigQuery } = require("@google-cloud/bigquery");
const bigquery = new BigQuery();

  useEffect(() => {
    async function queryBigQuery() {
      const query = `
      SELECT fieldname
      FROM \`db.dataset.tablename\` WHERE columnname = 50 
      LIMIT 10`;

      const options = {
        query: query,
      };

      // Run the query
      const [rows] = await bigquery.query(options);

      console.log("Query Results:");
      rows.forEach((row) => {
        const url = row["url"];
        const viewCount = row["view_count"];
        console.log(`url: ${url}, ${viewCount} views`);
      });
    }

    queryBigQuery();
  }, []);

**wait  - compiling...
error - ./node_modules/google-auth-library/build/src/auth/googleauth.js:17:0
Module not found: Can't resolve 'child_process'**

更新：

我可以在客户端加载我认为的 bigQuery 库，但它给了我新的错误。 这是我最新的 next.config.js 文件

module.exports = {
  webpack: (config, { isServer, webpack }) => {
    if (!isServer) {
      config.node = {
        dgram: "empty",
        fs: "empty",
        net: "empty",
        tls: "empty",
        child_process: "empty",
      };
    }

    return config;
  },
  env: {
   project variables. 
};

新错误：

Answer 1

@google-cloud/bigquery 旨在在 Node.js 环境中运行，它不能在浏览器中运行。

您需要将代码移动到 data fetching method 之类的 getStaticProps/getServerSideProps 或 API route，因为它们都在服务器端运行。

这是一个使用 API 路由的示例，因为它似乎最适合您的用例。

// pages/api/bigquery

const { BigQuery } = require("@google-cloud/bigquery");
const bigquery = new BigQuery();

export default function handler(req, res) {
    const query = `
        SELECT fieldname
        FROM \`db.dataset.tablename\` WHERE columnname = 50 
        LIMIT 10
    `;

    const options = {
        query: query,
    };

    // Run your query/logic here

    res.json(data); // Return your JSON data after logic has been applied
}

然后，在您的 React 组件的 useEffect 中：

const queryBigQuery = async () => {
    const res = await fetch('api/bigquery');
    const data = await res.json(); // Returns JSON data from API route
    console.log(data);
}

useEffect(() => {
    queryBigQuery();
}, []);