Next.js 이미지

MDX 내에서 Next.js Image (opens in a new tab)를 사용하는 표준 방법은 컴포넌트를 직접 가져오는 것입니다:

import Image from "next/image";
 
<Image src="/demo.png" alt="Hello" width={500} height={500} />

정적 이미지

💡

이 기능은 기본적으로 Nextra 구성에서 staticImage: true를 통해 활성화됩니다.

Nextra는 Markdown 구문으로 정적 이미지 가져오기를 자동으로 최적화하는 것을 지원합니다. 이미지의 너비와 높이를 지정할 필요 없이 ![]() Markdown 구문을 사용하면 됩니다:

index.mdx

![Hello](/demo.png)

이는 public 폴더 내의 demo.png 파일을 로드하고 자동으로 Next.js <Image>로 감쌉니다.

💡

public을 통해 호스팅하지 않으려면 ![](../public/demo.png)를 사용하여 상대 경로에서 이미지를 로드할 수도 있습니다.

Next.js 이미지를 사용하면 레이아웃 시프트가 없으며, 이미지를 로드할 때 기본적으로 아름다운 흐릿한 플레이스홀더가 표시됩니다:

Nextra