如何在Next.js中获取函数输出并渲染到页面？

问题核心 #

你使用Next.js App Router（app目录下的page.tsx），但误用了Pages Router的load/GetServerSideProps语法，导致无法将Google Sheets的数据传递到页面替换测试文本'test'。

解决方案步骤 #

1. 调整文件结构（推荐） #

将pages目录下的google_access.tsx移动到app/lib/google_access.ts，避免Pages Router与App Router的文件结构混淆，同时符合App Router的规范。

2. 简化Google Sheets数据获取函数 #

修改app/lib/google_access.ts，直接返回数据数组而非嵌套的props结构：

import { google } from 'googleapis';

export async function getDataFromGoogleSheet({ row = 1, column = 1 } = {}) {
    try {
        const auth = await google.auth.getClient({ scopes: ['https://www.googleapis.com/auth/spreadsheets.readonly'] });
        const sheets = google.sheets({ version: 'v4', auth });
        const range = `Sheet1!A${row}:C${column}`;
        console.log("Requesting range:" + range);
        const response = await sheets.spreadsheets.values.get({
            spreadsheetId: process.env.SHEET_ID,
            range,
        });

        // 返回数据或空数组，避免报错
        return response.data.values?.[0] || [];
    } catch (error) {
        console.error('Error fetching data from Google Sheet:', error);
        throw new Error('Failed to fetch data from Google Sheet');
    }
}

3. 修改app/page.tsx获取并使用数据 #

App Router的页面组件默认是Server Component，支持直接在组件函数中用async/await获取数据，无需额外的生命周期或数据获取函数：

import { getDataFromGoogleSheet } from './lib/google_access';

// 组件改为async函数
export default async function Home() {
    // 初始化默认值，避免数据加载失败时页面空白
    let col1 = 'test';
    let col2 = null;
    let col3 = null;

    try {
        // 直接调用异步函数获取数据
        const data = await getDataFromGoogleSheet({ row: 1, column: 1 });
        col1 = data[0] || 'test';
        col2 = data[1] || null;
        col3 = data[2] || null;
    } catch (error) {
        console.error('Error fetching data:', error);
    }

    return (
        <main className="flex min-h-screen flex-col items-center justify-between p-24">
            <div className="z-10 max-w-5xl w-full items-center justify-between font-semibold text-5xl lg:flex">
                <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
                    {/* 替换测试文本为获取到的col1 */}
                    {col1}, Sand, Lime&nbsp;
                </p>
                {/* 其余原有代码保持不变 */}
            </div>

            {/* 其余原有代码保持不变 */}
        </main>
    )
}

关键注意点 #

• App Router不支持Pages Router的GetServerSideProps、getStaticProps或自定义load函数，Server Component可直接在组件内部处理异步数据获取。
• 如果需要客户端交互（如动态刷新数据），可将交互部分标记为'use client'，并使用useEffect或数据请求库实现，但静态页面初始化获取数据用Server Component更高效。
• 确保Vercel中已正确配置SHEET_ID环境变量，且Google Cloud服务账号拥有目标表格的只读权限。

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