如何在Next.js中通过Google Drive API获取文档并展示在页面？

一、Google Cloud平台前置配置 #

• 登录Google Cloud Console，创建新项目，搜索「Google Drive API」并启用
• 进入「API和服务」→「凭据」，创建「OAuth 2.0 客户端ID」：
  • 应用类型选「Web应用」，添加授权重定向URI：本地开发填http://localhost:3000/api/auth/callback/google，生产环境填你的域名对应路径
• 复制生成的「客户端ID」和「客户端密钥」，粘贴到Next.js项目根目录的.env.local文件：

  GOOGLE_CLIENT_ID=你的客户端ID
  GOOGLE_CLIENT_SECRET=你的客户端密钥
  

二、用NextAuth.js快速实现OAuth登录 #

NextAuth.js是Next.js官方推荐的认证工具，不用自己写复杂的OAuth逻辑：

• 安装依赖：npm install next-auth
• 在pages/api/auth/[...nextauth].js创建配置文件：

  import NextAuth from "next-auth";
  import GoogleProvider from "next-auth/providers/google";
  
  export default NextAuth({
    providers: [
      GoogleProvider({
        clientId: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        // 申请Drive只读权限，按需调整范围
        authorization: {
          params: {
            scope: "openid email profile https://www.googleapis.com/auth/drive.readonly",
          },
        },
      }),
    ],
    // 把accessToken传递到前端，用于调用Drive API
    callbacks: {
      async jwt({ token, account }) {
        if (account) token.accessToken = account.access_token;
        return token;
      },
      async session({ session, token }) {
        session.accessToken = token.accessToken;
        return session;
      },
    },
  });
  

• 在页面中添加登录/退出按钮，用useSession判断登录状态（以pages/index.js为例）：

  import { useSession, signIn, signOut } from "next-auth/react";
  import { useState, useEffect } from "react";
  
  export default function Home() {
    const { data: session } = useSession();
    const [documents, setDocuments] = useState([]);
  
    // 未登录时显示登录按钮
    if (!session) {
      return <button onClick={() => signIn("google")}>登录Google获取文档</button>;
    }
  

三、调用Drive API获取并展示文档 #

把API调用放在Next.js后端路由，避免前端暴露敏感信息：

• 安装Google API客户端：npm install googleapis
• 创建pages/api/drive.js路由：

  import { google } from "googleapis";
  
  export default async function handler(req, res) {
    const { accessToken } = req.query;
    if (!accessToken) return res.status(401).json({ error: "未授权" });
  
    const drive = google.drive({
      version: "v3",
      auth: new google.auth.OAuth2().setCredentials({ access_token: accessToken }),
    });
  
    try {
      // 过滤获取Google Docs类型的文件，可按需修改查询条件
      const response = await drive.files.list({
        q: "mimeType='application/vnd.google-apps.document'",
        fields: "files(id, name)",
      });
      res.status(200).json(response.data.files);
    } catch (err) {
      res.status(500).json({ error: err.message });
    }
  }
  

• 在前端页面调用API并渲染文档列表（继续在pages/index.js中添加）：

  // 登录后获取文档列表
    useEffect(() => {
      fetch(`/api/drive?accessToken=${session.accessToken}`)
        .then(res => res.json())
        .then(data => setDocuments(data))
        .catch(err => console.error(err));
    }, [session]);
  
    return (
      <div>
        <p>当前登录：{session.user.email}</p>
        <button onClick={() => signOut()}>退出登录</button>
        {documents.length > 0 ? (
          <ul>
            {documents.map(doc => (
              <li key={doc.id}>
                {doc.name}
                <a 
                  href={`https://docs.google.com/document/d/${doc.id}`} 
                  target="_blank" 
                  rel="noopener noreferrer"
                  style={{ marginLeft: "8px" }}
                >
                  打开文档
                </a>
              </li>
            ))}
          </ul>
        ) : (
          <p>未找到Google文档</p>
        )}
      </div>
    );
  }
  

新手实用学习资源 #

• NextAuth.js官方文档的Google Provider配置章节：直接看官方示例，避免踩第三方教程的坑
• Google Drive API官方「快速入门」：重点掌握files.list的查询参数和返回字段，快速调整文件过滤规则
• Next.js官方API路由教程：理解后端路由的作用，学会把敏感逻辑放在后端

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