Next.js Dynamic Routes and getServersSideProps occur error while export

NoorBhuiyan — Wed, 20 Jul 2022 11:45:19 +0000

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
        }
    }
}

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)

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 !

DEV Community: NoorBhuiyan

Next.js Dynamic Routes and getServersSideProps occur error while export