요즘뭐보니 2

Image 컴포넌트의 src에 문자열 경로를 지정했을 때 이미지가 뜨지 않는 이슈

지난주 next.js로 토이 프로젝트를 배포하고 작성했던 포스팅에서 Image 컴포넌트의 src에 문자열 경로를 지정하는 경우 이미지 엑박이 뜨고, StaticImageData로 바꿨을 때는 정상적으로 이미지가 뜨는 원인을 알았다. 원인을 파악하기에 앞서 StaticImageData를 콘솔에 찍어보니 다음과 같은 객체를 볼 수 있었다.  import HeroImage from '/public/hero_256x256.png';export default function Home() { console.log(HeroImage); return ( );}// HeroImage 객체{ src: '/_next/static/media/hero_256x256.0d595165.png', height: ..

next.js로 만든 토이 프로젝트 배포

next.js 예제와 강의를 보며 틈틈이 만들었던 프로젝트를 이번 주말 배포했다. 나중에 내가 볼 요량으로 배포하면서 알게 된 것들 몇 가지 간단하게 정리해본다.  Vercel Postgresvercel로 배포했고, DB도 vercel postgres를 사용했다. 무료 플랜으로 1개의 DB를 제공하고 있다. 처음 DB를 생성하고 프로젝트와 연결할 때 총 6개의 region 중에 하나를 골라야 한다. 아시아 지역은 싱가폴이 유일해서 Singapore를 선택했다. region은 한 번 선택하면 그 이후에 변경이 안 되기 때문에 유의해야 한다. We recommend choosing the same region as your Serverless and Edge Functions for the fastest r..