요즘 SSR이 유행이기도 하고 슬슬 블로그 제작 프로젝트를 진행할까 하는데 블로그는 SSR이 SEO면에서 유리하기도 하고 Next 경험도 해보고 싶어서 공식 문서 튜토리얼을 진행하고 있다.

코드보다는 Next에서 지원하는 기능과 렌더링 방식에 대해서 학습한 내용을 정리했다.

환경 & 프로젝트 생성

개발 환경

먼저 개발 환경은 기본적인 Node.js가 필요하다.

Node.js 버전 10.13 이상이 필요하다고 한다.

나는 LTS 18.16.0으로 업데이트 시켜줬다.

프로젝트 생성하기

Next는 Vite에서 템플릿을 지원해주지 않기 때문에 CNA 명령어로 생성해줬다.

yarn을 사용하는 경우에는

yarn create next-app [프로젝트 명]

npm을 사용하는 경우에는

npx create-next-app [프로젝트 명]

을 사용하여 Next 프로젝트 템플릿을 생성할 수 있다.

친절하게 설치 도중 이것저것 같이 쓸거냐고 물어본다.

위에서 부터

• TypeScript를 같이 사용할 것이냐?

  • 관련 패키지를 설치하고 파일명을 .tsx로 생성해준다.
  • typescript, @types/react, @types/node, @types/react-dom

• ESLint를 같이 사용할 것이냐?

  • 관련 패키지를 설치하고 eslintrc.json 파일을 생성해준다.
  • eslint, eslint-config-next

• Tailwind CSS를 같이 사용할 것이냐?

  • 관련 패키지를 같이 설치해준다.
  • tailwindcss, postcss, autoprefixer

• src/ 디렉토리로 구성해줄까?

  • 선택하면 src 폴더 안에 pages와 styles 폴더를 생성해서 디렉토리 구조를 만들어준다.

• App Router 기능을 사용할 것이냐?

  • Next.js에서 라우팅을 관리하는 핵심 기능이다.

• import alias를 커스텀해서 사용할 것이냐?

  • 선택하면 다음 줄에 바로 원하는 경로로 바꿀 수 있게 해준다.

디렉토리 구조

나는 yarn을 사용하고 TypeScript, eslint를 선택했다.

pages or app 폴더

다른 블로그들은 pages라는 폴더가 생성되는데 최신버전이라 그런지 app이라는 폴더로 바뀌어서 생성된다.

Next 13 버전부터는 App 디렉토리가 추가되었다고 한다.
Next 13 버전에서 App 디렉토리 사용방법 및 소개

이 app나 pages폴더 안에서 생성한 파일이나 폴더는 하위 주소에 해당하는 URL로 Next.js가 자동으로 라우팅 해준다. 이게 App Router 기능이다.

public 폴더

public 폴더는 이미지와 폰트같은 assets을 관리하는 폴더다.

개발 서버 실행

yarn을 사용한다면

yarn dev

npm을 사용한다면

npm run dev

기본적으로 3000번 포트로 로컬에서 실행된다.

App Router 기능

Next.js에서의 App Router는 라우팅을 관리하는 핵심 기능이다. Next.js는 페이지 기반의 라우팅을 지원하며, App Router는 이를 처리하고 페이지 간의 전환을 가능하게 한다.

App Router는 "pages" 디렉토리 내에 있는 각 파일이 개별적인 라우팅 경로를 가지도록 설정한다. 예를 들어, "pages/index.js" 파일은 루트 경로("/")에 매핑되고, "pages/about.js"파일은 "/about" 경로에 매핑된다. 이렇게 정의된 라우팅 경로를 통해 사용자가 해당 경로로 이동할 때, Next.js는 해당 페이지를 렌더링하고 보여준다.

App Router는 클라이언트 측과 서버 측 모두에서 작동한다. 클라이언트 측에서는 브라우저의 주소창을 통해 직접 경로를 변경하거나, 링크를 클릭하여 페이지 간 전환을 수행할 수 있다. 서버 측에서는 초기 요청이 오면 해당 경로에 맞는 페이지를 서버에서 렌더링한 후, 클라이언트로 전달한다. 이를 통해 Next.js는 서버 사이드 렌더링(SSR)을 지원하며, 초기 로딩 속도와 SEO 향상에 도움을 준다.

