이미지, 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를 이용해서 사용합니다.
1 2 3 4 5 6 7 8 9 | export default function Home() { return ( <> <h2>Welcome</h2> Hello, WEB <p><img src="/hello.png" width="80" alt="" /></p> </> )} |
