Vercel构建网站时出现‘Route has an invalid export’错误求助

问题核心原因 #

1. API路由返回格式不符合Next.js规范：App Router的API路由必须返回NextResponse实例，直接返回普通对象会触发构建校验错误。
2. 前端错误调用API函数：直接导入API路由中的GET函数调用不符合Next.js设计逻辑，应通过HTTP请求访问API端点。
3. API错误处理缺失：catch块未返回任何响应，会导致请求无结果且无法被正确捕获。
4. getServerSession配置缺失：生产环境中调用getServerSession需要传入auth配置，否则无法正确获取会话信息。

修复API路由代码 #

修改app/api/auth/account/route.js：

import { sql } from '@vercel/postgres';
import { getServerSession } from 'next-auth';
import { authOptions } from '../[...nextauth]/route'; // 引入你的NextAuth配置文件
import { NextResponse } from 'next/server';

export async function GET() {
    try {
        const session = await getServerSession(authOptions);
        
        if (!session?.user?.email) {
            return NextResponse.json({ error: '未授权访问' }, { status: 401 });
        }

        const _response = await sql`
            SELECT * FROM users
            WHERE email=${session.user.email}
        `;

        const data = _response.rows[0];
        if (!data) {
            return NextResponse.json({ error: '用户不存在' }, { status: 404 });
        }

        // 注意：不要返回password等敏感字段
        return NextResponse.json({
            id: data.id,
            email: data.email,
            unit: data.unit,
            name: data.name,
            language: data.language,
            country: data.country
        });

    } catch (e) {
        console.error(e);
        return NextResponse.json({ error: '服务器内部错误' }, { status: 500 });
    }
}

修复前端组件代码 #

修改AccountDetails组件：

import { Card, CardHeader, Form, Input } from "@nextui-org/react"
import { getServerSession } from 'next-auth';
import { authOptions } from '../api/auth/[...nextauth]/route';

export default async function AccountDetails() {
    const session = await getServerSession(authOptions);
    
    if (!session) {
        return <div>请先登录</div>;
    }

    // 通过fetch请求API端点
    const res = await fetch('/api/auth/account', { cache: 'no-store' });
    if (!res.ok) {
        return <div>获取用户信息失败</div>;
    }
    const userData = await res.json();

    return (
        <Form className="flex flex-row" validationBehavior="native">
            <div className="px-8">
                <label className="block mt-4 mb-2 text-left text-gray-700 font-bold">Language</label>
                <Input
                    errorMessage="Please enter a valid language"
                    name="language"
                    className="block w-full mb-6 px py border border-gray-300 rounded-xl focus:outline-none focus:border-green-400"
                    placeholder={userData?.language}
                    type="text" // 修正无效的input类型
                />
            </div>
        </Form>
    );
}

额外注意事项 #

• 敏感数据防护：API返回中务必移除password等敏感字段，避免泄露用户隐私。
• Input类型修正：前端Input的type="language"为无效值，改为通用的type="text"。
• 缓存策略：fetch时添加cache: 'no-store'确保每次请求都获取最新用户数据。

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