App Router는 기본적인 라우팅 기능뿐만 아니라 동적 라우팅, 매개변수 전달, 쿼리 스트링 처리 등 다양한 고급 기능도 제공한다. 또한, Next.js의 Link 컴포넌트나 프로그래밍 방식으로 Router를 조작할 수 있는 useRouter 훅 등을 통해 쉽게 라우팅을 구성하고 제어할 수 있다.

[Next.js] next/Link 사용하기 (공식문서 내용 정리)

pre-rendering(사전 렌더링)

Next.js는 사전 렌더링(pre-rendering) 기능을 제공하여 웹 페이지의 초기 HTML 컨텐츠를 서버 측에서 생성하는 기능을 말한다. 이를 통해 클라이언트가 페이지를 요청할 때까지 기다릴 필요 없이 초기 렌더링된 HTML을 즉시 제공함으로써 초기 로딩 속도를 개선할 수 있다.

JS가 다운로드 되기 전에 HTML을 볼 수 있다. 이후 JS가 다운로드 되면 React 컴포넌트가 초기화되고 App에서 상호작용할 수 있다.

밑의 이미지는 사전 렌더링이 없는 경우다.

JS가 다운로드되기 전까지 아무것도 볼 수 없다.

Next.js의 사전 렌더링은 두 가지 방식으로 구현된다.

정적 사전 렌더링(Static Pre-rendering)

미리 정의된 데이터를 사용하여 페이지를 사전에 렌더링 하는 방식이다. 이를 통해 모든 요청에 대해 동일한 정적 페이지를 반환하고, 데이터의 변경이 없는 경우에는 서버 측에서 렌더링된 HTML을 캐시하여 재사용할 수 있다.

정적 사이트 생성(SSG)

정적 생성은 데이터 유무에 관계없이 수행 가능하다.

데이터가 없는 경우 정적 생성

데이터가 없는 경우는 그냥 생성하면 된다.

데이터를 사용한 정적 생성

그러나 일부 페이지의 경우 외부 데이터가 필요한데, 이 경우에도 Next.js는 정적 생성을 지원한다.

getStaticProps를 사용해 데이터를 가져오는 작업을 수행할 수 있다.
이 함수는 정적 사전 렌더링(Static pre-rendering)을 위해 사용된다. 페이지 컴포넌트에서만 사용할 수 있고, 서버 측에서 렌더링되는 시점에 데이터를 불러와 페이지의 초기 속성(props)을 설정하는 역할을 한다.

getStaticProps함수는 비동기 함수로 작성되어야 하며, 다음과 같은 형태로 정의된다.

export async function getStaticProps() {
  // 데이터를 불러와서 처리하는 비동기 로직 작성
  // ...

  return {
    props: {
      // 페이지 컴포넌트에 전달할 초기 속성(props) 설정
      // ...
    },
    // 사전 렌더링된 페이지를 얼마 동안 유지할지 설정 (선택 사항)
    // revalidate: ...
  };
}

getStaticProps함수 내에서는 필요한 데이터를 비동기적으로 불러와서 처리한 후, 반환된 객체의 props 속성에 페이지 컴포넌트에 전달할 초기 속성(props)을 설정한다. 이렇게 설정된 초기 속성은 페이지 컴포넌트의 props로 전달되어 초기 렌더링 시 사용된다.

정적 사전 렌더링을 사용하여 페이지의 초기 데이터를 미리 준비할 수 있다.

getStaticProps함수는 빌드 시점에 한 번만 실행되는데, 너무 많은 데이터를 가져온다면 빌드 시간이 길어질 수 있다.
이러한 경우 다른 접근 방식을 고려해야 한다.

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

각 요청에 대해 서버 측에서 페이지를 동적으로 렌덜이하는 방식이다. 이를 통해 각 요청마다 적절한 데이터를 가져와 렌더링하여 동적인 컨텐츠를 포함한 초기 HTML을 생성한다. 이는 동적인 데이터에 기반한 페이지나 사용자 맞춤형 컨텐츠가 있는 경우에 유용하다.

서버측 렌더링(SSR)

요청 시 데이터 가져오기

빌드 시점이 아닌 요청 시 데이터를 가져와야 하는 경우 서버 사이드 렌더링을 시도할 수 있다.

서버 사이드 렌더링 시에는 getServerSideProps함수를 사용해야 한다.

페이지별 기준 설정

Next.js를 사용하면 각 페이지에 사용할 사전 렌더링 방식을 선택할 수 있다. 밑의 이미지와 같은 방식으로 각 페이지를 정적 렌더링이나 서버 사이드 렌더링을 사용해 하이브리드 앱을 만들 수 있다.

