javascript - Connecting Strapi and Next.JS but getting an error

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 onplete]
node:net (1237:16)

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
wait  - piling...
event - piled client and server successfully in 393 ms (125 modules)
wait  - piling / (client and server)...
wait  - piling...
event - piled client and server successfully in 128 ms (144 modules)
wait  - piling /_error (client and server)...
wait  - piling...
event - piled 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}>Wele to My Shopping</h1>
        <div className={styles.grid}>
          {foods.map((food, index) => (
            <>
              <a
                href=";
                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.

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 onplete]
node:net (1237:16)

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
wait  - piling...
event - piled client and server successfully in 393 ms (125 modules)
wait  - piling / (client and server)...
wait  - piling...
event - piled client and server successfully in 128 ms (144 modules)
wait  - piling /_error (client and server)...
wait  - piling...
event - piled 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}>Wele to My Shopping</h1>
        <div className={styles.grid}>
          {foods.map((food, index) => (
            <>
              <a
                href="https://nextjs/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.

Share Improve this question edited Jun 23, 2022 at 12:24 juliomalves 50.7k23 gold badges178 silver badges169 bronze badges asked Jun 21, 2022 at 21:39 naka sho 213 bronze badges

It looks like an issue with the strapi server. Taking next.js out of the equation, are you able to get data by doing curl http://localhost:1337/api/foods in the terminal (or making the request with a tool like postman) – Logan Anderson Commented Jun 22, 2022 at 2:32
We have confirmed that Postman can be used to receive and add json data to STRAPI. – naka sho Commented Jun 22, 2022 at 10:31
What Node.js version are you on? Have you tried replacing localhost:1337 with 127.0.0.1:1337? – juliomalves Commented Jun 25, 2022 at 18:23
Can you add code / instructions for how you are starting the Strapi server? (I am unable to re-produce this) – Logan Anderson Commented Jun 27, 2022 at 15:16

Add a ment |

1 Answer 1

Sorted by: Reset to default 8

I had this same issue. Change http://localhost:1337 to http://127.0.0.1:1337

Modified

The reason is that localhost and 127.0.0.1 are often interchangeable and give the same result, but we cannot say they are entirely synonymous.

You can read more about the two here: https://phoenixnap./kb/localhost-vs-127-0-0-1

PS: Thanks to my colleague and friend Simen Daehlin at Strapi

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745654355a4638454.html

javascript - Connecting Strapi and Next.JS but getting an error - Stack Overflow

1 Answer 1

Modified

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Connecting Strapi and Next.JS but getting an error - Stack Overflow

1 Answer 1

Modified

相关推荐