NextJS 란?

이철호·2023년 6월 15일

소개

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(Static Site Generation, SSG)과 같은 고급 기능을 제공합니다.
이를 통해 개발자들은 좀 더 효율적이고 성능이 우수한 웹 애플리케이션을 만들 수 있습니다.

기본 문법

Next.js는 React와 거의 유사한 문법을 사용합니다. React 컴포넌트를 정의하는 방식과 동일하게 작성할 수 있으며, 특정한 파일 구조와 규칙을 따릅니다. 예를 들어, pages 폴더에 작성한 파일은 해당 경로로 접근할 때의 페이지 컴포넌트가 됩니다.

이와 같이 파일을 설정하게 되면

http://localhost:3000/home
http://localhost:3000/news
http://localhost:3000/news/id
이렇게 세개의 페이지가 생성되고 []를 붙여주게 되면 동적으로 페이지 파라미터를 설정할수 있습니다.

사용 이유

서버 사이드 렌더링(SSR)
- Next.js는 서버에서 페이지를 렌더링하여 초기 로딩 속도를 향상시킵니다. 이는 검색 엔진 최적화(SEO)를 향상시키고 사용자 경험을 향상시킵니다.
정적 사이트 생성(Static Site Generation, SSG)
- Next.js는 사전에 페이지를 미리 렌더링하여 정적 파일로 생성할 수 있습니다. 이를 통해 더 빠른 페이지 로딩 및 서버 부하 감소를 이룰 수 있습니다.
개발 생산성 향상
- Next.js는 코드 스플리팅, 자동 번들링, 핫 모듈 교체(Hot Module Replacement, HMR) 등의 개발 툴을 내장하고 있어 개발 생산성을 향상시킵니다.

코드 스플리팅

코드 스플리팅은 애플리케이션의 JavaScript 번들을 작은 조각으로 분할하는 기술입니다.
사용자가 애플리케이션을 방문할 때 필요한 최소한의 코드만 로드하고, 필요한 경우에만 추가 코드를 동적으로 로드할 수 있습니다.
초기 로딩 시간을 단축하고 페이지 간의 전환 속도를 향상시킬 수 있습니다.

자동 번들링

자동 번들링은 Next.js에서 제공하는 기능으로, 개발자가 별도의 설정 없이 자동으로 번들링된 JavaScript 파일을 생성합니다.
개발자는 복잡한 설정 없이도 모듈 시스템을 사용하여 애플리케이션을 구성할 수 있습니다.

핫 모듈 교체

핫 모듈 교체는 개발 중인 애플리케이션의 변경 사항을 빠르게 반영하기 위한 기술입니다.
개발자가 코드를 수정할 때마다 변경된 모듈만 실시간으로 교체하여 애플리케이션의 리로딩 없이 변경 사항을 확인할 수 있습니다. 이를 통해 개발자는 빠른 피드백을 받고 개발 생산성을 향상시킬 수 있습니다.

장점

성능: 서버 사이드 렌더링과 정적 사이트 생성 기능을 통해 최적화된 성능을 제공합니다.
검색 엔진 최적화(SEO): 서버 사이드 렌더링을 통해 검색 엔진이 페이지의 콘텐츠를 더 잘 인식할 수 있습니다.
개발 생산성: 내장된 개발 툴과 편리한 기능들이 개발 생산성을 향상시킵니다.

단점

학습: React와 함께 사용되기 때문에 React의 기본적인 지식이 필요합니다. 처음 사용하는 개발자들에게는 어려움이 있을 수 있습니다.
서버 측 구성의 추가 복잡성: 서버 사이드 렌더링을 구현하기 위해 서버 구성에 대한 이해가 필요합니다.

Nextjs 검색 엔진 최적화 함수들

getStaticProps

getStaticProps 함수는 정적 사이트 생성(Static Site Generation, SSG)을 위해 사용됩니다.
이 함수를 사용하면 빌드 시점에 페이지의 데이터를 가져와서 사전에 렌더링된 정적 파일로 생성합니다.

// pages/post/[id].js

