728x90 반응형 Next.js8 Next.js 16 next/image 기본값 변경, quality 75부터 SSRF 방어까지 점검 가이드 안녕하세요. J4J입니다. 이번 포스팅은 Next.js 16으로 업그레이드하면서 next/image의 여러 기본값이 어떻게 조용히 달라졌는지 알아보는 시간을 가져보려고 합니다. next/image quality 기본값 변경, qualities 배열로 제한되는 화질 Next.js 16으로 프로젝트를 올린 뒤에도 quality prop을 예전과 똑같이 쓰고 있는데, 이미지가 이전과 다른 화질로 렌더링되는 경우를 마주치게 됩니다. 이 변화의 원인은 next/image의 images.qualities 설정이 15와 16 사이에 달라졌기 때문입니다. images.qualities는 quality prop으로 지정할 수 있는 값을 제한하는 배열이며, next/image 컴포넌트에서 이 배열에 없는 값을 지정하면.. 2026. 8. 12. Next.js 16 App Router에서 Activity, useEffectEvent, View Transitions 통합하기 안녕하세요. J4J입니다. 이번 포스팅은 React 19.2에서 새로 추가된 Activity, useEffectEvent, View Transitions를 Next.js 16 App Router 환경에 통합해 활용하는 방법을 살펴보는 시간을 가져보려고 합니다. 세 API 각각이 무엇을 해결하는지는 별도로 다루지 않으니, 기본 개념이 궁금하신 분들은 지난 포스팅을 먼저 참고해 주시길 바랍니다. React 19.2: Activity·useEffectEvent 정식 지원, View Transitions 실험 단계안녕하세요. J4J입니다. 이번 포스팅은 React 19.2에서 새롭게 추가된 Activity, useEffectEvent와 함께, 아직 실험 단계에 있는 View Transitions까지 살펴보는 시.. 2026. 8. 11. Next.js 16, Layout Deduplication과 Incremental Prefetching 동작 원리 안녕하세요. J4J입니다. 이번 포스팅은 Next.js 16에서 개편된 프리페치 동작인 Layout Deduplication과 Incremental Prefetching이 실제로 어떻게 동작하는지 살펴보는 시간을 가져보려고 합니다. 기존 프리페치 방식의 한계 React로 App Router의 리스트 화면을 만들다 보면, 링크가 많아질수록 페이지 이동이 오히려 무거워지는 상황을 마주치게 됩니다. Next.js의 Link 컴포넌트는 뷰포트에 들어오거나 hover되면 해당 라우트를 미리 내려받아 두는 프리페치를 자동으로 수행합니다. 이때 프리페치 대상 범위는 loading.js 파일이 있는지에 따라 달라지는데, loading.js가 없으면 페이지 전체를, 있으면 레이아웃부터 첫 loading 경계까지를 미.. 2026. 8. 6. React Compiler와 Next.js 16: useMemo/useCallback이 사라지는 이유 안녕하세요. J4J입니다. 이번 포스팅은 Next.js 16에서 stable로 전환된 React Compiler를 활성화하는 방법과, 기존 useMemo/useCallback/memo로 작성했던 코드를 걷어내는 방법에 대해 알아보는 시간을 가져보려고 합니다. React Compiler란 무엇인가 React로 리스트나 자식 컴포넌트를 다루다 보면 부모 컴포넌트가 리렌더링될 때마다 관련 없는 자식 컴포넌트까지 함께 리렌더링되는 상황을 자주 마주치게 됩니다. 이 문제를 해결하기 위해 그동안은 useMemo로 계산 결과를 캐싱하고, useCallback으로 함수 참조를 고정하고, memo로 컴포넌트 자체를 감싸는 방식을 직접 작성해야 했습니다. 저의 경우 useCallback의 의존성 배열에 값을 하나 빠뜨.. 2026. 8. 2. Turbopack, Next.js 16 기본 번들러 전환과 webpack 커스텀 설정 마이그레이션 안녕하세요. J4J입니다. 이번 포스팅은 Next.js 16에서 Turbopack이 기본 번들러로 자리잡은 배경과, 기존 webpack 커스텀 설정을 Turbopack 설정으로 옮기는 방법에 대해 알아보는 시간을 가져보려고 합니다. Turbopack이 Next.js 16의 기본 번들러가 된 이유 Next.js는 오랫동안 webpack을 기본 번들러로 사용해왔고, 프로젝트 규모가 커질수록 dev 서버의 컴파일 속도와 프로덕션 빌드 시간이 체감될 정도로 느려지는 경우가 많았습니다. 저의 경우 페이지 수가 많은 프로젝트에서 코드 한 줄을 수정하고 Fast Refresh 결과를 확인하기까지 기다리는 시간이 점점 길어지는 것을 체감한 적이 있습니다. 그러면 Next.js 16은 번들러 문제를 어떻게 해결했.. 2026. 8. 1. Next.js 16 proxy.ts, middleware.ts를 대체하는 네트워크 경계 재정의 안녕하세요. J4J입니다. 이번 포스팅은 Next.js 16에서 middleware.ts가 proxy.ts로 바뀐 배경과, 달라진 네트워크 경계를 실제 코드로 확인해보는 시간을 가져보려고 합니다. middleware.ts가 proxy.ts로 바뀐 이유, Next.js 16 네트워크 경계 재정의 Next.js 15까지는 요청이 라우트 핸들러나 페이지에 도달하기 전에 가로채는 진입점으로 middleware.ts 파일을 사용했습니다. 인증 체크, 리다이렉트, 헤더 조작처럼 애플리케이션 앞단에서 처리해야 하는 로직을 이 파일 하나에 모아둘 수 있었습니다. 다만 middleware라는 이름은 Express.js 같은 서버 프레임워크의 middleware 개념과 혼동을 일으키기 쉬웠습니다. Express의 .. 2026. 7. 27. Next.js 16 Cache Components: use cache부터 updateTag까지 캐시 무효화 총정리 안녕하세요. J4J입니다. 이번 포스팅은 Next.js 16에서 바뀐 캐싱 모델인 Cache Components와, use cache 디렉티브부터 revalidateTag, updateTag, refresh까지 캐시를 다루는 방법에 대해 알아보는 시간을 가져보려고 합니다. Next.js 16 캐싱 모델이 바뀐 이유, Cache Components란? Next.js 15까지는 무언가를 캐시하려면 상황에 따라 서로 다른 도구를 조합해야 했습니다. fetch 요청 하나를 캐시하려면 cache나 next.revalidate 옵션을 fetch 호출부에 직접 넘겨야 했고, DB 조회처럼 fetch가 아닌 임의의 함수를 캐시하려면 별도로 unstable_cache로 감싸야 했습니다. 여기에 정적 셸과 동적 콘텐츠.. 2026. 7. 26. React Server Action, API Route 없이 서버 함수를 호출하는 방법 안녕하세요. J4J입니다. 이번 포스팅은 React Server Action이 무엇이고, 실무에서 어떻게 활용할 수 있는지에 대해 알아보는 시간을 가져보려고 합니다. Server Action이란? Server Action은 서버에서 실행되는 비동기 함수를 클라이언트에서 직접 호출할 수 있게 해주는 기능입니다. React 19에서 공식 API로 안정화되었으며, Next.js App Router 환경에서 가장 자연스럽게 사용할 수 있습니다. 그러면 Server Action이 왜 필요할까요? 기존에는 클라이언트에서 서버의 데이터를 변경하기 위해 다음과 같은 과정이 필요했습니다. API 엔드포인트(Route Handler) 작성클라이언트에서 fetch로 해당 엔드포인트 호출응답 처리 및 상태 업데이트 Ser.. 2026. 7. 5. 이전 1 다음 728x90 반응형