NextJS 14 Returning 404 on any API Call

I am working on deploying my NextJS app. The app works locally but then fails when I deploy it - familiar story I know. The app has only one route in the app router, page.tsx. The app uses client on that page and then has all of the API calls in a separate file that uses server. When someone fills out the form, the form calls the async functions in the API calls. When I deploy to Vercel, the queries will work fine but all of my mutations return a 500 error. When I deploy to Netlify, all API calls (both the queries and the mutations will return 404 errors. The 500 errors indicate that I’m using relative URLs and only absolute URLs are supported. I understand that when I have multiple routes, but something is happening when sending a POST request from the ‘/’ route - it’s trying to access a relative route but I don’t know where.

URL for app: https://crud-with-forms.netlify.app
Error in console from Chrome:

Hello there! I’m curious as to what the build logs show(if anything)? I think the problem stems from what sounds like your functions not being deployed. If they are not showing up in your functions logs, they are not there.

Netlify App should take you the function logs there. Alternatively if you have a Github repo to share, that might give some clues as to what could be going on.

Andrew, thank you for your help. I know that this is a problem on my end - I’m trying to get better at server requests in the new app router with Next. I tried their discord and nothing yet. I checked the function logs in Netlify and nothing is showing up on the function logs. My repo is public on github: GitHub - ryanjames1729/crud-with-forms.

How I have it set up is when the user clicks submit on a form, it calls an async function that lives on another file in the app. That async function then does the GraphQL query or mutation and then returns the response back to the app/page.tsx to render either data that was searched for or a success message. I think the behavior of the app is sending a POST request from the ‘/’ route and then trying to reroute with a dynamic route, but I don’t know how to prevent the dynamic route behavior.

Here’s an example of the function call within my form:
image

And that calls the function on app/components/Results.tsx.

Thank you for any tips/help you can provide.

Hmm, I may be off base here to be honest, but I’m wondering if creating a netlify.toml and adding a redirect would resolve the 404s.

Something like this maybe?

[build]
  command = "npm run build"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
  force = true

I haven’t had the chance to test the code with GraphQL yet, so the above is just a guess truthfully.

The error is likely coming from here: crud-with-forms/app/actions.tsx at main · ryanjames1729/crud-with-forms (github.com)

Explanation:

You’re posting to the home page itself instead of any kind of API server:

image

This led me to think you’ve configured the API URL incorrectly. So I checked your repo and the URL is coming from those lines, especially line 8 sets it to || '' (basicaly an empty string, so it goes to your homepage). Client-side environment variables mst be prefixed with NEXT_PUBLIC_: Configuring: Environment Variables | Next.js (nextjs.org)

With that being said, Next.js 14 would need you to upgrade to Next.js Runtimve v5 (currently in RC): @netlify/plugin-nextjs - npm (npmjs.com). Version 4 of the Runtime would give you ther issues.

1 Like