[Next.js]Map 표시 Website 만들기 - 1

Langara College 졸업 후, 어떤 것을 만들어 볼까 고민하던 중 밴쿠버로 이주하고 싶은 사람들을 위한

Vancouver houce searching page를 만들기로 정했다.

 

먼저 플랫폼을 고민하던 중 처음 해보는 Next.js를 이용해 보기로 결정!

 

처음 배우는 것이니 기본 app을 만드는 것부터 시작.

npx create-next-app@latest --typescript

여기서 @latest는 가장 최근 버전으로 만든다는 것이고, --typescript는 typescript를 적용한다는 것이다.

 

일단 typescript는 적용하지 않고 만들어봤다.

 

프로젝트가 생성되었으면 code nextapp을 입력하여 VS Code로 프로젝트를 연다.

프로젝트가 정상적으로 생성되었는지 확인하기 위해 VS Code terminal에서 아래 명령어를 실행한다.

npm run dev

 

정상적으로 실행되었다. 아래와 같이 http://localhost:3000 에 정상적으로 보여진다.

기본 화면을 띄워봤으니 기초작업은 여기서 완료!