Nextjs - getStaticProps: Ne tombez pas dans le piège

Depuis quelques semaines je travaille sur un petit projet avec Nextjs.

Après avoir finit avec les interfaces j'ai écrit une API pour permettre aux utilisateurs de rajouter des apps. Mon erreur lorsque j'eu fini d’écrire mon API est d'avoir comme à mon habitude utiliser fetch au niveau de getStaticProps pour récupérer les données.

Tout marchait bien en développement jusqu’à ce que je décide de mettre en ligne la nouvelle version de l’application et que le build échoue avec ce message:

Error occurred prerendering page "/products". Read more: https://nextjs.org/docs/messages/prerender-error
FetchError: invalid json response body at https://kamerapps.vercel.app/api/products reason: Unexpected token < in JSON at position 0
    at /vercel/path0/node_modules/node-fetch/lib/index.js:272:32
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async getStaticProps (/vercel/path0/.next/server/pages/products.js:76:24)
    at async renderToHTML (/vercel/path0/node_modules/next/dist/server/render.js:387:20)
    at async /vercel/path0/node_modules/next/dist/export/worker.js:273:36
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:74:20)

getStaticProps est la méthode préconisée lorsque vous voulez générer un site statique avec Nextjs. Elle s’execute au build de votre projet et récupère alors les données que vous lui demandez et les sauvegarde dans des fichiers .json et les deux façons de l’utiliser sont les suivantes:

• Récupérer depuis une API externe

• Directement interroger la base de données

Si Nextjs vous permet d’écrire directement votre API rendant de ce fait votre application fullstack, la manière dont vous récupérerez vos données est très importante. Faites attention aux types de rendu que vous voulez (statique/ côté client/ côté serveur) mais aussi aux méthodes que vous allez utiliser.