Next.js根路径API端点配置：能否重写根路径指向API端点？

首先假设你的共享API端点实际路径为/api/shared（对应文件根据Next.js路由模式不同，为pages/api/shared.js或app/api/shared/route.js），下面分两种场景给出实现方式：

场景1：根路径所有请求都指向API端点（替换原React页面） #

通过next.config.js的重写规则实现，修改项目根目录下的next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      // 根路径重写至共享API
      {
        source: '/',
        destination: '/api/shared',
      },
      // 其他所有路径重写至同一API
      {
        source: '/:path*',
        destination: '/api/shared',
      },
    ];
  },
};

module.exports = nextConfig;

配置完成后重启开发服务，所有指向根路径/以及/foo、/bar等任意路径的请求，都会被转发到/api/shared处理。

场景2：根路径保留React页面，仅API请求转向API端点 #

如果需要浏览器访问根路径时显示原React页面，仅后端API请求（如POST、携带Accept: application/json头的请求）转向API，可使用Next.js Middleware实现：

1. 在项目根目录创建middleware.js（或middleware.ts）文件：

import { NextResponse } from 'next/server';

export function middleware(request) {
  const url = request.nextUrl;

  // 处理根路径请求
  if (url.pathname === '/') {
    // 根据请求特征判断是否转向API，可按需调整条件
    const isApiRequest = 
      request.method !== 'GET' || 
      request.headers.get('accept')?.includes('application/json');

    if (isApiRequest) {
      return NextResponse.rewrite(new URL('/api/shared', request.url));
    }
    // 非API请求继续返回React页面
    return NextResponse.next();
  }

  // 其他路径统一转向共享API（排除API自身路径避免循环）
  if (url.pathname !== '/api/shared') {
    return NextResponse.rewrite(new URL('/api/shared', request.url));
  }

  return NextResponse.next();
}

// 指定匹配的路径范围
export const config = {
  matcher: ['/', '/:path*'],
};

2. 编写共享API的处理逻辑：

• 若使用Pages Router，创建pages/api/shared.js：

export default function handler(req, res) {
  switch (req.method) {
    case 'GET':
      res.status(200).json({ message: '共享API响应' });
      break;
    case 'POST':
      res.status(200).json({ received: req.body });
      break;
    default:
      res.status(405).json({ message: '不支持的请求方法' });
  }
}

• 若使用App Router，创建app/api/shared/route.js：

export async function GET(request) {
  return new Response(JSON.stringify({ message: '共享API响应' }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

export async function POST(request) {
  const body = await request.json();
  return new Response(JSON.stringify({ received: body }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

// 可添加其他请求方法的处理逻辑

配置完成后重启服务，即可实现需求：浏览器访问根路径显示原页面，API请求（如POST到/）转向共享API，其他任意路径也统一指向该API。

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