Next js 13 App router build error. (when i try fetch api route in server component) [duplicate]

Question

I get an error when i build next app (yarn run build)

I made new clean project i tried there. This is my route (/api/categories/route.ts)

export async function GET() {
  return new Response(JSON.stringify({ msg: "categories" }));
}

And my /page.tsx:

export default async function Home() {
  const res = await fetch("http://localhost:3000/api/categories");
  console.log(await res.json());

  return (
    <main>
      <h1>Home</h1>
    </main>
  );
}

When i run dev app (yarn run dev) i dont have any errors but when i try build i get this error:

I tried also fetch data from fake data json api that i found in web and it worked perfect. But when i try to use my api routes i have an error.

And i tried to change url like: /api/categories and http://127.0.0.1/api/categories

Is there any way I can solve this problem? Because i want to deploy my app.

But when i use prisma in project and i tried to fetch data from prisma exact in page.tsx like: prisma.categories.findMany(...), i dont have problem. But i want thet code will be clean, i have many options for findMay(). So maybe you know how i can solve this without using prisma right in page.tsx

Neoprene

Answer 1

You can’t use local api routes to fetch data in server components because api routes are not available at build time. Unfortunately, it’s a limitation in current version of Next.is that I hope will be addressed in future versions.

Labium

Then what can we do as of now? – Phenix

been stuck in this issue since 3 days, do you know what can I do to overcome this problem ? – Cavalcade

If the data is fetched on the server, why do you need the Route Handler? You can just call fetch directly from the server component and your URL will not be exposed on the client. – Maidenhead

You saved my day. Thank you – Clareta

Answer 2

You actually don't need to call local api from a server component. The purpose of a server component is to be rendered on the server and then served to end user on page request. So you can directly read data from any source of database safely inside a server component.

Featherbedding

Answer 3

For now as of NextJs 13, what we can do is to make an export function with the server logic(e.g. to fetch data from database) in a separate file and use that function in both the api route as well as the page.js or whichever place (which is being rendered on server).

This way it will prevent the error while building.

The reason:

No API routes are served while doing npm run build

This will probably get fixed in a future version or someday.

Edythedythe

Answer 4

I faced the same issue and stumbled upon a simple workaround that might help you out too.

The problem arises because fetch calls need a local API route which isn't available during the build process. So, I figured, why not make it available then?

Here's what worked for me:

1. Delete the .next folder to clear the cache.

2. Run npm run dev -- -p (YOUR PORT) and enter the same port your local API uses (e.g., 3000).

3. Once the dev server starts, open a new terminal window and run npm run build.

4. After the build is complete (because the build will use the dev server for local API routes fetch calls), close the dev server we don't need it anymore.

5. Finally, run npm run start -- -p (YOUR PORT) and enter the same port your local API uses (e.g., 3000).

That's it! Hopefully, this helps simplify things for everyone.

Update with better & easier option

1. clone your project dir and start the dev server in that clone dir and in the original dir run build

Sackbut