Nextjs

정적인 자원 사용하기 - public

이미지, robots.txt, favicon.ico와 같은 파일을 static asset라고 합니다. 이런 자원을 로딩하는 방법을 알아봅니다. 

소스코드

https://github.com/egoing/nextapp/commit/33d945cb882e2c164666e6ad967ce7edc8876acc

라이브 예제

https://nextapp-1hvcu2cwk-egoing.vercel.app/

절차

1. public 폴더에 이미지를 삽입합니다. 예제에서는 hello.png 입니다. 

2. app/page.js에서 /hello.png를 이용해서 사용합니다. 

export default function Home() {
  return (
    <>
    <h2>Welcome</h2>
    Hello, WEB
    <p><img src="/hello.png" width="80" alt="" /></p>
    </>
  )
}

 

댓글

댓글 본문
  1. public 폴더에 이미지 저장 후 출력!
  2. Hoon Ko
    20231018
  3. 딸기공방
    230912
  4. Hoon Ko
    20230905
  5. 김김김
    <img src="/hello.png" width="80" alt="" />에 노란 밑줄과 경고가 나오지만 img가 아닌 next.js에서 제공하는 Image를 쓰라는 권고이며 이와 상관없이 프로그램은 잘 작동 되니 일단 무시
  6. 어흥
    230813
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기