블로그에서 next.js를 주로 다루고 있기도 하고, 조금이라도 이슈를 더 알리고 싶어 글을 작성하게 되었다. 관련 링크: https://github.com/vercel/next.js/security/advisories/GHSA-fr5h-rqp8-mj6g Server-Side Request Forgery in Server Actions### Impact A Server-Side Request Forgery (SSRF) vulnerability was identified in Next.js Server Actions by security researchers at Assetnote. If the `Host` header is modified, and the below conditi...github.com관..
front-end/next.js
이전에도 언급한 적이 있지만 React Query는 정말 좋은 비동기 처리 라이브러리이다. 하지만 Suspense와의 연동성이 좋지 않아 최근에는 자주 사용하지 않고 있었다. 저번 달에 React Query v5가 출시되었다. 이 버전에는 Suspense와의 연동은 물론이고 Next.js의 Streaming과의 연동성도 매우 좋아졌다. 이번 글에서는 React Query v5의 주요 변경점과 함께 Next.js과는 어떻게 연결 지어야 하는지 다뤄보려고 한다. One Function One Parameter React Query에 있는 모든 Hook, Method들은 이제 하나의 Parameter를 갖게된다. 여러 개의 Parameter를 갖던 경우에는 Object 형태로 받을 수 있게 바뀌었다. 이 부분..
Next.js 13이 나온 지 얼마 되지 않은 것 같은데 Next.js 14가 출시했다. 바뀐 내용은 아래와 같다. 1. Turbopack 2. Server Actions (안정화) 3. 부분 Prerendering Turbopack https://areweturboyet.com/ Are We Turbo Yet? No 91.1% of next dev tests are passing though✅ areweturboyet.com 큰 내용은 없고 Turbopack의 진행상황을 공유해 줬는데, 위 사이트에서 Turbopack의 테스트 코드 통과율을 확인할 수 있는데 현재 대부분의 테스트 코드를 통과한 상태인데 100% 통과하면 안정화 버전으로 이동된다고 한다. Server Actions (안정화) https:..
개요 Next.js 13의 구조에 대한 좋은 글을 읽어서 이 글을 내 생각과 함께 같이 정리해보려고 한다. 원문의 제목은 'Component Patterns in Next.js 13'인데, 이 글에서는 Next.js 13에 도입된 Server Component를 어떻게 사용하는 게 좋은 지에 대해 다루고 있다 Server Component? https://bysxx.tistory.com/18 먼저 Server Component에 대한 내용은 위 글에서 확인할 수 있는데, 간단히 요약하면 event handler나 hook과 같은 기능이 없는 컴포넌트를 개발할 때 사용할 수 있는 기능으로 번들 사이즈를 크게 줄일 수 있는데 이렇게 되면 UX에서 매우 중요한 요소인 초기 로딩 속도를 줄일 수 있게 된다. N..
9월 13일에 Next.js의 13.5 버전이 출시되었다. 사실 지금 13.5.4까지 나와있고 지금 다루기에는 조금 늦은 감이 있지만, 몇 주정도 토이 프로젝트에 적용해서 써보았는데 실제 체감되는 점도 좋은 정보가 될 수 있을 것 같아 바뀐 점과 함께 적어보려고 한다. 업데이트 방법 버전 업데이트를 위해서는 아래 커맨드를 입력하면 된다. npm i next@latest react@latest react-dom@latest eslint-config-next@latest 개발자 경험 향상 - 로컬 서버를 실행 속도 22% 향상 - HMR 속도 25% 향상 로컬 서버 속도 먼저 Next 13.5.4에서 로컬 서버 실행 속도를 체크해 보면 이 정도로 나오는데, 이전 버전에는 서버 실행 속도가 나오지 않지만 같은..
Next13(fetch, middleware)를 작성하던 중 Next 13.4 출시와 함께 App Router 안정화 버전 출시 소식이 들려왔다. 이와 함께 Turbopack은 Alpha -> Beta로 넘어왔고, Server Actions라는 개념이 새로 생겼다. App Router App Router에서는 바뀐 폴더 구조와 함께 Layout, Server Components, Streaming이라는 개념에 대한 이해가 필요하다. 아래 글들에서 App Router에서 이해가 필요한 내용에 대해 소개했기 때문에 아래 글에서 확인해 보면 될 것 같다 Layout, Server Components Streaming Turbopack (Alpha -> Beta) Turbopack에 대해 다뤄본 적이 없기 때문..
https://bysxx.tistory.com/18 Next13을 알아보자 - 1 (Nested Layout, Server Components) Next13에 적용된 내용을 정리하면 위와 같다. (흠 근데 패션도 그렇고 어디서 많이 본듯한데..?) 아무튼 핵심적인 변경 사항들을 같이 공부해 보며 하나씩 체크해 보자 Layout (Nested Layout) 가장 눈이 bysxx.tistory.com 이전 Layout, Server Components에 이어 Next13에 추가된 여러 가지 Feature들을 계속 적어보고자 한다. Streaming? 기존 SSR의 flow를 생각해보면 아래와 같다. 1. Server(API)로 부터 Data를 가져옴 2. Server(Next.js)에서 HTML을 렌더링 ..
Next13을 공부하며 기존 가지고 있던 템플릿 코드를 Next13으로 업데이트했습니다. Next13에 새로 도입된 기능, 문법들이 전부 적용되지는 않았지만 차차 적용시키고 예시도 추가할 예정입니다. Next를 어느 정도 알고 계시면 문제없이 사용하실 수 있지만 Next 자체가 꽤 난이도 있는 프레임워크이기 때문에 Next를 어느정도 숙지하신 상태에서 사용하시면 좋을 것 같습니다! 사용된 스택 Next13 TypeScript TailwindCSS Zustand React Query https://github.com/bysxx/next13-ts-template-tailwind GitHub - bysxx/next-ts-template-tailwind: Next + TypeScript Template Next..
Next13에 적용된 내용을 정리하면 위와 같다. (흠 근데 패션도 그렇고 어디서 많이 본듯한데..?) 아무튼 핵심적인 변경 사항들을 같이 공부해 보며 하나씩 체크해 보자 Layout (Nested Layout) 가장 눈이 가는 기능은 Layout이다. Next, Nuxt를 둘 다 사용해 본 개발자들은 아마 분명 Next의 Layout 방식이 아쉬울 것이라고 생각할 것 같다. 하지만 레이아웃 기능이 생기면서 UI 공유에 대한 고민으로부터 조금 자유로워질 수 있을 것 같다. export default function DashboardLayout({ children, // will be a page or nested layout }: { children: React.ReactNode, }) { return..
