As what I understand based on docs of next js with app router, I create a error.tsx page inside my app folder (app/[lang]/error.tsx) — the file consist the code that are shown in docs. also I have some api calls (fetch) inside a file in this route: src/api/categories/index.ts (because I want these apis call in server (SSG)) but if my api doesn’t resolve it shows me default error of next js like below:
but I don’t want this I need to show an error page for that. here is also my error page code:
"use client";
export default function Error({
error,
reset,
}: {
error: Error;
reset: () => void;
}) {
console.log(error);
return (
<div>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</div>
);
}
I also tried to copy this file next to the index.ts (apis file) because as the docs says :
Next.js will forward the resulting Error object to the nearest
error.js file as the error prop
but dosn’t work. how can I do that?