How to setup api routes urls for production?

[thanosoncode]

Summary

Hello everyone, app builds without problem locally, but when uploading to Vercel the build fails with

TypeError: Failed to parse URL from /api/products
TypeError [ERR_INVALID_URL]: Invalid URL

I added a dynamic base url like this process.env.NODE_ENV === "production" ? "" : "http://localhost:3000 but problem continues.

What the base url should be for production?

Additional information

No response

Example

No response

[icyJoseph]

This sounds like you are trying to reach to an api route from within the server. That's a bad idea, it means, even if you fixed it, you'll do an extra jump out to the internet and back to your server.

From the docs:

It can be tempting to reach for an API Route when you want to fetch data from the server, then call that API route from getServerSideProps. This is an unnecessary and inefficient approach, as it will cause an extra request to be made due to both getServerSideProps and API Routes running on the server.

Although that was written for GetServerSideProps, it applies to Server Components too.

For what is worth, another framework, Nuxt, has a special $fetch function that can skip the extra jump out to the internet and back https://nuxt.com/docs/guide/concepts/server-engine#direct-api-calls

For most developers, since fetch on the browser, uses the document baseURL, there's an expectation that it will behave "similarly" on the server.

A base URL
Null or a base URL used for resolving module specifiers. When non-null, this will either be the URL from which the script was obtained, for external scripts, or the document base URL of the containing document, for inline scripts.

However, on a Node.js environment, there's no document (and no baseURL), since a server is typically agnostic to their external identity.

The real solution is to, while on the server, just fetch whatever data you need from the source, and skip doing /api/products calls. That is, make absolute calls to the true data source!

For example, I found this on your GitHub account: https://github.com/thanosoncode/next-shop/blob/efed3362d0f60c9256a36f04b9f533df64fc86fc/app/products/page.tsx#L7-L18

const getProducts = async () => {
  const response = await fetch(`${baseUrl}/api/products`);
  if (!response.ok) {
    throw new Error("error fetching products");
  }
  return response.json();
};

const ProductsPage = async () => {
  const products = await getProducts();

  return (

That's the kind of issue I am talking about. You don't need to call api/products at all. API routes exist for your client side code, or 3rd parties that you might want to feed data to.

You should do this instead:

import { getAllProducts } from "@/lib/products"
import Container from "../components/Container";
import FooterCTA from "../components/FooterCTA";
import ProductsHeader from "./components/ProductsHeader";
import ProductList from "./components/ProductList";

const ProductsPage = async () => {
  const products = await getAllProducts();

  return (

As simple as that. The whole point of Server Side Rendering, is that you can just get the data you need, on spot, no need for extra fuzz.

[kirilkirkov]

i am using my api routes to return data from my database.. and its very good for that
the problem is when i need to build the next app in docker...

[plus7c]

appreciate you very much,I spent lots of time to hack this problem,only this hit the core point！❤

[ClydSpyd]

Hi @icyJoseph.

I'm just getting into Next 14 server comps/actions etc. and stumbled accross your post when I was having a similar issue to OP (having to append a base URL to my internal calls to my own API roots) and it really helped me out.

Your explaination really opened my eyes to the illogicallity of calling the API from my server comps when I can just grab the data right there in the comp itself. It has helped me take a step toward having a 'Next server side' mentality when it comes to structuring my app.

Thanks very much!
Dave

[nicKondratiev]

@icyJoseph Wait what? I didnt understand. So you create fetch function in the lib folder and then just use it? Or how did you get that getProducts function?

[ahmedtarekabd]

@nicKondratiev He used server actions to do the job. For example:

// @/lib/products

export const getAllProducts = () => {
  // Assuming using prisma
  return prisma.products.findMany()
}

My only question is how this solution doesn't violate the DRY principle.
This requires implementing both logic twice, in the API route and as a server action. And even if I call the server action inside the API route, server action doesn't provide as much info as the APIs in terms of status codes, messages, etc.