[React] Next.js의 기본 개념
References
https://kyounghwan01.github.io/blog/React/next/basic/
Next.js의 정의
React를 이용한 SSR(Server Side Rendering) 프레임워크로 클라이언트 리소스 부담 절감 및 SEO(검색 엔진 최적화)를 목적으로 개발되었다.
Next.js의 장점
hot reloading
별도의 새로 고침 기능 없이 소스 코드 저장시 자동 반영된다.
단, Async/Await 같은 비동기 함수의 경우에는 별도로 새로고침이 필요하다.
automatic routing
기존 React의 라우팅의 경우 별도로 경로 지정 및 명칭을 지정해야했다.
반면, Next.js의 경우 이러한 과정 없이 프로젝트 폴더 내 /pages 폴더내에 JSX 파일명만 지정해주면 라우팅을 바로 이용할 수 있다.
단, 접근 제어가 필요한 페이지는 별도로 구현해야 한다.
single file components
style jsx 를 통해 해당 컴포넌트만 스코프를 가지는 css 처리가 가능하다.
이때, global 키워드를 추가하면 전역적으로 처리가 되는데 _app.jsx 파일에서만 적용 가능하니 주의!
code splitting
dynamic import를 통해 코드 스플리팅*이 가능하다.
코드 스플리팅 : 원하는 페이지 내에서만 특정 자바스크립트 라이브러리를 렌더링 하는 기능으로 이때, 리소스를 절약할 수 있다.
typescript
TypeScript가 지원되기 때문에 별도의 Webpack 및 Babel 설정 과정 필요없이 설치만 하면 바로 이용할 수 있다.
sass
sass가 지원되기 때문에 별도의 세팅과정 없이 설치만 하면 바로 이용할 수 있다.
prefetching
백그라운드에서 페이지를 미리 가져오는 시스템으로, 기존 보다 더 빠른 데이터 변경이 가능하다.
Next.js의 주요 파일 및 기능
_document.jsx
meta 태그 정의 및 전체 페이지를 관리 하는 컴포넌트 파일이다.
_app.jsx
next.js가 최초로 실행되는 파일로, 모든 페이지의 렌더링 값에 영향을 준다.
import style component
jsx / js 파일 내에 정의된 CSS파일을 바로 불러올 수 있는 기능으로 모듈을 통한 기능 재활용이 가능하다.
import styles from "./sample.module.css";
...
<div className={styles.fontred}></div>
...
Link
<a>태그가 아닌 <Link>태그를 통해 라우팅을 이용한다.
<Link href="/video">Video</Link>
// 동적 url의 경우 대괄호([])를 이용한다
<Link href="/video/[uid]">Video</Link>
getInitialProps()
기존 React에서 사용되는 useEffect와 같이 서버 사이드에 필요한 데이터를 사전에 불러오는 기능이다.
단, 데이터를 미리 렌더링 할 필요가 없는 경우 기존 useEffect를 사용한다.
export async function getStaticProps() {
const res = await fetch("https://.../posts");
const posts = await res.json();
// By returning { props: posts }, the Blog component
// will receive `posts` as a prop at build time
return {
props: {
posts
}
};
}
/**
getStaticPatch : 빌드시 정적으로 렌더링할 경로 설정
getServerSideProps : 각 요청에 따른 서버 데이터 호출
*/
custom 태그를 통한 head 태그 설정
<head>태그에 있는 title 및 icon 변경 등, <Head>컴포넌트를 통해 설정할 수 있다.