개발

Next.js 공부

seo00000 2021. 7. 9. 16:44

Next.js란?

  • Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크

Next.js 제대로 알고 쓰자

 

Next.js의 특징

  1. 동적 경로 페이지
  2. pages/posts/[id].js → post/1 ...
  3. Pre-rendering, static generation(SSG) 와 server-side rendering(SSR) 페이지별 지원
  4. pre-rendering; 사전 렌더링 → 미리 HTML을 만드는 기능
  5. 더 빠른 페이지 로드를 위한 자동 코드 분할
  6. 최적화된 클라이언트 사이드 랜더링
  7. Built-in CSS(내장 css), Sass, CSS-in-JS 지원
  8. 개발 환경에서 빠른 새로고침 지원
  9. React 컴포넌트 편집에 대한 즉각적인 피드백을 제공 → 편집이 즉시 반영됨
  10. 서버리스 함수로 API 엔드포인드를 빌드하기 위한 API 경로(라우트)
  11. 완전히 확장 가능

 

Navigate Between Pages(페이지 간의 네비게이션)

Link(링크)

Next.js 에서는 a태그를 감싸는 Link 리액트 컴포넌트를 사용한다.

Link는 앱 내에서 다른 페이지로 클라이언트-사이드 네비게이션을 할 수 있게 허용해준다.

 

Code splitting and prefetching(코드 스플리팅과 프리페칭)

Code splitting: 각 페이지는 오직 그 페이지에 필요한 것들만을 불러온다.

prefetching: Link 컴포넌트가 등장할 때는 언제나 Next.js가 백그라운드에서 링크된 페이지를 위해 자동으로 코드를 프리페치한다. → 페이지 전환이 거의 즉시 이루어짐.

 

Assets, Metadata, and CSS(자산, 메타데이터, CSS)

Next.js 의 정적 Asset(자산) 사용법

최상위 public 디렉토리 하위에 이미지와 같은 정적 파일을 제공할 수 있음.

public/images/logo.png ⇒ /images/logo.png 로 사용 가능.

 

이미지 최적화

next/image 는 HTML <img> 요소의 확장으로 현대 웹을 위해 발전했다.

이미지 크기 조정 및 최적화가 단순하다.

 

Metadata(메타데이터)

<title> 태그와 같이 페이지의 메타 데이터를 수정하고 싶을 경우 next/head 모듈로부터 <Head> 컴포넌트를 import 해서 사용함

import Head from 'next/head';

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      …
    </>
  )
}

 

CSS Styling(CSS 스타일링)

CSS-in-JS

// styled-jsx 라이브러리를 사용한 예제

<style jsx>{`
  …
`}</style>
  • Next.js에는 styled-jsx에 대한 기본 지원이 있지만 styled-components 또는 emotion 과 같은 다른 인기있는 CSS-in-JS 라이브러리를 사용할 수도 있음.
  • Next.js는 내장 css에 대해 지원하며 .css, .scss 를 import 해서 사용 가능하다.

 

Layout Component(레이아웃 컴포넌트)

Layout Component 생성하기

  • 최상위 디렉토리에 components 폴더를 생성
  • 하위에 layout.js 파일을 만들고 아래와 같이 작성
// ************ javascript **************

function Layout({ children }) {
  return <div>{children}</div>
}

export default Layout;


// ************ typescript **************
import React, { ReactChildren, ReactChild, ReactFragment, ReactPortal } from 'react';

interface AuxProps {
    children: ReactChild | ReactChildren | ReactFragment | ReactPortal | boolean | null | undefined;
}

function Layout({ children }: AuxProps) {
    return <div>{children}</div>
}

export default Layout;

CSS 추가하기

  • components/layout.module.css 에 아래와 같이 작성
.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}
  • components/layout.js 파일 수정
import styles from './layout.module.css'

export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>}

 

Global Styles(전역 스타일)

Next.js 에서는, _app.js 로부터 글로벌 CSS 파일들을 가져와 추가할 수 있다. _app.js를 제외한 다른 곳에서 가져올 수 없다.

  • 최상위에 styles 디렉토리를 만들고, 안에 global.css 파일을 만들기
  • _app.js 에서 가져와 사용하기
