먼저 Next.js 프론트엔드와 스프링 백엔드가 정상적으로 통신하는지 확인하고, 기존 코드의 구조를 파악해볼게요.

1-1. 백엔드 서버 실행 확인

터미널에서 ncafe/backend 폴더에 mvn spring-boot:run 이 실행 중인지 확인하세요.

# 백엔드 서버가 떠 있는지 확인
curl http://localhost:8080/api/menus

Windows/Mac 공통: curl 명령이 없다면 브라우저에서 http://localhost:8080/api/menus 를 직접 열어보세요. JSON 배열이 보이면 정상입니다.

1-2. 프론트엔드 서버 실행 확인

ncafe/frontend 폴더에서 Next.js 개발 서버가 실행 중인지 확인하세요.

# 프론트엔드 서버가 떠 있는지 확인
curl http://localhost:3000

1-3. 기존 메뉴 페이지 코드 확인

VSCode에서 ncafe/frontend/app/menus/page.js (또는 해당 메뉴 페이지 파일)를 열어보세요. 현재는 fetch 로 데이터를 가져와서 단순히 목록만 출력하는 구조입니다.

파일: ncafe/frontend/app/menus/page.js

export default async function MenusPage() {
  const getMenus = async () => {
    const res = await fetch('http://localhost:8080/api/menus');
    const data = await res.json();
    return data;
  };

  const menus = await getMenus();

  return (
    <main>
      <h1>메뉴</h1>
      <ul>
        {menus.map((menu) => (
          <li key={menu.id}>
            {menu.korName} - {menu.price}원
          </li>
        ))}
      </ul>
    </main>
  );
}

✅ 확인

• 터미널에서 curl http://localhost:8080/api/menus 시 JSON 데이터가 반환됩니다.
• 브라우저에서 http://localhost:3000/menus (또는 해당 경로)를 열면 메뉴 목록이 표시됩니다.

🎓 newlec 쌤의 코멘트

Next.js의 서버 컴포넌트(Async Component)는 서버 사이드에서 직접 fetch 를 사용할 수 있습니다. 이 덕분에 클라이언트로 불필요한 코드가 전송되지 않고, SEO에도 유리합니다. 하지만 이 방식은 "서버 렌더링" 시점에 데이터를 가져오므로, 사용자가 검색어를 입력해도 자동으로 갱신되지 않습니다. 검색 기능을 위해선 클라이언트 사이드 로직이나 서버 액션(Server Actions)이 필요합니다. 이번 단계에서는 먼저 기본 연결이 되는지 확인하는 것입니다.

❌ 자주 하는 실수

📝 이 단계의 핵심

• Next.js 서버 컴포넌트에서 fetch 는 서버 사이드에서 실행됩니다.
• 프론트엔드와 백엔드가 서로 다른 포트(3000 vs 8080)를 사용하므로 CORS 설정이 필요할 수 있습니다.