Next.js 블로그에 이미지와 비디오 추가하기

·임성혁

블로그 게시글에 이미지와 비디오를 추가하는 방법을 알아보겠습니다. 이 게시글은 새로 추가된 이미지 및 비디오 기능을 테스트하기 위한 예시입니다.

마크다운 구문을 사용하여 이미지를 추가할 수 있습니다:

Next.js 로고
Next.js 로고

Next.js의 최적화된 Image 컴포넌트를 사용하여 이미지를 추가할 수 있습니다:

React 로고
React 로고

외부 URL의 이미지도 사용할 수 있습니다:

코딩하는 이미지
코딩하는 이미지

YouTube 비디오를 쉽게 삽입할 수 있습니다:

Stanford CS230: Deep Learning | Autumn 2018 | Lecture 1 - Class Introduction & Logistics, Andrew Ng

동일한 이미지를 다양한 크기와 스타일로 사용할 수 있습니다:

Next.js 로고 (작은 크기)
Next.js 로고 (작은 크기)

Next.js 로고 (중간 크기)
Next.js 로고 (중간 크기)

Next.js 로고 (큰 크기)
Next.js 로고 (큰 크기)

세 개의 이미지를 나란히 배치하는 예시입니다:

Next.js 로고
Next.js 로고
React 로고
React 로고
코드 에디터
코드 에디터

이제 블로그 게시글에 이미지와 비디오를 쉽게 추가할 수 있습니다. 이 기능을 사용하면 콘텐츠를 더욱 풍부하고 시각적으로 만들 수 있습니다.

기술 블로그를 운영하시는 분들에게 특히 유용한 기능이니, 적극 활용해 보세요!