nextjs

사건의 발단이번에 진행한 사이드 프로젝트 '그돈이면'의 홈 화면에는 gif애니메이션이 들어가있다. 나는 당연히 Next에 내장된 Image 컴포넌트를 사용했고 별 다른 문제 없이 적용되었다 생각하며 넘어갔다.주변 지인에게 프로젝트를 소개하면서 홈 화면에 이미지가 늦게 뜬다는 피드백을 받았는데 확인해보니 gif에 Image 컴포넌트를 사용했음에도 불구하고 WebP 포맷으로 변환되어 있지 않았다.게다가 용량도 7.7MB라니... 굉장히 큰 사이즈의 이미지를 가져오고 있었다. _log.warnOnce(`The requested resource "${href}" is an animated image so it will not be optimized. Consider adding the "unoptimized" ..

NextJS로 블로그를 만들고 있는데 Tailwind CSS만으로는 전역 폰트 설정이 되지 않는 문제가 생겼다. 알고보니 Next에 기본적으로 폰트가 설정되어 있었고 css로 body에 폰트를 적용해도 덮어씌워지지 않았다. Next.js의 폰트 최적화에 대해 알아보고 동시에 전역 폰트 설정을 해보자. NextJS의 폰트 최적화NextJS에서는 기본적으로 next/font를 사용한 폰트 최적화 기능을 제공한다. npx create-next-app을 했을 때 기본 layout.tsx파일을 확인해보면 아래와 같이 설정되어 있다.import type { Metadata } from "next";import localFont from "next/font/local";import "./globals.css";con..

앱 최적화# 이미지 컴포넌트NextJS는 라는 특정 이미지 컴포넌트를 제공한다. 이미지는 웹 사이트 성능에 꽤 무거운 부분을 차지하기 때문에 이미지에 대한 부분만 최적화를 시켜도 페이지의 성능을 높일 수 있다. 이 컴포넌트의 역할은 로드된 이미지 파일의 사이즈나 포맷 형태를 자동으로 최적화 시켜주어 사이트 성능과 속도 향상에 도움을 준다. width / height 프로퍼티width와 height 속성은 컴포넌트에 반드시 들어가야 할 속성이다. 해당 이미지가 들어갈 적합한 공간을 미리 마련해 레이아웃 이동을 방지해야 하기 때문이다. 만약 로컬 파일에 있는 이미지를 사용한다면 src 속성에 import한 이미지의 .src를 제거하고 사용해야 Next가 logo의 width와 height 속성을 인식할 ..

Next.js 13버전부터 가장 크게 변화된 점은 Page Router ➡️ App Router로 변경된 라우팅 방식이다.App Router의 핵심 기능들에 대해 알아보자. Route 설정# 기본 구조Next.js 는 기존 Page Router 에서는 pages/의 하위에 route 경로를 설정하여 페이지를 구성했다면, 이번 App Router에서는 app/폴더 하위에 경로를 설정하여 페이지를 구성한다. 하위 파일명 또한 pages/파일명.js 또는 pages/폴더명/index.js로 route가 설정되었지만 App Router에서는 app/폴더명/page.js로만 사용할 수 있다. 만약 폴더 하위에 page.js파일이 없다면 route로 인식되지 않으니 해당 폴더명의 경로로 접근해도 페이지가 뜨지 않는..