DEV Community

NoorBhuiyan
NoorBhuiyan

Posted on

Next.js Dynamic Routes and getServersSideProps occur error while export

Actually I am new in Next.js and face such error that I never face before! I am doing my next project where I use getServerSideProps to fetch data. And it was a dynamic route ([id].js) The problem occur when I hit the build command to deploy the tiny project on my hosting.

This is my next [id].js file –

import React from 'react' import Related from './related'; export default function id(props) { return ( <div> <div className="card"> <div className="card-title">{props.data.title}</div> <div className="card-body">{props.data.body}</div> </div> <Related sendData={props.allData}/> </div> ) } export const getServerSideProps =async (ctx)=>{ const {params} = ctx; const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`) const data = await res.json() const allRes = await fetch('https://jsonplaceholder.typicode.com/posts/') const allData = await allRes.json(); return{ props:{ data, allData } } } 
Enter fullscreen mode Exit fullscreen mode

And this is the error –

Build error occurred Error: Export encountered errors on following paths: /blog/related at C:\Users\Hridoy\Desktop\demo blog\newapp\node_modules\next\dist\export\index.js:395:19 at runMicrotasks () at processTicksAndRejections (node:internal/process/task_queues:96:5) at async Span.traceAsyncFn (C:\Users\Hridoy\Desktop\demo blog\newapp\node_modules\next\dist\trace\trace.js:79:20) at async C:\Users\Hridoy\Desktop\demo blog\newapp\node_modules\next\dist\build\index.js:1094:21 at async Span.traceAsyncFn (C:\Users\Hridoy\Desktop\demo blog\newapp\node_modules\next\dist\trace\trace.js:79:20) at async C:\Users\Hridoy\Desktop\demo blog\newapp\node_modules\next\dist\build\index.js:971:17 at async Span.traceAsyncFn (C:\Users\Hridoy\Desktop\demo blog\newapp\node_modules\next\dist\trace\trace.js:79:20) at async Object.build [as default] (C:\Users\Hridoy\Desktop\demo blog\newapp\node_modules\next\dist\build\index.js:64:29) 
Enter fullscreen mode Exit fullscreen mode

If you want to see the full code on github, this is here – GitHub Repo

And Brother, can you help me by suggesting a better process for data fetching !

Top comments (1)

Collapse
 
diegoleonardoro profile image
Leo • Edited

Were you able to fix this? I am facing a similar issue