从本地 Nest.js 应用程序将 json 文件提取到 Next.js 时出错答案

【问题标题】：Error fetching json file into Next.js from local Nest.js app从本地 Nest.js 应用程序将 json 文件提取到 Next.js 时出错
【发布时间】：2022-07-29 16:42:21
【问题描述】：

我真的是 Next.js 和 Nest.js 的新手，我不知道这里出了什么问题。

我有一个后端nest.js 应用程序在http://localhost:3081/v1/transactions 上提供一个json api。如果我尝试从邮递员发出 GET 请求，一切正常。

这是我在 next.js 前端应用中的 index.tsx：

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;

这是transaction.type.ts中的Interface：

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

因此，如果我尝试加载前端，我会收到以下错误消息：

Server Error
Error: Error serializing `.transactions` returned from `getStaticProps` in "/".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

这似乎是来自后端应用程序的空响应...

我还尝试从另一个 Web api 获取数据，例如：https://rickandmortyapi.com/api/character/，它可以工作。

当然我在这里错过了一些东西，对不起，如果这是一个愚蠢的问题，但我真的是新人。

【问题讨论】：

标签： json typescript next.js nestjs

【解决方案1】：

好的，我想出了如何解决它。

我按照文档按照这种方式重写了函数：

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;

【讨论】：