Next.js Dynamic Routes and getServersSideProps occur error while export

JavaScript
1

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 !

2

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

allData?.map()

Not really sure what “better” means?

3

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

4

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:

5

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?

7 
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) {
		super(props);

		this.state = {
			data: [],
		};
	}

	componentDidMount() {
		axios
			.get('https://jsonplaceholder.typicode.com/posts')
			.then(x => {
				this.setState({ data: x.data });
			})
			.catch();
	}

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

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.

9

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