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 className="card">
        <div className="card-title">{}</div>
        <div className="card-body">{}</div>
    <Related sendData={props.allData}/>

export const getServerSideProps =async (ctx)=>{
    const {params} = ctx;
    const res = await fetch(`${}`)
    const data = await res.json()

    const allRes = await fetch('')
    const allData = await allRes.json();
         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 [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 !

Make sure the data is ready before mapping it. You should be able to just use optional chaining for the map inside related.js


Not really sure what “better” means?

1 Like

Thank you brother. I learned something new from you. Take love. But this is still not working. what to do?

Are you getting the same error, or a new error, or even no error and getting some other behavior?

Provide those details, and what related.js looks like.

Also, the repo doesn’t have the code posted above anymore? :thinking:

sorry brother. here is the updated condtion of the app - github repo

it still gives me error. if possible can you give me 5 minute time on google meet brother?

import React, { Component } from 'react';
import axios from 'axios';
import Link from 'next/link';
import { Col, Row, Card } from 'react-bootstrap';

class Index extends Component {
	constructor(props) {

		this.state = {
			data: [],

	componentDidMount() {
			.then(x => {
				this.setState({ data: });

	render() {
		let data =;
		let allData = => {
			return (
				<Col key={}>
					<Link href={'./blog/' +}>
						<Card className="card">
							<h4 className="card-title">{x.title}</h4>
							<div className="card-body">{x.body}</div>
							<button>Check all</button>
		return (
				<Row className="row">{allData}</Row>

export default Index;

It looks like the current implementation no longer uses getServerSideProps. Instead it loads directly on the client-side via an axios call.

Yes. and it does not make any issue on this app. The problem happens when I move to any dynamic route like [id].js

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.