글을 시작하기 전에, 공식 문서는 다음 링크를 참고하길 바란다.
https://nextjs.org/learn/dashboard-app/optimizing-fonts-images
App Router: Optimizing Fonts and Images | Next.js
Optimize fonts and images with the Next.js built-in components.
nextjs.org
(일단 이미지에 대한 부분을 먼저 작성하겠다.)
이미지를 넣는 방법.
Next.js에서는 이미지를 넣는 방법이 크게 2가지가 있다.
1. 그냥 <img/> 태그를 쓴다.
2. <Image/> 태그를 사용해서 이미지를 최적화한다.
1. 그냥 <img/> 태그를 쓴다.
public에 이미지 넣어두고, 필요한 페이지에 <img/> 태그를 써주면 된다.
<img src="/port1.png" alt="설명"/>/ 부터 시작해서 이미지 경로를 넣어주면 끝이다.
대신 jsx에서는 태그를 <img><img/> 혹은 <img/> 이런 식으로 태그를 닫아줘야 한다.
2. <Image/> 태그를 사용해서 이미지를 최적화한다.
성능과 속도가 중요한 이미지를 넣고 싶다면 <Image/> 태그를 사용하자.
import Image from 'next/image'
import 이미지 from './food0.png'
export default function Home() {
return(
<div>
<Image src={이미지} alt="설명"/>
<div/>
)}내가 가져오고 싶은 이미지를 "작명" 해주고, 관련 경로를 작성해서 import 해주면 된다.
이후 <Image/> 태그를 이용해서 src 부분에 "작명"된 이미지 이름을 작성, alt에 이미지 누락시 보일 설명을 작성하자. alt 부분은 SEO에 더욱 유리하게 작용한다.
(코딩 애플 관련 글)
https://codingapple.com/unit/nextjs-image/?id=68759
Next.js에서 이미지 넣는 법 2개 - 코딩애플 온라인 강좌
0:00 저번시간 숙제 2:05 이미지 넣는 법 4:00 최적화된 이미지 넣는 법 7:43 상품이미지 넣기 8:59 /cart 페이지 만들기 상품명 잘 보이게 해보라던 저번시간 숙제는 상품.map((a, i)=>{ return ( {a} $40 ) })
codingapple.com
폰트 최적화
Cumulative Layout Shift 은 웹사이트의 퍼포먼스와 유저 경험을 평가할 때 쓰이는 항목이다.
주 폰트 추가
import { Inter } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'] });/app에 ui 파일을 만들고 font.js를 만든다. (예시 코드는 위를 참고)
이후 body 태그 안에 넣어준다.
/app/layout.js
import '@/app/ui/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>
);
}layout.js가 전체적인 html의 틀을 기반으로 해주는 파일이라고 생각하면 된다.
Next.js 공식문서
(다시 링크 올린다.) 관련 공식 문서는 다음 링크를 참고하자.
https://nextjs.org/learn/dashboard-app/optimizing-fonts-images
App Router: Optimizing Fonts and Images | Next.js
Optimize fonts and images with the Next.js built-in components.
nextjs.org
'프론트 엔드 > Next.js' 카테고리의 다른 글
| Next.js의 데이터 베이스 세팅 (2) | 2025.03.16 |
|---|---|
| Next.js에서 페이지간 이동하는 방법 (0) | 2025.03.14 |
| Next.js의 레이아웃과 페이지 (0) | 2025.03.13 |
| Next.js에서의 css 스타일링 (0) | 2025.03.11 |
| Next.js 프로젝트 빌딩하는 법 (0) | 2025.03.10 |