Next.js13.2.1实验性App目录下Apollo Server集成404问题解决

核心问题定位 #

你遇到的404不是因为@as-integrations/next不支持新版Next.js，而是App Router的API路由规则和Pages Router完全不同——你把文件放在了app/api/graphql.ts，但App Router要求API路由必须放在app/api/[路由名]/route.ts的结构下，直接用graphql.ts不会被识别。

具体解决方案 #

1. 升级依赖（确保支持App Router）

先确认@as-integrations/next版本≥3.0.0，这个版本开始正式支持Next.js App Router。执行升级命令：

npm install @as-integrations/next@latest @apollo/server graphql

2. 按照App Router规则创建路由文件

删除原app/api/graphql.ts，新建路径app/api/graphql/route.ts，写入以下配置：

import { ApolloServer } from '@apollo/server';
import { startServerAndCreateNextHandler } from '@as-integrations/next';
import { gql } from 'graphql-tag';

// 定义GraphQL Schema
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// 定义解析器
const resolvers = {
  Query: {
    hello: () => 'Hello from Apollo Server in App Router!',
  },
};

// 初始化Apollo Server
const server = new ApolloServer({
  typeDefs,
  resolvers,
});

// 创建Next.js处理函数
export default startServerAndCreateNextHandler(server);

3. 常见排查点

• 检查Next.js版本：必须≥13.2，App Router的API路由在这个版本才稳定可用。
• 重启开发服务器：修改依赖或路由结构后，一定要重启next dev，避免缓存导致的路由不生效。
• 检查自定义路由配置：如果next.config.js里有rewrites或redirects规则，确认没有拦截/api/graphql路径。

4. 兼容Pages Router的备选方案

如果你想沿用官方指南的写法，直接在pages/api/graphql.ts创建文件（无需改动App目录下的内容），Next.js会自动识别这个Pages Router的API路由，即使你启用了App Router，两者可以共存。

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