EN

페이지 2: Express.js API 통합 및 개발

2. Express.js API 통합 및 개발

Next.js 프론트엔드가 Express.js 백엔드와 통신할 수 있도록 하려면 API 라우트와 잠재적으로 CORS를 처리해야 합니다.

2.1. Express.js에서 CORS 처리

로컬 개발 중에 교차 출처 리소스 공유(CORS) 문제가 발생할 수 있습니다. api/ 디렉토리에 cors 패키지를 설치합니다.

cd api
npm install cors

그런 다음 api/index.js를 업데이트합니다.

// api/index.js
const express = require('express');
const cors = require('cors'); // cors 임포트
const app = express();
app.use(cors()); // cors 미들웨어 사용
app.use(express.json());
app.get('/api/hello', (req, res) => {
  res.status(200).send('Express.js API에서 안녕하세요!');
});
module.exports = app;

운영 환경에서는 Next.js 프론트엔드 도메인에서만 요청을 허용하도록 CORS를 구성해야 합니다.

2.2. Next.js에서 API 사용

Next.js 프론트엔드(예: nextjs-frontend/pages/index.js)는 Express.js API에서 데이터를 가져올 수 있습니다. 로컬 개발 중에는 Express.js가 다른 포트(예: 3001)에서 실행되고 Next.js는 3000에서 실행될 수 있습니다.

// nextjs-frontend/pages/index.js
import { useEffect, useState } from 'react';
function HomePage() {
  const [message, setMessage] = useState('로딩 중...');
  useEffect(() => {
    fetch('/api/hello') // 프로덕션에서는 Vercel이 프록시 또는 라우팅합니다.
      .then(res => res.text())
      .then(setMessage);
  }, []);
  return <div>{message}</div>;
}
export default HomePage;

로컬 개발의 경우, next.config.js에 프록시를 설정하거나, Express.js를 다른 포트에서 실행하고 http://localhost:3001/api/hello를 사용할 수 있습니다. 그러나 Vercel 배포의 경우, Vercel이 /api/* 요청을 Express.js 서버리스 함수로 직접 라우팅하도록 구성할 것입니다.

Contact Us