连接strapi和next.js，但遇到错误

发布于 2025-02-09 14:24:07 字数 2431 浏览 2 评论 0 原文

打开了两个终端，一个用于Strapi，一个用于Next.js。我已经在Strapi中设置了配置。我想在Next.js中接收API并将其显示在屏幕上，但并未显示。然后，我得到一个错误屏幕。我与Postman进行了测试，并确认可以完成并邮寄。

我在浏览器中遇到了这个错误。

    Server Error
Error: connect ECONNREFUSED ::1:1337

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown> (Error: connect ECONNREFUSED
: (1:1337)
TCPConnectWrap.afterConnect [as oncomplete]
node:net (1237:16)

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
wait  - compiling...
event - compiled client and server successfully in 393 ms (125 modules)
wait  - compiling / (client and server)...
wait  - compiling...
event - compiled client and server successfully in 128 ms (144 modules)
wait  - compiling /_error (client and server)...
wait  - compiling...
event - compiled client and server successfully in 56 ms (145 modules)
error - Error: connect ECONNREFUSED ::1:1337

index.js

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import axios from "axios";

export async function getStaticProps() {
  const foodsData = await (
    await axios.get("http://localhost:1337/api/foods")
  ).data.data;

  console.log(foodsData);

  return {
    props: {
      foods: foodsData,
    },
  };
}

export default function Home({ foods }) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>Welcome to My Shopping</h1>
        <div className={styles.grid}>
          {foods.map((food, index) => (
            <>
              <a
                href="https://nextjs.org/docs"
                className={styles.card}
                key={index}
              >
                <h2>{food.attributes.title}</h2>
                <p>{food.attributes.description}</p>
                <div>価格：{food.attributes.price}</div>
              </a>
            </>
          ))}
        </div>
      </main>
    </div>
  );
}

如何纠正？帮我Plese。

原文

Two terminals are opened, one for Strapi and one for Next.JS.
I have set up the configuration in Strapi.
I want to receive the API in Next.JS and display it on the screen, but it does not show up. Then I get an error screen.
I tested with Postman and confirmed that Get and Post can be done.

I get this error in my browser.

    Server Error
Error: connect ECONNREFUSED ::1:1337

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown> (Error: connect ECONNREFUSED
: (1:1337)
TCPConnectWrap.afterConnect [as oncomplete]
node:net (1237:16)

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
wait  - compiling...
event - compiled client and server successfully in 393 ms (125 modules)
wait  - compiling / (client and server)...
wait  - compiling...
event - compiled client and server successfully in 128 ms (144 modules)
wait  - compiling /_error (client and server)...
wait  - compiling...
event - compiled client and server successfully in 56 ms (145 modules)
error - Error: connect ECONNREFUSED ::1:1337

index.js

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import axios from "axios";

export async function getStaticProps() {
  const foodsData = await (
    await axios.get("http://localhost:1337/api/foods")
  ).data.data;

  console.log(foodsData);

  return {
    props: {
      foods: foodsData,
    },
  };
}

export default function Home({ foods }) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>Welcome to My Shopping</h1>
        <div className={styles.grid}>
          {foods.map((food, index) => (
            <>
              <a
                href="https://nextjs.org/docs"
                className={styles.card}
                key={index}
              >
                <h2>{food.attributes.title}</h2>
                <p>{food.attributes.description}</p>
                <div>価格：{food.attributes.price}</div>
              </a>
            </>
          ))}
        </div>
      </main>
    </div>
  );
}

How can this be corrected?
help me plese.