Next.js

Next.js14를 기준으로 App router와 Pages router를 각각 CSR/SSR/SSG/ISR을 구현해 봤다.왜 굳이 둘 다 한 거죠...?라고 한다면 처음에는 App router로 구현하여 동작과정을 확인하려고 했다. 하지만 내 예상과 다르게 동작해 둘 다 구현했다.실제로 둘 다 구현해 보니... 차이점이 있었다!구현에 사용한 예시는 API에서 시간을 받아와 화면에 보여주는 페이지이다. CSR (Client Side Rendering)사용자가 페이지에 진입할 때, 서버로부터 빈 HTML을 받아오고 이후 브라우저에서 JS를 통해 필요한 데이터를 API로 받아와 화면을 그린다. 즉, 초기 로딩 시에는 빈 화면이 나타나고 JS가 실행되고 데이터가 로드된 후에 콘텐츠가 나타난다.예시 코드impo..

내가 만든 foliohub 서비스 프론트는 현재 vercel에 배포되어 있다.왜 vercel에 배포했는가?하면배포가 간단하고 무료 플랜정도면 충분히 내 서비스를 운영할 수 있었기 때문이다.Next.js의 SSR, 이미지 최적화 등 다양한 기능을 지원하고 있었기 때문에 vercel에 배포했다.  아래와 같은 말을 듣게 되어 의문이 들었다...vercel은 서버리스 방식으로 cold start가 있어 EC2에 비해 5배 정도 느리다. 배포 방식만 다른 게 아니라 실행 방식도 달랐던 거야?!cold start 때문에 EC2에 비해 느리다고?! 이 의문을 해결하기 위해 같은 프로젝트를 vercel과 EC2에 각각 배포해서 비교해 보기로 했다.이번 글에서는 Next.js 프로젝트를 EC2에 배포하는 과정을 담았..

🚨 경고 발생 Image with src "~~" has "fill" but is missing "sizes" prop. Please add it to improve page performance. Read more: https://nextjs.org/docs/api-reference/next/image#sizes 🤔 원인 해당 링크로 들어가 보니 내용은 다음과 같았다. sizes의 값은 fill을 사용하는 이미지나 반응형 크기를 가진 이미지에 대한 성능에 큰 영향을 미친다. "fill" 속성이 있는 이미지에 "sizes"값을 지정하지 않으면 기본값으로 100vw가 사용된다. 이게 무슨 뜻인지 좀 더 찾아봤는데 fill 속성을 사용한 이미지의 경우 이미지가 전체 뷰포트를 채우도록 확장되어야 한다는 것을 ..

오늘은 Next.js에서 이미지를 사용하는 방법에 대해서 알아보겠다. 이 글은 Next.js 14를 기준으로 작성되었다. 이미지 최적화 전략 이미지를 최적화하기 위한 전략에는 아래와 같이 다양한 방법이 있다. png, jpeg 형식보다는 webp, avif 형식의 이미지 파일 사용하기 이미지 Lazy Loading 처리하기 디바이스 크기에 알맞은 이미지 크기로 리사이징 이미지 캐싱하기 이러한 작업을 Next.js에서 해주고 있는데 어떻게 적용할 수 있는지 알아보겠다! 1. webp로 변환 next/image는 png, jpeg 등 형식을 webp로 변환해 이미지 용량을 줄여준다. webp보다 2019년에 만들어진 avif가 여러 형식(jpeg, webp) 보다 훨씬 더 좋은 무손실 압축과 고품질을 자랑한..

Next.js에서는 아래와 같은 NotFound 페이지를 기본적으로 제공한다. NotFound 페이지는 사용자가 존재하지 않는 url에 진입 시 나타나는 페이지로, 사용자의 이탈을 막고 정상적인 페이지로 유도하기 위해 이를 적절하게 활용하는 것이 사용자 경험에 도움이 된다. Next.js에서 NotFound와 Error 페이지를 간단하게 커스텀 할 수 있는데 이번 글에서는 이를 다루는 방법에 대해서 알아보겠다! NotFound 페이지 나의 경우엔 - 없는 페이지 경로로 진입 시 - 존재하지 않는 username로 포트폴리오 상세 페이지(/[username]) 진입 시 두가지 경우에 NotFound 처리가 필요했다. not-found.tsx 생성하기 간단하게 에러문구와 메인으로 돌아갈 수 있는 버튼을 추가..