api route build error ECONNREFUSED

connect ECONNREFUSED 127.0.0.1:80 · vercel next.js · Discussion #13316

In my getServerSideProps, I want to make an API call to my next.js app's own API route. the function is as follows: export async function getServerSideProps(context) { const searchParams = { st...

https://github.com/vercel/next.js/discussions/13316

1. 서버 사이드 로직을 직접 호출

문제 코드 (잘못된 접근 방식)

export default async function Page() {
  const res = await fetch("http://localhost:3000/api/user?uid=123456");
  const user = await res.json();
  return <div>{user?.name}</div>;
}

해결 코드 (올바른 접근 방식)

import { prisma } from '~/lib/prisma';

export default async function Page() {
  const user = await prisma.user.findUnique({ where: { id: 123456 } });
  return <div>{user?.name}</div>;
}

2. getServerSideProps에서 직접 호출

문제 코드 (잘못된 접근 방식)

export async function getServerSideProps() {
  const res = await fetch("http://localhost:3000/api/user?uid=123456");
  const user = await res.json();
  return {
    props: { user },
  };
}

해결 코드 (올바른 접근 방식)

import { prisma } from '~/lib/prisma';

export async function getServerSideProps() {
  const user = await prisma.user.findUnique({ where: { id: 123456 } });
  return {
    props: { user },
  };
}

3. 클라이언트 측에서 API 호출

import { useEffect, useState } from 'react';

const ProductList = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('/api/product_list');
      const data = await res.json();
      setProducts(data);
    };

    fetchData();
  }, []);

  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
};

export default ProductList;

요약

• 서버 컴포넌트나 서버 사이드 함수: 직접 데이터베이스를 호출하여 데이터를 가져옵니다.

• 클라이언트 컴포넌트: fetch나 axios를 사용하여 API 경로를 호출합니다.

• API 경로: 클라이언트 측에서만 사용하도록 설계합니다.