-
[드림코딩엘리] Next.js 환경설정프로그래밍/Next.js 2023. 8. 1. 11:25
개발환경 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를 실행하고 스타트를 해주면 된다
실행하면서 리액트와 넥스트의 차이점을 알아보자
쇼케이스 살펴보기
'프로그래밍 > Next.js' 카테고리의 다른 글
[Next.js] Jest + Typescript + Next.js (0) 2023.12.07 [Next.js] 패키지 가져오기 최적화 (0) 2023.12.05 [드림코딩엘리] Next.js 주요개념 (2강) (0) 2023.08.01