Unexpected token '<', "<!DOCTYPE "... is not valid JSON

[Eng1Mahmoud]

hi everyone i use api route , i use nextjs 14 , my project work fine in local , but on vercel this error occur on build , in local I run npm run build , and no problem , but on vercel this error occur >>

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error -- 18:16:40.958 |   18:16:40.958 | SyntaxError: Unexpected token '<', ") 18:16:40.959 | at parseJSONFromBytes (node:internal/deps/undici/undici:5584:19) 18:16:40.959 | at successSteps (node:internal/deps/undici/undici:5555:27) 18:16:40.959 | at fullyReadBody (node:internal/deps/undici/undici:1665:9) 18:16:40.959 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 18:16:40.960 | at async specConsumeBody (node:internal/deps/undici/undici:5564:7) 18:16:40.960 | at async v (/vercel/path0/.next/server/app/(main-layout)/page.js:1:13076) 18:16:40.992 | ✓ Generating static pages (9/9) 18:16:41.037 |   18:16:41.037 | > Export encountered errors on following paths: 18:16:41.037 | /(main-layout)/page: / 18:16:41.084 | Error: Command "npm run build" exited with 1 , can you help me

[icyJoseph]

Hi,

I see that this component, https://github.com/Eng1Mahmoud/e-commerce-next-app/blob/master/src/components/Home/categories-section/CategoriesSection.tsx, is trying to pull data from ${process.env.NEXT_PUBLIC_API_URL}/products/${categorie}/${1}/${10}, which I assume is your own server? Namely this endpoint.

That's already cause for issues. Locally it works because of a quirk with fetch cache. You can read more about this issue here: #55702

To convince yourself, remove .next first, and then build. You should see the issue on your machine as well.

Now the root problem is that you are trying to fetch data from your own server, during Server Rendering. That's not correct, and it causes broken builds, and at best, unnecessary roundtrips. The community discord has written about this here, https://nextjs-faq.com/fetch-api-in-rsc ~ In other words, instead of reaching for your server to then reach to a 3rd party (your MongoDB), just reach for the 3rd party directly, because you are already on the server.

The right thing to do is to connect to your DB in, https://github.com/Eng1Mahmoud/e-commerce-next-app/blob/master/src/components/Home/categories-section/CategoriesSection.tsx, and fetch the data right there. That's the whole point of server rendering, only now you can do it as you render, and without sending the JavaScript to the client, only the resulting HTML.

A couple of other notes, here, https://github.com/Eng1Mahmoud/e-commerce-next-app/blob/master/src/app/api/products/%5B...params%5D/route.ts

• use server is not necessary

In App Router, we use React Server Components, where everything is server bundled by default, and only the modules with use client are ever packaged to be sent to the client (browser). use server is an escape hatch to allow the client to call server side code, from the client, without ever sharing the actual code with the client. Route handlers are server side code by default.

To prevent issues by accidentally sending code to the client, one can install server-only, and import 'server-only' at top of a file that we would want to protect. It is better to left the default behavior do its thing if you don't understand this bit.

• GET handler caching

I see you don't use the req object, you just declare it in the function parameters, and that might opt-in the function into build time caching: https://nextjs.org/docs/app/building-your-application/routing/route-handlers#opting-out-of-caching, read about how to opt-out in case it does. You can see what happens after you build:

○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML (uses getStaticProps)
λ  (Dynamic)  server-rendered on demand using Node.js

[Eng1Mahmoud]

@icyJoseph thanks for your reply, your reply is clear, I used client component then the problem fixed , and I will read more about these points you mentioned it. Is there any additional advise, I am a beginner at using Nextjs

[icyJoseph]

Hi,

I think the next-learn page can be good to take a look at: https://nextjs.org/learn/dashboard-app