首页 > 文章 > 前端

Next.js404错误解决与配置教程

时间：2026-02-10 12:18:39 137浏览收藏

你在学习文章相关的知识吗？本文《Next.js 404 错误排查与配置方法》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

Next.js Route Handlers 404 错误排查与正确配置指南

Next.js 中 Route Handler 返回 404 的常见原因是 API 路由路径不匹配：`app/api/route.ts` 默认响应 `/api` 根路径，而客户端错误地请求了 `/app/api/ingresos`；需统一使用 `/api` 前缀，并通过子目录结构（如 `app/api/ingresos/route.ts`）实现语义化路由。

要解决 Next.js Route Handler 的 404 错误，关键在于严格遵循其文件系统路由约定：Route Handler 必须放置在 app/ 目录下的 api/ 子目录中，且每个处理函数必须位于以 route.ts（或 .js）命名的文件内，其所在目录路径即为最终暴露的 API 路径。

你当前的结构是：

app/
  api/
    route.ts   ← 此文件对应 /api（而非 /api/ingresos）

但你在表单中请求的是 /app/api/ingresos（错误前缀 + 错误路径），浏览器实际发起的是 GET http://localhost:3000/app/api/ingresos —— 这既多写了 /app（Next.js 自动挂载 app/ 下内容到根域），又将 ingresos 当作路径段却未在文件系统中体现。

✅ 正确做法如下：

调整文件结构：创建专用路由目录
将 Route Handler 移至 app/api/ingresos/route.ts（注意不是 app/api/route.ts）：
```
app/
  api/
    ingresos/
      route.ts   ← 此文件将响应 POST /api/ingresos
```

修正客户端表单 action
删除冗余的 /app 前缀，使用相对根路径：

'use client';
import { useState } from 'react';

export default function EnviarIngresos() {
  // ...state setup...

  return (
    <form action="/api/ingresos" method="POST">
      &lt;input name=&quot;fuente&quot; required /&gt;
      &lt;input name=&quot;cantidad&quot; type=&quot;number&quot; required /&gt;
      &lt;input name=&quot;fecha&quot; type=&quot;date&quot; required /&gt;
      <button type="submit">Enviar</button>
    </form>
  );
}

更新 Route Handler 逻辑（推荐增强健壮性）
app/api/ingresos/route.ts 示例：

import { NextResponse } from 'next/server';
import PocketBase from 'pocketbase';

export async function POST(request: Request) {
  try {
    const body = await request.json();
    const { fuente, cantidad, fecha } = body;

    // 验证必要字段
    if (!fuente || cantidad == null || !fecha) {
      return NextResponse.json(
        { error: 'Faltan campos requeridos: fuente, cantidad o fecha' },
        { status: 400 }
      );
    }

    const pb = new PocketBase('http://127.0.0.1:8090');
    const record = await pb.collection('ingresos').create({
      fuente,
      cantidad: Number(cantidad),
      fecha,
    });

    return NextResponse.json(
      { message: 'Ingreso creado exitosamente', id: record.id },
      { status: 201 }
    );
  } catch (err) {
    console.error('Error al crear ingreso:', err);
    return NextResponse.json(
      { error: 'Error interno del servidor' },
      { status: 500 }
    );
  }
}

⚠️ 注意事项：

Route Handler 不支持 GET /api/ingresos 自动跳转到 POST：表单 method="POST" 会触发 POST 处理器，但若手动访问 /api/ingresos（无 method）则可能 405；如需支持多种方法，显式导出 GET、PUT 等函数。
确保 PocketBase 服务正在 http://127.0.0.1:8090 运行，且 ingresos 集合存在、字段名匹配。
开发时可通过 curl -X POST http://localhost:3000/api/ingresos -H "Content-Type: application/json" -d '{"fuente":"salario","cantidad":5000,"fecha":"2024-06-01"}' 手动测试接口。
若使用 App Router 表单提交后需重定向（避免重复提交），建议改用 useFormState 或 useFormStatus + redirect()（服务端重定向），或采用 fetch + event.preventDefault() 的客户端提交方式。

总结：Next.js Route Handler 的路径 = app/ 下 api/ 子目录的相对路径（不含 .ts），务必移除 URL 中多余的 /app，并确保目录结构与期望的 API 端点完全一致。这是 404 问题最常见、也最容易修复的根本原因。

理论要掌握，实操不能落！以上关于《Next.js404错误解决与配置教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

前往漫画官网入口并下载 ➜