Next.js 14.1 릴리즈: 라우팅과 이미지 처리 개선

2024년 1월 18일에 Next.js 14.1가 릴리즈 되었습니다. 개인적으로 이번 업데이트에서는 라우팅과 이미지 처리에 대한 부분을 눈여겨 보았는데요. 주요 업데이트 내용은 아래와 같습니다. 1. App Router 에서 이제 기본 라우터(Native History API)인 pushState와 replaceState가 useSearchParams와 usePathname과 실시간으로 동기화되어 페이지를 새로고침 하지 않고도 연동됩니다. pushState는 새로운 상태를 히스토리 스택에 추가하고, replaceState는 현재 상태를 새로운 상태로 교체하는 기능인데요. 이 기능은 SPA에서 페이지 전환을 더 매끄럽고 빠르게 만드는 데 기여합니다. 2. getImageProps 함수 추가: 이 함수는 Next.js에서 이미지 처리를 위한 유틸리티 인데요 이 함수는 'picture 요소 내의 img 또는 source 요소에 대한 props를 생성합니다. 기존 컴포넌트는 자체가 이미지 최적화 및 로딩을 관리하는 반면 getImageProps는 사용자가 직접 'img'태그를 사용할 때 필요한 속성들을 생성해주는 역할을 합니다. 따라서 다소 복잡한 이미지 처리 (라이트/다크 모드)에서 사용자가 직접 HTML태그를 사용할때 유용합니다. 3. Parallel 라우팅 개선 (인터셉트 라우트): 페어럴 라우팅은 Next.js App Router 가 지원하는 병렬 라우팅으로 하나 이상의 페이지를 동시에 또는 조건부로 렌더링 할 수 있는 기능인데요. Intercepted Routes를 지원해서 URL마스킹 기능을 지원하게 되었습니다. URL마스킹이란 실제 접근하고 있는 페이지의 경로와 다르게 표시하는 것을 의미하는데요. '/photo/123' 페이지를 방문 하였지만, 브라우저의 주소 표시줄에는 '/feed'라고 표시되는 것을 의미 합니다. 이러한 방식으로 사용자 경험을 개선하고, 사이트의 네비게이션 구조를 직관적으로 만들 수 있습니다. 이 외에도 여러 업데이트 내용이 있으니 관심 있으신 분들은 사이트에 방문하여 보시는것을 추천드립니다. https://nextjs.org/blog/next-14-1