Fetching Next.js API Route in the app directory gives 404 Not Found

Question

I am struggling with Next.js 13's app routing. It always gives me a 404 Not Found when I try to access, for example from Postmann.

I have this file structure:

And for example, one of my API files is:

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function all(req, res) {
    if (req.method !== 'GET') {
        return res.status(405).json({ error: 'Method not allowed' });
    }

    try {
        // Get all admins using Prisma
        const admins = await prisma.admin.findMany();

        return res.status(200).json(admins);
    }
    catch (error) {
        return res.status(500).json({ error: 'Failed to get admins' });
    }
}

When I send a GET localhost:3000/api/admin/all it always responds with a 404. Couldn't find where is the error.

I tried other file or folder namings. Calling from my own app, using the curl command, or using Postman. My other API routes give the same 404.

vikrant · Accepted Answer · 2024-06-28 07:04:42Z

40

An API Route should be in a file called route.js. Meaning app/api/admin/all.js should be app/api/admin/route.js, with the corresponding URL being /api/admin. Also, the functions inside should use a specific definition:

export async function GET(request) {}

GET can be replaced with POST, PUT, PATCH, etc. In your case, it would be:

// Notice from where NextResponse is imported:
import { NextResponse } from "next/server";

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

// Notice the function definition:
export async function GET(req) {
  return NextResponse.json(
    { error: "Method not allowed" },
    {
      status: 405
    }
  );
}

// Notice the function definition:
export async function POST(req) {
  try {
    // Get all admins using Prisma
    const admins = await prisma.admin.findMany();

    return NextResponse.json(admins, {
      status: 200,
    });
  } catch (error) {
    return NextResponse.json(
      { error: "Failed to get admins" },
      {
        status: 500,
      }
    );
  }
}

edited Jun 28, 2024 at 7:04

vikrant

2,2972 gold badges22 silver badges31 bronze badges

answered May 26, 2023 at 7:05

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ramiel Over a year ago

Thanks, this has been very helpful. I was following the official docs for setting up Vercel Postgres, and the example filenames and paths do not mention this "automagic" convention at all. vercel.com/docs/storage/vercel-postgres/quickstart

Mary Etokwudo · Accepted Answer · 2023-05-29 19:04:18Z

3

In addition to Youssouf's answer (which I found very helpful), if you have problems getting the content of request.body, use const body = await request.json() to get the body.

https://developer.mozilla.org/en-US/docs/Web/API/Request/json

answered May 29, 2023 at 19:04

Mary Etokwudo

313 bronze badges

Comments

Kanishka Sahu · Accepted Answer · 2025-01-15 18:11:55Z

Solved: Next.js Issue with `app` Directory in Production Build giving 404 not found but working in localhost and local bhuils

After spending almost 6 hours on the issue, I finally solved it!

If you're using Next.js >=14.0.0 with the app directory structure (e.g., app/api/test/route.ts or app/api/test/route.js), and everything works fine in localhost but not in the production build on platforms like Vercel or Amplify, here's the fix:

Problem:

Ensure that your next.config.js file does not include "output": "export".

Correct `next.config.js` Example:

/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  images: { unoptimized: true },
};

module.exports = nextConfig;

Steps:

Update your next.config.js as shown above.
Build your project again.
Deploy to your production platform.
Enjoy a hassle-free build!

Happy coding! 😊

Collectives™ on Stack Overflow

Fetching Next.js API Route in the app directory gives 404 Not Found

3 Answers 3

1 Comment

Comments

Solved: Next.js Issue with `app` Directory in Production Build giving 404 not found but working in localhost and local bhuils

Problem:

Correct `next.config.js` Example:

Steps:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Solved: Next.js Issue with app Directory in Production Build giving 404 not found but working in localhost and local bhuils

Problem:

Correct next.config.js Example:

Steps:

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Solved: Next.js Issue with `app` Directory in Production Build giving 404 not found but working in localhost and local bhuils

Correct `next.config.js` Example: