如何在ZEIT Now上搭建API驱动的服务端渲染Next.js应用

我来帮你梳理下如何实现你想要的功能——在ZEIT Now上搭建支持服务端渲染（SSR）的Next.js应用，搭配无服务器API，同时对接Google BigQuery数据源，还有顺畅的本地开发流程：

一、先修正你的Now配置文件，开启SSR #

你当前的配置里把所有非API路由硬指向/index.html，这是静态站点的做法，Next.js的SSR不需要这么做，@now/next构建器会自动处理页面的SSR逻辑。修改你的now.json如下：

{
  "version": 2,
  "public": false,
  "builds": [
    {
      "src": "next.config.js",
      "use": "@now/next"
    },
    {
      "src": "server/server.js",
      "use": "@now/node"
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/server/server.js"
    },
    // 删掉原来指向index.html的路由，让Next.js自动处理所有页面路由
    {
      "src": "/(.*)",
      "dest": "/$1"
    }
  ]
}

简单说：@now/next会自动识别你pages/目录下的文件，帮你处理SSR、静态生成等渲染方式，完全不需要手动指定index.html。API路由的配置保留，确保所有/api开头的请求都转到你的Node.js无服务器函数。

二、实现SSR页面从BigQuery取数据 #

Next.js 9.3+推荐用getServerSideProps来实现SSR数据获取，这个函数会在每次请求时在服务端运行，把数据传给页面组件。举个例子：

在pages/目录下创建dashboard.js页面：

import React from 'react';

export default function Dashboard({ bigqueryData }) {
  return (
    <div>
      <h1>BigQuery数据展示</h1>
      <ul>
        {bigqueryData.map(item => (
          <li key={item.id}>{item.title}: {item.count}</li>
        ))}
      </ul>
    </div>
  );
}

// 服务端执行的函数，专门用来获取SSR数据
export async function getServerSideProps() {
  // 引入Google BigQuery客户端
  const { BigQuery } = require('@google-cloud/bigquery');
  
  // 用环境变量配置认证，不要硬写密钥！
  const bigquery = new BigQuery({
    credentials: JSON.parse(process.env.BIGQUERY_SERVICE_ACCOUNT),
    projectId: process.env.BIGQUERY_PROJECT_ID
  });

  // 写你的BigQuery查询语句
  const query = `SELECT id, title, count FROM \`your-project.dataset.table\` LIMIT 10`;
  const [rows] = await bigquery.query(query);

  // 返回的数据会作为props传给页面组件
  return {
    props: {
      bigqueryData: rows
    }
  };
}

环境变量配置小贴士： #

• 本地开发：在项目根目录创建.env.local文件，把BigQuery的认证信息和项目ID放进去，Next.js会自动加载：

  BIGQUERY_SERVICE_ACCOUNT='{"type": "service_account", "private_key": "...", "client_email": "..."}'
  BIGQUERY_PROJECT_ID="your-project-id"
  

• 部署到Now：在Now控制台的项目设置里添加这些环境变量，Now会自动把它们注入到部署环境中，安全又方便。

三、本地开发工作流优化 #

用now dev就对了！这个命令是Now官方的本地开发工具，能完美模拟生产环境的路由和构建逻辑，直接在本地运行你的Next.js应用和无服务器API：

1. 先安装Now CLI：npm install -g now
2. 在项目根目录运行：now dev
3. 访问http://localhost:3000就能看到你的SSR应用，修改代码会自动热重载，API路由也能正常测试。

当然你也可以用Next.js自带的next dev，但now dev能更准确地模拟生产环境的路由规则，避免本地和部署环境出现差异。

四、无服务器API的小提醒 #

你的server/server.js要符合Now Node.js无服务器函数的格式，比如：

module.exports = (req, res) => {
  // 这里可以写API逻辑，比如从BigQuery取数据、处理请求等
  if (req.method === 'GET') {
    res.status(200).json({ message: 'API请求成功！' });
  } else {
    res.status(405).json({ message: '只支持GET请求' });
  }
};

确保你的API函数能正确处理不同的HTTP方法，用now dev测试时可以直接访问http://localhost:3000/api/xxx验证。

常见坑点排查 #

• 如果SSR页面拿不到数据：检查BigQuery的认证信息是否正确，环境变量有没有被正确加载，查询语句有没有语法错误（注意BigQuery的表名格式是项目.数据集.表，要用反引号包裹）。
• 路由失效：确认pages/目录下的文件命名正确，Next.js的路由是基于文件结构的，比如pages/about.js对应/about路由。
• 部署失败：查看Now的部署日志，检查package.json里的依赖是否齐全（比如@google-cloud/bigquery要作为依赖安装），构建器是否配置正确。

内容的提问来源于stack exchange，提问作者Lokasa Mawati