[드림코딩엘리] Next.js 환경설정

개발환경 Set Up

리액트 개발 환경과 동일하다

vscode(코드에디터) + node.js + git + yarn or npm

 

공식사이트도 한번보고 꼭 북마크 해야할 페이지를 봅시다

공식사이트 가서 홍보하고 있는 글도 한번 읽어보면서 메리트가 뭔지 알아보고 어떻게 접근하면 좋을지 알아보자

리액트를 기반으로 풀스택 웹앱을 만들기 위해 사용할 수 있는 프레임워크임

강력한 라우팅과 레이아웃고 제공해주고

복잡한 인터페이스를 만들어도 사용자에게 전달하는 자바스크립트의 양은 최소화 할 수 있고 

폰트와 이미지에 대한 최적화 지원

리액트 최신버전에 추가된 서버컴포넌트를 이용해서 서버위주로 만들 수 있고 

동적으로 html을 스트리밍할 수도 있다??

 

 어쨋든 풀스택하는데 간편하다 빠르게 강력한 웹을 만들 수 있고 사용자가 빠르게 볼 수 있고 그냥 자체가 빠르고 빠르고빠르고빠르고

 

csr isr 라우팅 중첩라우팅 가능(file-router) 서버컴포넌트 서스펜트 데이터 패칭을 클라이언트와 서버 모두 할 수 있다 이미지폰트 스크립 최적화 내장되있고 타입스크립트 지원하고 api라우트까지 지원 미들웨어도 사용할 수 있고 다양한 css 지원

 

넥스트 공홈을 잘 보면 깊이는 아니지만 충분히 잘 알 수 있고 doc에는 좀 더 자세하게 내용이 나와있다

 

첫프로젝트 한번해보자

추가된 다양한 것 

file-system을 기반으로 한라우팅 

랜더링할 때 조금 더 강략한 렌더링이 가능하다 csr도 되고 ssr도 되고

데이터 페칭과 캐싱 방식이 강력해지고 최적화가 더 좋아졌고 자동 번들링 api는 page안에 정의 터보팩 추가 하지만 웹팩 사용할것임

 

isntallation 에서 확인을 하고 시작을 해보자

cna 

 

package.json에 script 내용을 보자 dev 개발할 때 시작한다(개발용 모듈)  build 서버에 배포한 뒤 프로젝트를 빌드할 때 사용  start 서버에 배포한 뒤 빌드 후 실행할때 사용  lint 프로젝트 소스코드를 검사할 때 사용(EsLint extention 설치하기)

 

dev로 시작하면 빌드를 거치지 않고 바로 dev로 실행되기 때문에 미리 만들어 놓은 html이 없다 그래서 ssr 처럼 행동을 한다 그러다가 실제 배포를 하고 난 뒤 어떻게 실행하는지가 궁금할때 build를 실행하고 스타트를 해주면 된다

 

 

실행하면서 리액트와 넥스트의 차이점을 알아보자

 

쇼케이스 살펴보기