next.config.js 실험적 기능 활성화 방법

Introduction

Next.js는 experimental 설정을 통해 아직 안정화되지 않은 기능을 미리 사용할 수 있게 합니다. 이 기능들은 향후 릴리스에서 공식 기능이 될 수 있으므로, 이를 활용하면 프로덕션 환경에서 성능과 개발 경험을 개선할 수 있습니다. 이 글에서는 주요 실험적 기능과 설정 방법을 다룹니다.

Environment

# 프로젝트 구조
my-app/
├── next.config.js
├── app/
│   ├── layout.tsx
│   └── page.tsx
└── package.json

# 기술 스택
Next.js: 14.2.5
React: 18.3.1
Node.js: 18.17.0

Problem

기본 설정으로는 특정 최적화 기능을 사용할 수 없습니다:

# 빌드 경고
⚠️ You are using experimental features. They may break in the future.

Analysis

Next.js 실험적 기능 분류:

성능 최적화: 번들 크기 및 로딩 시간 개선
개발 경험: 개발 서버 성능 향상
새로운 API: 아직 안정화되지 않은 API
호환성: 향후 변경될 수 있는 동작

Solution

1. 기본 실험적 기능 활성화

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    // React Compiler (React 19)
    reactCompiler: true,
    
    // 서버 컴포넌트에서 async 사용
    serverActions: {
      bodySizeLimit: '2mb',
    },
    
    // 이미지 최적화 개선
    optimizePackageImports: ['lodash', 'date-fns', '@mui/material'],
    
    // 모듈 연산자 (import.meta.*)
    moduleResolution: 'bundler',
  },
};

module.exports = nextConfig;

2. React Compiler 활성화

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    // React Compiler (React 19에서 기본 활성화)
    reactCompiler: true,
  },
};

module.exports = nextConfig;

// React Compiler가 자동으로 최적화하는 예시
'use client';

import { useState, useMemo } from 'react';

// React Compiler가 자동으로 메모이제이션 적용
export function ExpensiveComponent({ items }: { items: string[] }) {
  const [filter, setFilter] = useState('');
  
  // useMemo 사용 없이도 자동 최적화됨
  const filteredItems = items.filter(item => 
    item.toLowerCase().includes(filter.toLowerCase())
  );
  
  return (
    
       setFilter(e.target.value)}
        placeholder="필터..."
      />
      
        {filteredItems.map(item => (
          {item}
        ))}
      
    
  );
}

3. 서버 액션 설정

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: {
      // 바디 크기 제한 (기본 1MB)
      bodySizeLimit: '5mb',
      
      // 서버 액션 허용된 도메인
      allowedOrigins: ['my-proxy.com', '*.mydomain.com'],
    },
  },
};

module.exports = nextConfig;

4. 패키지 임포트 최적화

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    // 무거운 라이브러리 최적화
    optimizePackageImports: [
      // 아이콘 라이브러리
      '@heroicons/react',
      '@mui/icons-material',
      'react-icons',
      
      // 유틸리티 라이브러리
      'lodash',
      'date-fns',
      'rxjs',
      
      // UI 라이브러리
      '@mui/material',
      '@mui/lab',
      'antd',
      'chakra-ui',
    ],
  },
};

module.exports = nextConfig;

# 최적화 전후 번들 크기 비교
# Before: 84 kB shared
# After: 62 kB shared (26% 감소)

5. 이미지 최적화 실험적 기능

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    // 이미지 형식 최적화
    imageFormats: ['avif', 'webp'],
    
    // 이미지 최적화 레벨
    imageOptimizationLevel: 3,
  },
  
  images: {
    // 실험적 이미지 설정
    allowSVG: true,
    contentDispositionType: 'attachment',
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
};

module.exports = nextConfig;

6. 빌드 시간 최적화

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    // 빌드 시간 최적화
    optimizeCss: true,
    
    // 메모리 사용량 최적화
    workerThreads: true,
    
    // 대용량 데이터 처리 최적화
    largePageDataBytes: 128 * 1024,
  },
};

module.exports = nextConfig;

7. TypeScript 실험적 기능

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    // TypeScript 엄격한 모드
    typedRoutes: true,
    
    // 빌드 시간 타입 검증
    typedPages: true,
  },
  
  typescript: {
    // 프로덕션 빌드 시 타입 에러 무시
    ignoreBuildErrors: false,
  },
};

module.exports = nextConfig;

// typedRoutes가 활성화되면 라우트 타입 검증
import Link from 'next/link';

// ✅ 올바른 경로
About

// ❌ 존재하지 않는 경로 (빌드 에러)
Nonexistent

8. 개발 서버 최적화

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    // 개발 서버 성능 최적화
    optimizeServerImports: true,
    
    // 핫 리로딩 개선
    hmrSync: true,
  },
  
  // 개발 환경 전용 설정
  ...(process.env.NODE_ENV === 'development' && {
    experimental: {
      // 개발 서버 빠른 시작
      fastRefresh: true,
      
      // 컴파일 캐시 활성화
      compilationCache: true,
    },
  }),
};

module.exports = nextConfig;

Lessons Learned

안정성 확인: 실험적 기능 사용 전 changelog 및 GitHub issues 확인
점진적 적용: 하나씩 활성화하여 영향 확인
버전 업데이트: Next.js 업데이트 시 실험적 기능 변경사항 확인
프로덕션 주의: 실험적 기능은 프로덕션 환경에서 신중하게 사용

This blog does not accept any external sponsorships, affiliate marketing, or ad revenue.