[Next.js App Router] CSS, 폰트 및 이미지 최적화
1
[Chapter 2] CSS Styling
/app/ui디렉토리에global.css파일을 추가해서 글로벌 스타일을 적용할 수 있다.- Tailwind와 CSS Modules를 이용해서 스타일링한다.
clsx라이브러리를 이용해 조건부 스타일링을 적용할 수 있다.
[Chapter 3] Optimizing Fonts and Images
next/font로 폰트 최적화하기
next/font는 폰트 파일을 빌드 타임에 다운로드해서 static assets로 호스팅한다.- 따라서 폰트 파일을 위해 네트워크 요청을 할 필요가 없기 때문에 CLS(Cumulative Layout Shift)를 방지하여 폰트를 최적화 할 수 있다.
next/font로 구글 폰트 적용하기
// /app/ui/fonts.ts
import { Inter } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'] });// /app/layout.tsx
import './global.css';
import { inter } from '@/app/ui/fonts';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body>
</html>
);
}- 구글 폰트를 import하여
body태그에className을 지정하는 방식으로 모든 웹페이지에 폰트를 적용할 수 있다.
Image 컴포넌트로 이미지 최적화하기
Next.js의 Image 컴포넌트는 다음의 항목들을 자동으로 최적화한다.
- 이미지가 로딩되는 동안 layout shift를 방지한다.
- viewport에 따라 이미지의 크기를 조정한다.
- Lazy loading를 기본적으로 제공한다. (사용자의 viewport에 들어왔을 때 이미지가 로드된다.
- WebP, AVIF와 같은 포맷으로 이미지를 제공한다.
데스크탑/모바일에 따라 다른 이미지 렌더링하기
import Image from 'next/image';
export default function Page() {
return (
// ...
<Image
src="/hero-desktop.png"
width={1000}
height={760}
className="hidden md:block"
alt="Screenshots of the dashboard project showing desktop and mobile versions"
/>
<Image
src="/hero-mobile.png"
width={560}
height={620}
className="block md:hidden"
alt="Screenshots of the dashboard project showing desktop and mobile versions"
/>
//...
);
}className속성을 이용해서 데스크탑 이미지의 경우 기본값을display: none으로 하고 768px 이상일 때만 이미지를 보여준다.- 모바일 이미지는 반대로 기본적으로 이미지를 보여주고, 768px 이상일 때는 이미지를
display: none으로 보이지 않도록 한다.
Small Steps make a Big Difference.🚶🏻♀️