[ Next.js 공부하기 ] 1. Intro ( 프로젝트 생성 및 실행해보자 )

마지막 취업 전 포트폴리오에 공을 들이기 위한 준비를 한다.

바로 Next.js를 배우는 것.

 

Next.js를 배우면서, SSR이 무엇인지, SSR의 장점이 무엇인지 이런 것들을 한 번 공부해보면서 포트폴리오에 적용을 해볼 것이다.

 

작업환경 : Mac OS

---

1. Next.js 프로젝트 생성하기

- 일단 터미널을 켜주고, 나는 바탕화면에 폴더를 만들 예정이기 때문에, cd desktop을 입력해서, desktop을 현재 가리키게 하고

처음부터 자바스크립트가 아닌 타입스크립트 환경에 맞춰서 공부를 했기 때문에, 타입스크립트로 만들 것이다. 밑에처럼 명령어를 입력해주자.

npx create-next-app@latest --typescript

그럼 프로젝트 이름이 어떻게 되는 지를 물어보는데, 입력을 하면 된다. 이게 React.js와 첫 번째 차이점인 것 같다. ( 물론 중요하진 않다. )

 

2. 실행해보기

- vsCode로 프로젝트를 열어보면 pages, public, styles 등등의 폴더들이 있고 react.js와는 다르게, src 폴더가 보이질 않는다.

그리고 Command + J를 눌러서 터미널을 열어준 뒤, npm run dev를 입력하면 react.js 처럼 스스로 브라우저를 열어주진 않는다.

보통 http://localhost:3000 으로 url을 만들어주기 때문에, 저 url을 크롬 브라우저에 입력하면 실행이 된다.