Error fetching json file into Next.js from local Nest.js app

user_14541104 0
Viewed 59

I'm really new with Next.js and Nest.js and I can't figure out what's going wrong here.

I have a backend nest.js app serving a json api on http://localhost:3081/v1/transactions. If I try to do a GET request from postman all works fine.

enter image description here

This is my index.tsx in the next.js frontend app:

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

So if I try to load the frontend I get this 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 seems like an empty response from the backend app...

I also tried to fetch data from another web api like this one: https://rickandmortyapi.com/api/character/ and it works.

Sure I miss something here, sorry if it is a dumb question but I'm really new.

nestjs typescript next.js json
1 Answers

Ok I figured out how to solve it.

I followed the documentation and rewrite the function in this way:

import type { 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}>

          Object.values(transactions).map(transaction => {
            return <li key={transaction.id}>{transaction.asset}</li>
          })
        }

    </div>
  );
};

//Get API data
export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('http://localhost:3081/v1/transactions');
  const results: GetTransactionsResults = await res.json()

  // By returning { props: { transactions } }, the Home component
  // will receive `transactions` as a prop at build time
  return {
    props: {
      transactions: results,
    },
  }
}

export default Home;
user_145411040
Related