Sign in

nextjs

it dev nextjs

Next.js 16.0 Beta 완전 분석 - 15버전과 뭐가 달라졌을까?

안녕하세요! 오늘은 정말 핫한 소식을 가지고 왔어요. 바로 오늘 공개된 Next.js 16.0 Beta에 대한 이야기인데요, 15버전을 사용하고 계신 분들이라면 꼭 알아야 할 변경사항들이 가득합니다. 😊프론트엔드 개발자라면 누구나 한 번쯤 "음... 이번 버전은 업그레이드해야 하나?" 고민해보셨을 텐데요. 이 글을 읽고 나면 여러분의 프로젝트에 Next.js 16을 적용할지 확실한 판단을 내릴 수 있을 거예요!🎯 Next.js 16 Beta, 한눈에 보는 핵심 요약먼저 바쁘신 분들을 위해 핵심만 쏙쏙 정리해드릴게요:Turbopack이 드디어 정식(Stable) 버전으로! 🎉 이제 모든 프로젝트의 기본 번들러React 19.2 지원 - View Transitions, useEffectEvent 등 최..
wono | discuss |
it dev nextjs

모달창에서 스크롤 방지

처음 찾아본 코드로는useEffect(() => { document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = 'unset'; };}, []);을 사용했는데 문제점은 스크롤바가 사라지면서 레이아웃이 비틸렸다 다시 돌아왔다 한다는 것상당히 거슬려서 새로운 방법을 찾아봤다.  // utils/modal.ts/** * 스크롤을 방지하고 현재 위치를 반환한다. * @returns {number} 현재 스크롤 위치 */export const preventScroll = (): number => { const currentScrollY = window.scrollY; document.body.style.p..
wono | discuss |
it dev nextjs modal

Next.js 15 - Modal 구현 (with. Parallel Routes & Intercepting Routes)

웹 개발에서 모달창 구현을 직접 하거나 편리한 라이브러리는 대부분 상태관리와 함께 이루어진다.(본인 역시 react-modal을 그동안 사용해왔다.)const [isOpen, setIsOpen] = useState(false);const toggleModal = () => setIsOpen(!isOpen);const openModal = () => setIsOpen(true);const closeModal = () => setIsOpen(false);아마 대부분이 이런 기본 형태의 state를 활용했을 것이다. 이를 개발하다보면 필연적으로 마주치는 상황들이 몇가지 있는데 대표적으로 아래와 같이 있다.모달창이 열린 상황에서 새로고침을 하면 state로 관리하기 때문에 모달창이 닫힘뒤로가기 버튼을 누르면 이..
wono | discuss |
it dev nextjs asynclocalstorage

Next.js는 짜증나요 | GeekNews

Next.js의 미들웨어는 로깅 설정이 제한적이며, 기본 로깅이 개발 환경에서만 활성화되어 생산 환경에서 문제 추적이 어려움미들웨어에서 헤더만 전달 가능하며, 다중 미들웨어 체이닝이 불가능해 복잡한 로깅 구현이 제한됨AsyncLocalStorage를 사용한 로깅은 Edge 런타임에서 예상치 못한 동작을 보이며, 페이지와 미들웨어 간 컨텍스트 공유가 제대로
wono | discuss |