import '../styles/global.css' 

export default function App({ Component, pageProps }) { 
  return <Component {...pageProps} /> 
}

 

기타 CSS 팁

polishing-layout | Next.jsstyling-tips | Next.js

 

Pre-rendering and Data Fetching(사전 렌더링과 데이터 가져오기)

Pre-rendering(사전 렌더링)

기본적으로 Next.js 는 모든 페이지를 사전 렌더링한다.

클라이언트 사이드 자바스크립트로 모든 작업을 하는 대신, Next.js가 HTML을 각 페이지들을 위해 미리 생성한다는 것

사전 렌더링의 결과로 더 나은 성능과 SEO(검색엔진 최적화)를 얻을 수 있다.

각 생성된 HTML은 페이지들에 필요한 최소한의 자바스크립트 코드와 연결된다. 페이지가 브라우저에 의해 로드될 때, 자바스크립트가 실행되고 완벽히 상호작용 가능한 페이지를 만들어낸다. (이 작업은 hydration 이라고 부른다.)

  • 자바스크립트의 실행 없이도 앱 UI를 볼 수 있게 해준다.

 

두가지 형태의 사전 렌더링

 

Static Generation(정적 생성)

  • 빌드 시 HTML을 생성하는 사전 렌더링 방법이다. 그런 다음 사전 렌더링 된 HTML은 각 요청에서 재사용된다.

 

Server-side Rendering(서버 사이드 렌더링)

  • 각 요청마다 HTML을 생성하는 사전 렌더링 방법이다.

 

개발 모드(npm run dev 또는 yarn dev 실행시)에서 모든 페이지는 정적 생성을 사용하는 페이지의 경우에도 각 요청에 대해 사전 렌더링된다.

 

❓ 언제 정적 생성을 사용해야 하고, 서버 사이드 렌더링을 사용하는지

가능하면 정적 생성(데이터 유무에 관계없이)을 사용하는 것을 추천

CDN 서버에서 페이지를 한 번 빌드하고 제공 할 수 있기 때문에, 매 요청마다 서버 사이드 렌더링을 사용하는 것 보다 훨씬 빠르다.

유저의 요청 전에 페이지를 미리 렌더링 할 수 있을까?

→ Yes 일 경우 정적 생성

→ No 일 경우 서버 사이드 렌더링

 

❗️ 'getStaticProps' 를 사용한 정적 생성과 데이터

Next.js 에서 페이지 컴포넌트를 내보낼 때, getStaticProps 라는 async 함수 또한 내보낼 수 있다.

  • 프로덕션에서 getStaticProps 는 빌드 시 실행된다.
  • 개발 모드에서 getStaticProps는 각 요청마다 실행된다.
  • 함수 안에 외부 데이터를 가져오고 페이지의 props로 전달할 수 있다.

📌 getStaticProps

→ 서버 사이드에서만 작동함. 외부 api 엔드포인트와의 통신이나 데이터베이스에 직접적으로 쿼리를 날리는 것이 가능.

이 페이지는 데이터 종속성을 가지고 있으니 이 페이지를 Pre-rendering(사전 렌더링) 할 때, 데이터부터 해결해야 한다.

Basic Features: Data Fetching | Next.js

 

Dynamic Routes(동적 라우트)

외부 데이터에 따른 페이지 경로

동적 경로를 사용하여 페이지를 정적으로 생성하는 방법

pages/posts/[id].js 와 같이 [,] 로 감싼 페이지 생성

Learn | Next.js

 

📌 getStaticPath

→ 빌드 시 정적으로 렌더링할 경로 설정. 여기서 정의하지 않은 하위 경로는 접근해도 화면이 뜨지 않는다.

동적라우팅 할 때, 라우팅되는 경우의 수를 하나하나 집어넣기

 

📌 getServerSideProps

→ 페이지가 요청받을 때마다 호출되어 pre-rendering(사전 렌더링) 한다.