Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다.
Next.js 앱이 제공할 Static 파일들은 프로젝트 폴더의
public 폴더에 둬야 한다. Next.js는 public 폴더에 존재하는 모든 파일들을 Base URL(/)을 통해 접근할 수 있도록 하기 때문이다. 예를 들어, public/me.png 파일은 코드 내에서 /me.png URL을 통해 접근하도록 할 수 있다.public 폴더는 robots.txt, favicon.ico 등의 다른 정적 파일들에도 유용하다.public 폴더에 존재하는 파일의 이름과 pages 폴더에 존재하는 파일의 이름은 같지 않도록 해야 한다. 그렇지 않으면 충돌에 의한 에러가 발생할 것이다. 또한, 여기서 설명한 내용은 빌드를 하는 시점에 public 폴더에 있는 파일들만 적용된다. 즉, 런타임에 public 폴더에 동적으로 추가되는 파일들은 적용되지 않는다. 만약 영구적이고 지속적인 파일 스토리지를 사용하고 싶다면, AWS S3와 같은 서드 파티 서비스를 사용하는 것을 권장한다.Next.js가 제공하는
Image 컴포넌트는 <image> 태그의 확장판으로, 이미지 최적화 등의 기능을 내장하고 있다. 그러나 Next.js가 제공하는 이러한 최적화 등의 기능을 굳이 사용하지 않아도 된다면 <image> 태그를 그대로 사용하면 된다.