Next.js 13 App目录下的API接口能否供移动端等其他应用调用？

当然可以复用你已创建的Next.js API路由为移动端应用提供数据。App目录下的API路由本质就是标准的HTTP接口，和传统后端接口没有区别，只要移动端能发起HTTP请求，就能正常调用。

关键细节说明： #

• API路由的本质：App目录下的API路由存放在app/api/路径下，编译后会成为独立的HTTP端点，支持GET、POST等常见请求方法。移动端只需像调用普通后端接口一样，请求对应URL即可。
• 移动端调用示例：假设你有一个app/api/posts/route.js的API路由，用于返回文章列表，移动端（比如React Native、Flutter）可以这样发起请求：

// React Native 示例
async function getPosts() {
  const response = await fetch('https://你的部署域名/api/posts');
  const posts = await response.json();
  return posts;
}

• 需要注意的点：
  • 跨域配置：如果移动端和Next.js应用部署在不同域名下，必须配置CORS。可以直接在API路由中设置响应头，或者使用next-cors包简化处理：

  // app/api/posts/route.js
  export async function GET(request) {
    const posts = []; // 这里替换成你的数据逻辑
    return new Response(JSON.stringify(posts), {
      headers: {
        'Access-Control-Allow-Origin': 'https://你的移动端域名', // 生产环境指定具体域名，不要用*
        'Access-Control-Allow-Methods': 'GET, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type',
      },
    });
  }
  

  • 认证逻辑：如果API路由需要用户认证（比如JWT），移动端请求时要携带对应的凭证（比如在请求头里添加Authorization: Bearer <token>），和Web应用的认证逻辑保持一致即可。
  • 地址管理：不要在移动端硬编码API地址，建议通过环境变量管理开发/生产环境的域名，避免部署时出错。

内容的提问来源于stack exchange，提问作者Anish Kumar Singh