nextjs 15가 릴리즈되었다!!!
다양한 강력한 신 기능과 기존 실험적 기능(RC1, RC2)가 프로덕션에 포함되었다.
주요한 기능으로는 fetch요청이 원래는 캐싱이 기본 옵션이었는데
캐싱 안함이 기본 옵션으로 설정되고
React19 지원, Turbopack 지원등이 있다.
next.Js CONF24도 개최되었다.
아래 링크를 통해 확인가능
궁금하니 기존 프로젝트 하나를 마이그레이션 해보자!
# Use the new automated upgrade CLI npx @next/codemod@canary upgrade latest # ...or upgrade manually npm install next@latest react@rc react-dom@rc
해당 cli로 자동으로 마이그레이션이 가능하다!!
코드를 자동으로 변경해준다고 한다.
⇒ ‣
실제로 업데이트를 하니 터보팩 옵션이 추가되었다.
일단 눈에띄는 기능은 정적라우트인지
확인할 수 있는 표시가 브라우저 좌측하단에 생긴다는 점이다.
-‣
실제로 확인해보니 서버사이드 랜더링 + fource-cache
를 사용하는 페이지의 경우아래처럼 static route을 확인할 수 있었다.
또한 개발자 도구를 개발중이라하니 이점이 기대될만하다.
SearchParams
또한 서버컴포넌트에서 Params를 가져오는 방식이 Promise를 반환하게 바뀌었다.
export default async function Page({ searchParams }: { searchParams: string })
원래는 이렇게 searchParams를 설정 후 가져다 쓰면 되었지만.
export default async function Page(props: { searchParams: Promise<string> }){ const searchParams = await props.searchParams; }
이제는 위처럼 비동기로 가져와야한다.
해당 부분은
@next/codemod CLI 에서 자동으로 바꿔준 부분이다!사실.. 이번 포스트를 작성한 이유는 SVG 아이콘을 로드하는데 문제가 있기 때문이다..
Get an error when upgrading to next v15 and icon.svg in the app folder
Updated Dec 3, 2024
업데이트 이후 직접 로컬에서 import해서 가져온 SVG아이콘에 문제가 발생한다.
현재 webpack SVGR 라이브러리(
"@svgr/webpack": "^8.1.0",)를 사용해서
svg파일을 import해서 사용하고 있으며,아래 설정을 사용중
// next.config.mjs config.module.rules.push({ // Svg loader 설정 test: /\.svg$/i, issuer: /\.[jt]sx?$/, use: ['@svgr/webpack'], });
svg를 jsx에 직접 인라인으로 작성하는것은 문제가 되지 않는것으로보아
Defaulting SVGR to enabled with the withNx plugin creates dev & prod svg mismatch with Next 19 and turbopack
Updated Dec 1, 2024
위 이슈와 같이
터보팩 사용시 SVG 파일이
StaticImageData 객체로 import되어서 생긴 문제로 판단된다..
말이 안정버전이지 출시된지 얼마 안된 릴리즈는 항상 조심해야한다.
삼성 펌웨어처럼..