Next.js는 페이지 단위로 사전 렌더링을 구성할 수 있으며, getStaticProps, getStaticPaths, getServerSideProps와 같은 특수한 함수를 사용하여 데이터를 가져오고 사전 렌더링 옵션을 구성할 수 있다. 이를 통해 개발자는 각 페이지의 사전 렌더링 동작을 세밀하게 제어할 수 있다.

CSR

데이터를 미리 렌더링할 필요가 없는 경우 CSR을 사용할 수도 있다.

• 외부 데이터가 필요하지 않은 페이지 부분을 정적으로 생성한다.

• 페이지가 로드되면 JavaScript를 사용하여 클라이언트에서 외부 데이터를 가져오고 나머지 부분을 채운다.

동적 라우팅

이미지를 통해 쉽게 이해할 수 있다.(공식 문서 짱짱👍)

Next.js에서 동적 라우팅은 URL 경로의 일부를 변수로 사용하여 동적으로 페이지를 생성하는 기능을 제공한다. 이를 통해 동일한 페이지 컴포넌트를 다양한 데이터로 렌더링할 수 있다. 동적 라우팅은 pages 디렉토리 내에 [변수명].js 형식의 파일을 생성하여 구현할 수 있다.

동적 라우팅을 사용하려면 다음과 같은 단계를 거친다.

1. pages 디렉토리 내에 [변수명].js 형식의 파일을 생성한다. 예를 들어, pages/post/[id].js 파일을 생성한다.

2. 파일 내에서 동적으로 사용할 변수를 useRouter 훅을 통해 가져온다. useRouter는 Next.js에서 제공하는 라우터 훅으로, 현재 경로와 파라미터 등의 정보를 제공한다.

3. 동적으로 사용할 변수를 컴포넌트 내에서 활용하여 필요한 데이터를 가져오거나 렌더링한다. 예를 들어, id 변수를 사용하여 해당 포스트의 데이터를 가져오는 등의 작업을 수행할 수 있다.

4. 동적 라우팅된 페이지는 자동으로 서버 사이드 렌더링(SSR)된다. 따라서, 해당 페이지에 대한 초기 데이터를 가져오는 작업을 getServerSideProps 또는 getStaticProps를 통해 수행할 수도 있다.

배포

튜토리얼에서는 Vercel을 사용해 프로젝트를 배포한다.
Vercel은 Next.js의 제작자가 만들어서 Next.js를 최고 수준으로 지원한다고 한다.

Next.js 앱을 Vercel로 배포하면 다음과 같은 이점이 있다고 한다.

• 정적 생성 및 assets을 사용하는 페이지는 엄청나게 빠른 Vercel Edge Network에서 자동으로 제공된다.

• SSR 및 API 경로를 사용하는 페이지는 자동으로 격리된 서버리스 함수가 된다. 이를 통해 페이지 렌더링 및 API 요청을 무한대로 확장할 수 있다.

너무 좋은데..?😆

Vercel에는 다음과 같은 더 많은 기능이 있다.

• 사용자 지정 도메인: Vercel이 배포되면 Next.js 앱에 사용자 지정 도메인을 할당할 수 있다.

  Domains Overview

• 환경 변수: Vercel에서 환경 변수를 설정할 수도 있다.

• 자동 HTTPS: HTTPS는 기본적으로 활성화되어 있으며 추가 구성이 필요하지 않다. SSL 인증서를 자동 갱신한다.

마무리

API나 Vercel 배포 과정도 있지만 예시만 들어주고 끝이라 여기까지만 작성한다.

노트북이 느려서 그런가 React보다 페이지 전활할 때 확실히 느리긴하다. 그래도 튜토리얼을 따라가면서 느낀점은 Next.js에서 많은 기능들을 지원해주기 때문에 편하게 따라갈 수 있었던 것 같다.

App Router기능이 진짜 좋은 것 같다. 자동으로 라우팅해주고 동적 라우팅도 쉽게 처리할 수 있어서 나중에 개발할 때 도움이 많이 될 것 같다.

아무래도 SSR, SSG, CSR을 모두 지원하기 때문에 페이지 생성 시 여러 선택지가 있어서 실제 개발할 때에는 많은 고민이 필요할 것 같다.

공식 문서 튜토리얼을 따라가는건 처음이었는데, 생각보다 지루하지도 않았고 재밌었다.