Next.js 14.1 릴리즈

2024년 1월 19일에 Next.js 14.1이 정식으로 릴리즈되었습니다. 주로 개발자 경험에 도움이 되는 변경점들이 있었습니다.

1. Self-Hosting 가이드 문서 개선

2. 개발자 경험 향상을 위한 오류 메세지 개선

3. pushState와 replaceState 지원

• 화면을 새로고침하지 않고 주소창에 filter= 파라메터 추가하는 로직 작성 가능

예시:

"use client";

import { useSearchParams } from "next/navigation";

export default function SortProducts() {
  const searchParams = useSearchParams();

  function updateSorting(sortOrder: string) {
    const params = new URLSearchParams(searchParams.toString());
    params.set("sort", sortOrder);
    window.history.pushState(null, "", `?${params.toString()}`);
  }

  return (
    <>
      <button onClick={() => updateSorting("asc")}>Sort Ascending</button>
      <button onClick={() => updateSorting("desc")}>Sort Descending</button>
    </>
  );
}

4. next/image 개선

• <Image> 컴포넌트말고 getImageProps() 로 직접 HTML 태그에 주입 가능

• picture 태그에 다크모드/라이트모드에 따라 다른 이미지 노출할 수 있게 지원해줌

예시:

import { getImageProps } from "next/image";

export default function Page() {
  const common = { alt: "Hero", width: 800, height: 400 };
  const {
    props: { srcSet: dark },
  } = getImageProps({ ...common, src: "/dark.png" });
  const {
    props: { srcSet: light, ...rest },
  } = getImageProps({ ...common, src: "/light.png" });

  return (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
      <source media="(prefers-color-scheme: light)" srcSet={light} />
      <img {...rest} />
    </picture>
  );
}

자세한 내용은 https://nextjs.org/blog/next-14-1#nextimage-support-for-picture-and-art-direction 에서 확인하실 수 있습니다.