theinnovatorsNext.js 15에서는 비동기 요청 API 도입, 캐싱 정책 변경, React 19 지원, Turbopack 개선 등의 주요 변경이 이루어졌다. Next.js 15에서 발표된 주요 기능과 변경 사항을 정리해봤다.
주요 변경 사항 정리
1. @next/codemod CLI 도입 – 원클릭 업그레이드 지원
Next.js 15에서는 코드를 자동 변환하는 CLI 도구인 @next/codemod가 추가되었다.
- Next.js 버전 업그레이드 시 발생하는 코드 변경을 자동으로 처리
- 종속성 업데이트, 코드 변환(codemods) 실행을 지원
- 다음 명령어를 사용하여 최신 버전으로 업그레이드 가능
npx @next/codemod@canary upgrade latest - 개발자의 수작업 부담을 줄이고, 대규모 코드베이스에서 업그레이드가 용이
2. 비동기 요청 API(Async Request APIs) 도입
Next.js 15에서는 서버 사이드 렌더링 시 사용되는 특정 API가 비동기 방식으로 변경되었다.
- 기존에는
cookies,headers,params,searchParams등을 동기적으로 접근 가능했으나, 이제 비동기 방식으로 호출해야 함 - 변경된 API 예제
import { cookies } from 'next/headers';
export async function AdminPanel() {
const cookieStore = await cookies();
const token = cookieStore.get('token');
}
- 기존 동기 API는 일시적으로 유지되며, 경고 메시지를 표시하도록 업데이트됨
- 서버 렌더링의 최적화를 위한 조치로, 향후 모든 Next.js 프로젝트에서 비동기 API로 전환 필요
3. 캐싱 정책 변경
Next.js 15에서는 기본 캐싱 방식이 변경되었다.
fetch요청,GET라우트 핸들러, 클라이언트 탐색 시 자동 캐싱이 기본적으로 해제됨- 이전에는 데이터를 캐싱하여 성능을 최적화했으나, 이제 개발자가 직접 캐싱을 설정해야 함
- 기존 방식 유지 예제
export const dynamic = 'force-static';- 동적 데이터를 실시간으로 반영하고자 하는 프로젝트에서 유용하지만, 캐싱이 필요한 경우 명시적으로 설정해야 한다는 점에서 기존 프로젝트의 설정 변경이 필요할 수 있음
4. React 19 지원 및 React Compiler 도입
Next.js 15는 React 19을 공식 지원하며, 새로운 React Compiler(실험적)가 포함되었다.
- Next.js 15는 기본적으로 React 19을 사용하지만, Pages Router에서는 React 18과도 호환 가능
- React Compiler를 활용하면
useMemo,useCallback같은 최적화 코드 없이 성능을 유지 가능 - React 19의 공식 출시와 함께 Next.js 15에서도 이에 대한 최적화가 이루어질 것으로 예상
5. Turbopack Dev 안정화 – 개발 속도 개선
Turbopack은 Next.js의 새 컴파일러로, 개발 속도를 크게 향상시키는 역할을 한다.
next dev --turbo명령어가 정식 지원됨- 성능 개선 효과
- 로컬 서버 시작 속도 최대 76.7% 향상
- 코드 변경 시 Fast Refresh 속도 96.3% 향상
- 초기 라우트 컴파일 속도 45.8% 향상
- 대규모 프로젝트에서 빌드 및 개발 속도를 크게 향상시킬 수 있는 기능
6. 정적 지표(Static Indicator) 추가
개발 환경에서 정적 경로와 동적 경로를 시각적으로 구분할 수 있도록 하는 기능이 추가되었다.
- Static Indicator를 통해 개발자가 정적/동적 페이지를 쉽게 판별 가능
- 정적 페이지와 동적 페이지를 명확히 구분하여 성능 최적화를 수행할 수 있음
7. unstable_after API 도입 – 응답 후 비동기 작업 실행
- 서버 응답이 완료된 후 실행할 비동기 작업을 예약할 수 있는 API가 추가됨
- 로깅, 데이터 분석, 외부 시스템 동기화 작업에 유용
- 사용 예제
import { unstable_after as after } from 'next/server';
export default function Layout({ children }) {
after(() => {
console.log("Logging after response!");
});
return <>{children}</>;
}- 사용자 응답 속도를 저하시키지 않고 비동기 작업을 처리할 수 있는 기능
8. next/form API 도입 – HTML 폼과 클라이언트 사이드 내비게이션 결합
<form>요소를 클라이언트 사이드 내비게이션과 통합하여 사용자 경험을 향상- 클라이언트에서 미리 로딩하여 빠른 폼 제출이 가능
- 사용 예제
import Form from 'next/form'; export default function Page() { return ( <Form action="/search"> <input name="query" /> <button type="submit">Submit</button> </Form> ); } - 검색 폼이나 데이터 전송 폼을 보다 빠르게 처리 가능
TI Tech Lab 김준수 연구원
Add comment