Next.js

두 차례 성능 최적화를 진행하고 측정했던 성능 점수입니다. 지난 이야기... 👇 [Next.js] 페이지 성능 개선하기 2 - 번들 사이즈 개선, Tree Shaking 지난 시간에 측정했던 성능 점수입니다. (모바일 기준) 지난 시간에 성능 개선을 시도했던 흔적 👇 [Next.js] 페이지 성능 개선하기 1 - Next/image, CSS 프리로드 최근 들어 성능 최적화에 대한 고민을 cheolsker.tistory.com 이번 포스팅으로 이번 시리즈(?)를 마무리해볼까 합니다. 배너 이미지(LCP)가 늦게 렌더링 되는 원인은 API 호출 후, 이미지 링크를 받아오기 때문인데요. 이 API를 사전에 호출하면 LCP를 개선해볼 수 있을 것 같습니다. 이 프로젝트는 React-Query를 사용하고 있고, ..

지난 시간에 측정했던 성능 점수입니다. (모바일 기준) 지난 시간에 성능 개선을 시도했던 흔적 👇 [Next.js] 페이지 성능 개선하기 1 - Next/image, CSS 프리로드 최근 들어 성능 최적화에 대한 고민을 많이 해보고 싶어서, 성능 최적화를 해봐야 겠다는 생각이 들었습니다. 예전에 진행했던 프로젝트 중 하나가, Lighthouse 점수가 낮게 나와서 몇 가지 개선을 cheolsker.tistory.com 번들 사이즈를 개선할 필요가 있을 것 같습니다. @next/bundle-analyzer를 설치하고, next.config.js에 적용하였습니다. @next/bundle-analyzer 설치 // 터미널에서 설치 yarn add -D @next/bundle-analyzer 또는 pnpm a..

최근 들어 성능 최적화에 대한 고민을 많이 해보고 싶어서, 성능 최적화를 해봐야 겠다는 생각이 들었습니다. 예전에 진행했던 프로젝트 중 하나가, Lighthouse 점수가 낮게 나와서 몇 가지 개선을 통해 성능 개선을 하려고 합니다. 이 프로젝트는 Next 12 버전을 이용하여 개발되었고, HTTP/2 프로토콜을 사용하고 있습니다. 앱 서비스이기 때문에, Lighthouse에서 모바일 기준으로 성능 검사를 진행하였습니다. Lighthouse를 이용한 성능 점수 확인 이 페이지는 이미지가 굉장히 많습니다. 상단에 배너 슬라이드를 통해 여러 개의 이미지가 보여지고, 뷰포트 아래에도 섹션별로 많은 이미지를 로드합니다. LCP도 무려 15.8초가 걸립니다.. 일단은 이미지 로드에 대한 개선이 확실히 필요할 것 ..

개요 서비스를 운영하다 보면, 로그를 쌓을 일이 많이 생길 텐데요. 페이지별 로그도 쌓아야 하는 경우가 생깁니다. Next.js에서는 Custom App 페이지를 (_app.jsx 또는 _app.tsx) 제공하고 있는데요. Custom App 페이지에서 페이지에 공통적으로 사용할 로직을 적용할 수 있습니다. Next.js에서 제공하는 router를 통해 URL pathname을 파악할 수 있는데요. 페이지 path를 파일로 관리하여 router pathname과 비교하면, 어떤 페이지인지 알아낼 수 있습니다. 프로젝트 구조 예시 페이지 & 페이지 pathname 메인 : /main 메인 상세 : /main/[idx] About : /about 페이지 파일 생성 (pages.ts) // @/constan..

import dynamic from 'next/dynamic'; import { Suspense } from 'react'; const LazyComponent = dynamic( () => import('@/components/LazyComponent') ); export default function MainPage() { return ( ); } 위와 같이 Next.js에서 제공하는 dynamic(Dynamic Import)을 이용하면, 컴포넌트를 지연 로딩할 수 있어서 Suspense와 같이 사용하려고 했었는데요. 계속 테스트를 진행해도, Suspense의 fallback 컴포넌트가 보이질 않았습니다... next/dynamic is a composite extension of React.lazy..

( 23. 07. 04 추가 수정 ) Recoil 0.7.6 버전 이후로 환경변수를 추가하면, Duplicate atom key 이슈를 해결할 수 있습니다. .env* 파일에 아래 환경 변수를 추가해주시면 해결됩니다 ! RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false (아래 부분으로도 해결가능하겠지만, Deprecated된 해결방법이라고 보시면 됩니다.) Next.js 개발환경에서 Recoil을 사용하다 보면 Next.js 서버에 다음과 같은 에러가 콘솔로 찍히는 것을 볼 수 있습니다. Duplicate atom key "KEY 이름". This is a FATAL ERROR in production. But it is safe to ignore this warni..

프로젝트를 만들고 개발을 진행하다 보면, 파일이 점진적으로 늘어나면서, 폴더 구조를 어떻게 잡아야 하는 지에 대한 고민이 생기곤 합니다. 작은 프로젝트면 폴더 구조를 바로바로 바꿀 수도 있지만, 규모가 어느 정도 커지면 폴더 구조를 변경하기 어렵게 됩니다. 여러 프로젝트를 진행하면서, 저는 나름대로 폴더 구조를 다음과 같이 구성해야 겠다고 결정을 했습니다. 아래는 VSCODE 에디터에 캡쳐한 사진입니다. - apis - components - constants - containers - fixtures - hooks - interfaces - pages - public - slices - styles - utils apis API 들을 모아 놓은 폴더입니다. 타입스크립트를 사용한다면, *.ts 형태의 ..

Next.js 애플리케이션은 Node.js 기반의 서버에서 동작하며, SSR을 제공해주는 SPA이기도 합니다. Next.js 서버는 프론트엔드 환경을 제공해주는 서버입니다. 기본적인 시나리오는 다음과 같습니다. Next.js 서버 > 서버가 실행중이고 대기중인 상태이다. 클라이언트 > 서버에 페이지를 요청한다. Next.js 서버 > 첫 페이지 요청 시, pre-rendering된 HTML을 전달한다. HTML과 더불어 자바스크립트 번들 파일을 전달한다. 클라이언트 > 브라우저에서 HTML을 해석해서 페이지를 렌더링한다. 자바스크립트 파일이 로드되기 전까지는 페이지만 보여지고, 사용자는 인터렉션할 수 없다. 클라이언트 > 첫 페이지를 렌더링한 상태에서, 사용자가 두 번째 페이지로 이동한다. 클라이언트 ..