➤ projectdiscovery➤ Remix➤ Rescript➤ Purescript➤ npm➤ Cloudflare➤ React➤ Next.js➤ GO➤ Hyper-V➤ Tibero➤ Git➤ Algorithms, 2020년
React 완벽 가이드 Next.js 파트 강의 노트
December 15, 2021Next.js란?
- 제작을 위한 리액트 프레임워크
- 풀스택 프레임워크
특징
- SSR
- 파일 기반 라우팅
준비
- Node.js 설치
npx create-next-app
CNA 기본 구조
- pages
- 파일 베이스 라우팅
- 루트 :
_app.js
- public
- 공용 자원
- 리액트랑 다르게 index.html 없다!
- Pre-rendering을 사용하기 때문
- html을 만들고 > js를 로드하는 방식
- styles
- 스타일
라우팅
- 파일 이름이 라우팅 경로
- /pages/news.js > exxample.com/news
- 중첩 경로는 폴더를 만들어서
- /pages/news/index.js > exxample.com/news
- /pages/news/item.js > exxample.com/news/item
- 동적 페이지
- 파일 또는 폴더 이름에
[]
신택스를 사용 useRouter
훅을 이용해 쿼리 가능
- 파일 또는 폴더 이름에
- 페이지 이동 시
Link
사용- 브라우저 기본 요청 보내는 것을 막고, SPA 에 머무르게 해줌.
- 즉, 페이지 이동 시 새로고침 X
프리 렌더링 방식 문제 해결
- useEffect와 setState로 데이터를 로딩 후 데이터를 렌더링하면 html에 데이터가 없어서 검색 엔진 최적화 문제
- Static Generation
getStaticeProps
사전 렌더링 프로세스동안 이 함수를 실행- 빌드할 때 데이터를 가져오기 때문에 데이터가 수정된다면 문제가 있음
revalidatae
설정을 해야함, 설정한 초 후에 페이지 다시 생성 정기적 업데이트getStaticePaths
를 사용해 빌드되어야할 동적 라우트들을 명시- 미리 명시할 수 없거나 누락된 페이지는
fallback: true
또는fallbackL'blocking'
으로 제어가능 true
는 빈페이지를 렌더링하고 동적으로 생성된 콘텐츠 풀다운blocking
은 페이지가 생성될 때까지 기다렸다가 완성된 페이지
- SSR
getserverSideProps
배포 후에 서버에서 실행- 모든 요청마다 실행
- auth등이 필요할 경우 사용하자
헤드 설정
next/head
사용
배포
- vercel 사용
- 깃 저장소 연동 가능