Next.js 13을 쓰고 계신가요?
Next.js 13이 공개된지도 벌써 8개월이라는 시간이 지났는데요, 프론트엔드 개발자들 클럽 멤버분들은 Next.js 13, 그리고 App Directory 컨벤션을 쓰고 계신지 궁금해요.
Next.js 13
Next.js 13 introduces layouts, React Server Components, and streaming in the app directory, as well as Turbopack, an improved image component, and the brand new font component.
https://nextjs.org/blog/next-13
돌이켜보는 Next.js 13의 기능들
- app/ 디렉토리 (베타): 더 간편하고, 더욱 빠르며, 클라이언트 JS 사용량도 줄여줍니다. 레이아웃 기능 / 리액트 서버 컴포넌트 지원 /스트리밍 기능 등을 포함합니다.
- Turbopack (알파): 웹팩을 대체할 수 있는 Rust 기반 툴로, 웹팩보다 최대 700배 더 빠릅니다.
- 새로운 next/image (안정화): 웹 브라우저의 기본 지연 로딩 기능을 통해 이미지 로딩 속도가 개선되었습니다.
- 새로운 @next/font (베타): 레이아웃 이동 없이, 자체 호스팅 방식으로 구글 폰트를 쉽게 사용할 수 있습니다.
- 개선된 next/link: API가 단순화되었으며, 자동으로
<a>태그를 생성합니다.
저희 같은 경우 제품 웹 앱이 클라이언트 사이드 렌더링 기반의 React App이고, 백엔드 서버가 따로 존재해 아직까지 Next.js를 완전히 도입하지는 못했는데요, 마음 한 켠에는 유저가 체감하는 속도 측면에서나 내부적인 개발 편의성이 개선되지 않을까하는 생각이 있어요.
개인적으로 만들었던 여러 제품에서도 Next.js 12, 13을 활용했다보니 개발 편의성이 확실히 좋은 것 같다, 이런 생각도 있고요.
하지만 작업 공수 측면에서 이 Migration이 제품이 제공하게 될 유저 가치 측면에서 충분히 효과적인지는 아직까지 판단이 안됐어요. 아마 그렇게까지는 효과적이지 않을 것이다, 라는 게 현재까지의 결론인데요.
혹시 클라이언트 사이드 렌더링 -> 서버사이드 렌더링으로 이전해본 경험이 있으신지, 만약 있다면 작업 만큼의 효과가 있었는지. 그리고 Next.js을 사용해보셨다면 App Directory로 이전하면서 겪은 어려움은 있으신지 궁금해요.
아니면 아예 Next.js 자체를 사용하고 있지 않은지도 궁금해요!
댓글
로그인 후 댓글을 남길 수 있습니다.
Next.js 13버전을 사용하는게 아직은 이르다는 생각이 많이 듭니다. 조금더 참고할만한 사례가 있어야 할 것 같습니다. CSR -> SSR은 분명한 이유가 있어야 진행할 수 있을 거 같아요. 예를 들어, 검색엔진에 노출을 잘 하기 위해서라든지 처럼요 !
안녕하세요. 저도 next.js를 사용하고 있습니다. 반갑습니다 😀. 저는 현재 eletron용 next.js인 nextron.js를 사용하고 있습니다. nextron은 아직 next12까지 지원하고 있어서 13은 실무에서 써보지 못했습니다.. 저는 3년전에 cra로 작업된 프로젝트를 next.js로 마이그레이션하고 ssg(next export)로 사용하다가 검색노출이 필요한부분만 ssr로 변경했던 경험이 있습니다. cra에서 next.js로 마이그레이션할때는 고려사항이 react-router가 하던일을 파일라우팅이 한다는점만 인식하고 있으면 저는 큰 문제는 없었던 것 같습니다! 지금은 어느덧 편의목적으로도 next.js로 주로 작업하게 된 것 같아요. next.js에서 api역할도 녹여서 사용하고 있는데 아직은 만족스럽게 사용하고 있습니다!
좋은 경험 공유해주셔서 감사합니다 ! CRA 대비 Next.js가 확실히 라우팅 측면에서 편한게 있는거 같아요 ! 혹시 정적 페이지 작업 등도 고려해보신 적이 있을까요?
App layout 쓰려고 거의 백지서부터 재코딩했어요. 속도는 확실히 빨라요. local에서 체감을 더 많이 느껴요. Server component Suspense로 모듈 로딩 속이 다 시원해요. Chakra UI 라이브러리 썼는데 이걸 server component에서는 이제 못 쓰게 되서 tailwind CSS로 하느라 다시 다 코딩해야했어요. 만족해요. migration 한 2달은 걸린거 같아요.
저는 Next.js 를 쓰다가, 요즘은 Next.js 와 비슷한 SSR 프레임워크인 Remix 를 쓰고 있습니다! 재밌게 쓰고 있어요 ㅎㅎ
App Directory로 전환했다가, next-auth가 아직 지원하지 않아서 롤백했습니다. ㅠㅡㅠ
현재 정상적으로 App Router로 프로덕션 구현해서 사용중 입니다! 다른 분이 말씀 주신 것 처럼 기존에 마이그레이션 하는 경우면 아직 이르다고 생각하긴 하지만 새롭게 프로젝트를 진행하는 경우면 도전해봐도 되는 부분이 있는 것 같습니다. 이에 대해서도 Vercel 팀이 계속 명확하게 이슈 해결 중이고 빠르게 커뮤니티와 함께 가는 느낌이 크다고 생각이 드네요! 사례에 대해서도 아직은 명확한 사례가 없는 것은 사실이지만, 오히려 그런 사례를 만들어 가보는 건 어떨까? 하는 생각에 스타트를 걸었네요 ㅎㅎ