Next.js - 정적 파일 사용하기

next에서는 프로젝트 루트 경로의 public 폴더를 사용하여 정적 파일을 제공할 수 있습니다. CNA로 프로젝트를 생성하면 public 폴더에 favicon.ico 파일이 있는데 이를 출력해 보도록 하겠습니다.

// index.js

const App = () => {
  return (
    <div>
      <img src="/favicon.ico" alt="favicon" />
    </div>
  );
};

export default App;

• public 폴더 안에 있는 파일을 클라이언트에서 경로를 통해 사용할 수 있습니다.
• public를 제외한 /favicon.ico를 경로로 사용하면 됩니다.
• public 폴더를 이용하게 되면 브라우저에서 네트워크를 통하여 이미지를 불러오게 됩니다.
• 이미지 파일 이외에도 font, manifest.json, robots.txt, favicon.ico 등의 정적 파일을 제공할 때에도 유용하게 사용됩니다.