[Next.js] 모던 리액트 Deep Dive _ next.js 톺아보기 ( 공식문서로 공부하자.. ㅎ )

Next.js 는 리액트 기반 서버 사이드 렌더링 프레임 워크다. 

-> 최초 페이지 렌더링이 서버에서 수행된다.

 

create-react-app 처럼 create-next-app이 지원된다.

타입스크립트 기반으로 작성할 것이기 때문에 아래 명령어로 프로젝트를 시작한다.

npx create-next-app@latest --ts

 

 

npm 프로젝트를 살펴볼 때는 package.json을 먼저 봐야한다.

프로젝트 구동에 필요한 모든 명령어 및 의존성이 포함되어 있으므로 프로젝트의 대략적인 모습을 확인하는 데 매우 유용하다!

 

그리고 eslint-config-next 파일은 Next.js 기반 프로젝트에서 사용하도록 만들어진 ESLint 설정이다. 꼭 사용하는 것을 추천한다고 한다. 핵심 웹 지표에 도움이 되는 규칙들이 내장되어 있다.

 

그 다음은 next.config.js 이다. 

Next.js 프로젝트의 환경 설정을 담당하며, Next.js 를 자유자재로 다루려면 반드시 알아야 하는 파일이다.

@type은 타입스크립트의 타입 도움을 받을 수 있다. 한번 해당 주석을 지워보고 차이점을 보자.

 

바벨 보다 빠르므로 특별한 이유가 없다면 SWC를 쓰는 것을 권장한다. 

 

app > page.tsx  ( 13이상 ) 

default export로 내보낸 함수는 애플리케이션의 전체 페이지의 시작점이다. 공통으로 설정해야 하는 것들은 여기에서 실행하자.

 

• public/ → 정적 파일
• styles/ → CSS 스타일
• next.config.js → 설정 파일

 

 

책으로 공부하다 느낀점:

음 최신 버전이 아니라 안맞는 것들이 좀 있다.. 특히 프론트는 변화가 빨라서 일단 실무에 적용할 땐 책보다는 공식 문서로 공부하는 게 좋을거 같다..! 그치만 책은 그 원리를 잘 담고 있어서 한번 공부해보는 건 정말 좋을 거 같다고 생각한다.

근데,,!! 지금은 그럴 여유가 없으니 책은 덮는걸로..ㅎ