on
[Next.js] 프로젝트 초기설정
Next.js를 왜 쓰는가?
- SSR (Server Side Rendering) 구현 가능
- CSR대비
- 첫 페이지 로딩속도 개선
- 검색 노출 최적화 가능 (SEO)
- CSR대비
- 풀스텍 프레임워크 (Front+ Back)
-
리엑트 문법을 그대로 사용할 수 있다.
-
이외에도
-폴더기반 자동라우팅
- 새로디자인한 서버API 기능
- 쉬운 DB연결
- 직관적인 rendering 전략 선택기능
- hydration없는 server-side rendering
-
Hydration이란?
In web development, hydration or rehydration is a technique in which client-side JavaScript converts a static HTML web page, delivered either through static hosting or server-side rendering, into a dynamic web page by attaching event handlers to the HTML elements.
- 쉽게 말하면 SSR등으로 전달된 정적인 HTML에 JS를 통해 동적인 웹페이지로 바꾸는 스킬을 말한다.
- 파워풀한 캐싱
- 이미지와 폰트 최적화
- 와 같은 장점이 있다.
-
-
다만 단점도 존재한다.
- client component, server component을 구분해 코드를 짜면 프로젝트가 복잡해진다.
- WebSocket, WebRTC 기술을 쓰려고한다면 별도의 nodejs 서버를 구축하는게 나을 수 있다.
프로젝트 생성 방법
- node.js설치 후 명령어 실행
npx create-next-app@latest
- –experimantal app 옵션 설정시 시험적 기능 사용가능
-
선택 옵션 설명
-
TypeScript 사용유무
-
ESLint(문법 검수 라이브러리) 사용유무
-
Tailwind CSS (CSS 라이브러리) 사용유무
-
src/ dir 사용 설정
-
option 파일을 제외한 프로젝트 소스를 src로 한번 더 감싸는 옵션
-
취향에 따라 설정하면된다
-
-
App Router 사용 유무
- 서버와 통신하려면 필수로 설정해야 한다.
-
기본 import alias(임포트 별칭) 커스텀 사용유무
-
파일 설명
-
pages/
- index.js (Next13 - page.js)
- 메인 페이지
-
_document.js (Next13 - layout.js)
-
index.js를 감싸는 페이지
-
<head> 태그 상단바 메인 페이지 이외의 컴포넌트를 구성할때 사용
next14버전기준으로 Head내용이 Index.js에 작성되어있는 것으로 보아 반드시 해당페이지에 구성해야하는것은 아닌것으로 보인다.
-
- api/
- 서버 기능 만드는 위치
- index.js (Next13 - page.js)
- styles
- globals.css
- 모든 페이지에 적용할 css
- xxx.module.css
- xxx 페이지에만 적용할 css
- globals.css
- node_modules
- 프로젝트 구성 파일들 (건들일 없음)
- public
- 정적 파일들 보관용
- package.json
- 설치한 라이브러리 기록
- 터미널에서 쓸수있는 명령어 등
비고
- Logo를 직접 구성할 경우, 별도의 component파일로 관리하는게 좋다. (재사용 할 수 있도록)
- Reuseable component에서는 export default를 쓰지말자