Having just started with Next.js and Nest.js, I'm struggling to identify the issue at hand.
In my backend nest.js app, I have a JSON API running on
http://localhost:3081/v1/transactionshttps://i.sstatic.net/HMrKb.png
Below is my index.tsx file within the Next.js frontend application:
import type { GetStaticProps, NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import { GetTransactionsResults, Transaction } from "../transactions.types";
const Home: NextPage<{ transactions: Transaction[] }> = ( { transactions }) => {
return (
<div className={styles.container}>
<main className={styles.main}>
<Image src={"/logo.png"} width={120} height={32} />
{transactions.map((transaction) => {
return <li key={ transaction.id }>{ transaction.asset }</li>
})}
</main>
</div>
);
};
export const getStaticProps: GetStaticProps = async (context) => {
const res = await fetch("http://localhost:3081/v1/transactions");
const { results }: GetTransactionsResults = await res.json();
return {
props: {
transactions: results,
},
};
};
export default Home;
And here is the interface in transaction.type.ts:
export interface GetTransactionsResults {
info: Info;
results: Transaction[];
}
export interface Info {
count: number;
page: number;
next: string;
prev: null;
}
export enum TransactionNature {
Deposit = "Deposit",
Withdraw = "Withdraw",
Rewards = "Rewards",
Interest = "Interest",
}
export interface Transaction {
id: string
nature: {
code: TransactionNature
}
amount: number
asset: string
user: {
id: string
}
}
Upon attempting to load the frontend, I encounter the following error message:
Server Error
Error: Error serializing `.transactions` returned from `getStaticProps` in "/".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.
It appears to be receiving an empty response from the backend app...
I've also tested fetching data from another web API like this one: and it works fine.
There seems to be something missing here, apologies if this is a basic question but I am very new to this.