[Nextjs] Next로 프론트 공부(1) - 프로젝트 생성

들어가며

- Refutsal 프론트를 다시 분석하며 프론트 공부를 해보려고 한다.

---

이번목표

- 넥스트js 프로그램을 생성하고 yarn dev 를 통해 개발 웹을 띄워 본다.

---

Nextjs 란

- Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크이다

- 리액트에는 없는 서버 사이드 렌더링server-side rendering(SSR), 정적 사이트 생성static site generation(SSG), 증분 정적 재생성incremental static regeneration(ISR)과 같은 다양하고 풍부한 기능을 제공한다.

---

Nextjs 프로젝트 생성하기

- 다음 명령어로 npx 를 통해 프로젝트를 생성 한다.

$ npx create-next-app@latest

- "what is your project named?" 뒤에는 본인이 하고 싶은 프로젝트 이름을 적어 준다.

- 이름을 적지 않으면 my-app 으로 자동 생성 된다.

- 잘 생성 되면 다음처럼 Success! 가 뜬다.

---

기초적인 yarn 명령어

$ yarn dev
-> 개발 서버를 실행
$ yarn build
-> app 을 빌드
$ yarn start
-> app 을 빌드 하고 실행

---

실행 하기

- 생성한 프로젝트로 들어가 yarn install 을 실행 시켜 준다.

$ yarn install

- 그 후 yarn dev 로 dev 서버를 실행 한다.

$ yarn dev

- 터미널에 뜨는 url 주소를 통해 dev 웹 페이지에 접속 한다.