如何在Next.js中使用App Router创建并调用API？

你遇到的问题核心是API路由文件命名错误：App Router 规范中，API路由必须使用route.ts（而非page.tsx）作为文件名，page.tsx是用来渲染页面组件的，无法处理API请求。

步骤1：创建正确的API路由 #

删除app/api/user/page.tsx，新建app/api/user/route.ts，写入以下示例代码：

// app/api/user/route.ts
import { NextResponse } from 'next/server';

// 处理GET请求
export async function GET() {
  // 这里可以替换为数据库查询、外部API调用等逻辑
  const mockUsers = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
  ];
  return NextResponse.json(mockUsers);
}

// 如需处理其他请求方法，比如POST，只需导出对应函数
export async function POST(request: Request) {
  const body = await request.json();
  // 处理POST逻辑，比如创建用户
  return NextResponse.json({ success: true, data: body });
}

步骤2：在用户页面调用API #

app/user/page.tsx默认是服务器组件，若要在客户端发起请求，需添加'use client'指令；如果是服务器组件，也可以直接在组件内获取数据（无需调用自身API）。

客户端组件调用API示例 #

// app/user/page.tsx
'use client';

import { useEffect, useState } from 'react';

export default function UserPage() {
  const [users, setUsers] = useState<{id: number; name: string}[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const res = await fetch('/api/user');
        if (!res.ok) throw new Error('请求失败');
        const data = await res.json();
        setUsers(data);
      } catch (err) {
        console.error(err);
      } finally {
        setLoading(false);
      }
    };
    fetchUsers();
  }, []);

  if (loading) return <div>加载中...</div>;

  return (
    <div className="container">
      <h1>用户列表</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

服务器组件直接获取数据（更高效） #

如果无需在客户端交互，服务器组件可以直接处理数据逻辑，跳过API调用：

// app/user/page.tsx
export default async function UserPage() {
  // 直接在服务器端获取数据（比如查询数据库）
  const mockUsers = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
  ];

  return (
    <div className="container">
      <h1>用户列表</h1>
      <ul>
        {mockUsers.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

关键注意事项 #

• API路由文件必须命名为route.ts，放置在app/api/[你的路径]/目录下
• 每个route.ts可以导出多个HTTP方法处理函数（GET、POST、PUT、DELETE等）
• 服务器组件中调用自身API会增加额外网络请求，推荐直接在组件内处理数据逻辑

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