export async function getStaticProps({ params }) {
  // params에서 id 값을 가져와서 데이터를 조회하는 로직을 작성합니다.
  const post = await fetch(`https://api.example.com/posts/${params.id}`);
  const postData = await post.json();

  // 페이지 컴포넌트에 필요한 데이터를 props로 전달합니다.
  return {
    props: {
      postData
    }
  };
}

function Post({ postData }) {
  // props로 전달받은 데이터를 사용하여 페이지를 렌더링합니다.
  return <div>{postData.title}</div>;
}

export default Post;

위의 예제에서 getStaticProps 함수는 /post/[id].js 파일 내에 정의되어 있습니다.
이 함수는 빌드 시점에 /post/1, /post/2, /post/3과 같은 모든 동적 경로의 데이터를 사전에 가져옵니다. 그런 다음, 해당 데이터를 페이지 컴포넌트의 props로 전달합니다. 페이지 컴포넌트는 전달받은 데이터를 사용하여 동적으로 페이지를 렌더링합니다.

getServerSideProps

getServerSideProps 함수는 서버 사이드 렌더링(SSR)을 위해 사용됩니다. 이 함수를 사용하면 매 요청마다 서버에서 데이터를 가져와서 페이지를 렌더링합니다.

// pages/post/[id].js

export async function getServerSideProps({ params }) {
  // params에서 id 값을 가져와서 데이터를 조회하는 로직을 작성합니다.
  const post = await fetch(`https://api.example.com/posts/${params.id}`);
  const postData = await post.json();

  // 페이지 컴포넌트에 필요한 데이터를 props로 전달합니다.
  return {
    props: {
      postData
    }
  };
}

function Post({ postData }) {
  // props로 전달받은 데이터를 사용하여 페이지를 렌더링합니다.
  return <div>{postData.title}</div>;
}

export default Post;

위의 예제에서 getServerSideProps 함수는 /post/[id].js 파일 내에 정의되어 있습니다.
이 함수는 매 요청마다 해당 동적 경로의 데이터를 서버에서 가져옵니다. 그런 다음, 해당 데이터를 페이지 컴포넌트의 props로 전달하여 페이지를 렌더링합니다.

getStaticPaths

getStaticPaths 함수는 동적 라우팅을 위해 사용됩니다. 이 함수를 사용하면 Next.js는 빌드 시점에 어떤 동적 경로들을 사전 렌더링할지 미리 정의합니다.

// pages/post/[id].js
export async function getStaticPaths() {
  // 동적 경로의 id 목록을 가져오는 로직을 작성합니다.
  const ids = await fetch('https://api.example.com/post-ids');
  const idList = await ids.json();

  // 사전에 렌더링할 경로들을 정의합니다.
  const paths = idList.map(id => ({
    params: { id: id.toString() }
  }));

  return {
    paths,
    fallback: false // fallback이 true인 경우, 미리 정의하지 않은 경로로 접근 시 404 페이지가 아닌 런타임 시에 동적으로 생성됩니다.
  };
}

export async function getStaticProps({ params }) {
  // params에서 id 값을 가져와서 데이터를 조회하는 로직을 작성합니다.
  const post = await fetch(`https://api.example.com/posts/${params.id}`);
  const postData = await post.json();

  // 페이지 컴포넌트에 필요한 데이터를 props로 전달합니다.
  return {
    props: {
      postData
    }
  };
}

function Post({ postData }) {
  // props로 전달받은 데이터를 사용하여 페이지를 렌더링합니다.
  return <div>{postData.title}</div>;
}

export default Post;

위의 예제에서 getStaticPaths 함수는 /post/[id].js 파일 내에 정의되어 있습니다. 이 함수는 빌드 시점에 /post/1, /post/2, /post/3과 같은 동적 경로들을 사전에 정의합니다. getStaticProps 함수에서 가져오는 데이터는 이 사전에 정의된 경로들에 대해서만 사전 렌더링됩니다.

이렇게 getStaticProps, getServerSideProps, getStaticPaths 함수를 사용하여 Next.js는 데이터를 가져오고 페이지를 사전에 렌더링할 수 있습니다. 이 외 함수들을 더 공부하고 이를 통해 성능을 최적화하고 SEO를 향상시킬 수 있습니다.