Self-Study/React

[React] Next.js의 기본 개념

Raadian 2022. 10. 6. 17:24

References

https://nextjs.org/

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>컴포넌트를 통해 설정할 수 있다.