API route exists but fetch request returns 404 error

Other Questions API
1

I’m having trouble with my Next.js app. I’m trying to send data from a form to my API route using fetch. The route is there, but I keep getting a 404 error. Here’s what I’ve got:

My main page has a form with inputs for chapter, verse, and content. When I submit, it should create a new record in my Postgres DB using Prisma. But it’s not working.

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const res = await fetch('/api/newEntry', {
      method: 'POST',
      body: JSON.stringify({ chapter: chapterInput, verse: verseInput, content: contentInput }),
    });
    if (!res.ok) throw new Error('Failed to create entry');
  } catch (err) {
    console.error(err);
  }
};

My API route looks like this:

import { prisma } from '@/lib/prismaClient';

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

  try {
    const data = JSON.parse(req.body);
    const newEntry = await prisma.entries.create({ data });
    res.status(201).json(newEntry);
  } catch (err) {
    res.status(500).json({ message: 'Error creating entry' });
  }
}

I’ve double-checked my file structure and the API route is in the right place. Any ideas why I’m getting a 404?

2

I’ve run into this issue before, and it can be frustrating. One thing that’s not been mentioned yet is to check if you’re using a custom server setup. If you are, make sure your server.js file is properly configured to handle API routes.

Another potential culprit could be your build process. Sometimes, the API routes don’t get built correctly. Try running ‘npm run build’ followed by ‘npm start’ instead of ‘npm run dev’ to see if that resolves the issue.

Also, it’s worth checking if you have any middleware that might be interfering with your API routes. I once spent hours debugging a similar issue only to find out it was a poorly configured middleware catching all requests.

Lastly, if you’re using VS Code, the ‘REST Client’ extension can be really helpful for testing API routes directly from your editor. It might give you more insight into what’s going wrong.

3

hey mate, have u tried clearing ur browser cache? sometimes that can mess with api routes. also, double-check ur fetch url. maybe try using the full url like ‘http://localhost:3000/api/newEntry’ instead of just ‘/api/newEntry’.

if that doesn’t work, try console.logging in ur api handler to see if it’s even getting hit. Good luck!

4

Have you verified that your API route file is named correctly? It should be named ‘newEntry.js’ (or .ts if using TypeScript) and located in the ‘/pages/api/’ directory. Next.js uses file-based routing, so the filename and location are crucial.

Also, check your Next.js configuration. Make sure you haven’t accidentally disabled API routes in your next.config.js file.

If those check out, try logging the request in your API handler to see if it’s even reaching that point. You could add a console.log at the start of your handler function.

Lastly, double-check your fetch URL. If you’re using a custom server or running on a non-standard port, you might need to include the full URL (e.g., ‘http://localhost:3000/api/newEntry’) instead of just the path.

If none of these solve it, consider using the Network tab in your browser’s dev tools to inspect the actual request being sent. This can provide more details about why you’re getting a 404.