1 / 2

Next.js에서 스프링 부트 API 연동 — 메뉴 목록과 검색 폼 만들기

이번 내용에는 우리가 아직 배우지 않은 Hook 함수 얘기, CORS, 서버 콤포넌트, 클라이언트 콤포넌트 얘기가 나옵니다. 잘 모르는 내용이지만 내일 수업할 내용이니 미리 예습을 하면 도움이 될 수 있습니다.

대상 ncafe/backend 스프링 부트 서버를 실행하고, ncafe/frontend Next.js 프로젝트를 이미 만든 학생

목표 Next.js 서버 컴포넌트에서 fetch로 스프링 부트 API를 호출하여 메뉴 목록을 렌더링하고, 검색 폼을 추가하여 필터링된 결과를 표시한다

완성물 ncafe/frontend의 메뉴 페이지에서 전체 목록이 표시되고, 이름 검색 폼을 입력하면 필터링된 메뉴가 새로고침 없이(또는 새로고침 후) 갱신되는 상태

필수 준비물

실행 중인 ncafe/backend 스프링 부트 서버 (http://localhost:8080)
실행 중인 ncafe/frontend Next.js 개발 서버 (http://localhost:3000)
Postman 또는 브라우저 DevTools (Network 탭)

전제

ncafe/backend 의 MenuController 에 검색 파라미터(name, category, minPrice, maxPrice)를 받는 GET /api/menus 엔드포인트가 이미 구현되어 있다고 가정합니다.
ncafe/frontend 에는 이미 메뉴 목록을 표시하는 페이지(app/menus/page.js 또는 유사 경로)가 존재한다고 가정합니다.

STEP 1 / 5현재 상태 확인 및 서버 연결 준비

0개 완료 · 5개 남음

먼저 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)이 필요합니다. 이번 단계에서는 먼저 기본 연결이 되는지 확인하는 것입니다.

❌ 자주 하는 실수

증상	원인	해결
`Failed to fetch` 또는 `Network Error`	백엔드 서버(8080)가 꺼져 있거나, 프론트엔드(3000)와 도메인/포트 불일치	백엔드 서버가 떠 있는지 확인, URL이 `http://localhost:8080` 인지 확인
CORS 에러 (`Access-Control-Allow-Origin`)	브라우저에서 다른 도메인(포트)으로 요청할 때 발생하는 보안 정책	개발 단계에서는 `@CrossOrigin` 또는 `CorsFilter` 로 `localhost:3000` 을 허용하도록 백엔드 설정

📝 이 단계의 핵심

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

이어지는 내용은 회원만 볼 수 있어요

뉴렉처에 로그인하면 전체 학습 자료를 열람할 수 있습니다.

로그인하기