#1 - BFF (Backend for Frontend) 패턴 가이드

BFF (Backend for Frontend) 패턴 가이드

개요

Next.js가 BFF 역할을 수행합니다. 모든 클라이언트 요청은 Next.js를 거쳐 백엔드로 전달됩니다.

text

Client → Next.js (BFF) → Spring Boot (Backend)

BFF 유형별 구현 방식

1. Bypass (단순 프록시)

용도: 인증 헤더 추가만 필요, 데이터 가공 없음

구현: proxy.ts + rewrites

Next.js 16: proxy.ts
Next.js 15: middleware.ts

typescript

// proxy.ts - Cookie → Authorization 변환
export function proxy(request: NextRequest) {
  const accessToken = request.cookies.get('accessToken')?.value;
  if (accessToken) {
    const headers = new Headers(request.headers);
    headers.set('Authorization', `Bearer ${accessToken}`);
    return NextResponse.next({ request: { headers } });
  }
  return NextResponse.next();
}

typescript

// next.config.ts - 백엔드로 프록시
async rewrites() {
  return [{ source: '/api/:path*', destination: `${API_URL}/:path*` }];
}

2. Aggregation (API 집계)

용도: 여러 API 호출 → 하나의 응답으로 합침

구현: Route Handler (app/api/.../route.ts)

typescript

// app/api/dashboard/route.ts
export async function GET() {
  const [user, stats, posts] = await Promise.all([
    coreApi.get('/users/me'),
    coreApi.get('/users/me/stats'),
    coreApi.get('/posts', { limit: 5 }),
  ]);

  return NextResponse.json({
    data: { user: user.data, stats: stats.data, posts: posts.data }
  });
}

3. Transformation (데이터 가공)

용도: 백엔드 응답을 클라이언트에 맞게 변환

구현: Route Handler + 데이터 변환

typescript

// app/api/posts/formatted/route.ts
export async function GET() {
  const { data: posts } = await coreApi.get('/posts');

  // 백엔드 응답 가공 (날짜 포맷, 필드 선택 등)
  const formatted = posts.map(post => ({
    id: post.id,
    title: post.title.slice(0, 50) + '...',          // 제목 자르기
    date: dayjs(post.createdAt).format('YYYY.MM.DD'), // 날짜 포맷
    isNew: dayjs().diff(post.createdAt, 'day') < 3,   // 신규 여부 계산
  }));

  return NextResponse.json({ data: formatted });
}

폴더 구조

text

src/
├── proxy.ts                    # Bypass 처리 (인증 헤더 변환)
├── lib/
│   └── api/
│       └── core-client.ts      # 서버용 백엔드 호출 (Route Handler에서 사용)
├── services/
│   ├── client.ts               # 클라이언트용 API wrapper
│   └── posts.ts                # 리소스별 서비스
├── hooks/
│   └── queries/
│       └── usePosts.ts         # React Query hooks
└── app/
    └── api/
        ├── dashboard/
        │   └── route.ts        # Aggregation 예시
        └── posts/
            └── formatted/
                └── route.ts    # Transformation 예시

언제 무엇을 사용?

상황	방식	파일
단순 CRUD (그대로 전달)	Bypass	`proxy.ts` + rewrites
여러 API 합침	Aggregation	`app/api/.../route.ts`
응답 가공 필요	Transformation	`app/api/.../route.ts`
인증 없는 공개 API	Bypass	rewrites만

요약

대부분의 API: Bypass (proxy.ts → rewrites)
복잡한 화면 데이터: Route Handler (집계/가공)
Client Component: fetch('/api/...') → Hook 사용
Server Component: coreApi.get(...) 직접 호출

#1 - BFF (Backend for Frontend) 패턴 가이드

중년개발자

BFF (Backend for Frontend) 패턴 가이드

개요

BFF 유형별 구현 방식

1. Bypass (단순 프록시)

2. Aggregation (API 집계)

3. Transformation (데이터 가공)

폴더 구조

언제 무엇을 사용?

요약

목차

댓글 0