[#1 - SEO(Search Engine Optimization)]

SEO

SEO란 Search Engine Optimization의 약자로 검색 엔진 최적화라는 뜻을 가진다. 검색 엔진 최적화는 우리가 배포하고 운용 중인 웹 페이지가 구글이나 네이버 같이 검색 엔진에게 잘 노출이 되도록 웹 페이지의 정보들을 코드에 입력해 줌으로써 사용자들의 검색 결과에 더 빈번하고 쉽게 노출되도록 설정해주는 작업을 의미한다.

웹 페이지의 정보를 담고 있는 태그는 HTML에서 다루어 보았던 meta 태그이다. NextJS에서도 마찬가지로 meta 태그를 활용하여 페이지의 UI를 담고 있는 index 파일들에 SEO를 적용해 볼 예정인데 그 전에 한가지 개념이 필요하다.

 

Head

HTML을 공부했던 때로 되돌아 가보자. 기본 파일 구조를 떠올려보면 header, body 태그가 기본적으로 존재했던 기억이 있을 것이다. body 태그에는 웹 페이지의 내용이 들어있고, header 태그에는 웹 페이지의 정보가 담겨 있었다. meta 태그도 당연히 header 태그 내에 들어있었다. NextJS에서 meta 태그를 사용하기 전에 next/head가 제공해주는 Head 태그를 import 해서 사용해야 한다. 코드는 다음과 같다.

import Head from 'next/head';

NextJS에서 자체적으로 제공해주는 Head 태그이다. 이 때 주의해야 할 점은 Next에서 제공해주는 Head 태그는 두 가지가 있는데 하나는 next/head, 다른 하나는 next/document에서 제공해준다. 대부분의 페이지에서 사용할 Head 태그는 head에서 제공해주는 태그를 사용해야하고 document에서 제공해주는 Head는 프로젝트 최상단의 document.tsx 파일의 Head 태그에 사용해야 한다.

이어서 Head 태그를 import 해 온 뒤 내부에는 HTML에서와 동일하게 title 태그로 웹 페이지의 제목을 입력해주고, meta 태그를 통해서 SEO를 설정하면 된다. 본 프로젝트에서는 다음과 같이 설정하였다.

import Head from 'next/head';

export default function Home(){
  return (
    <>
      <Head>
        <title>Books</title>
        <meta property="og:image" content="/thumbnail.png" />		//대표 이미지
        <meta property="og:title" content="Books" />			//제목
        <meta property="og:description" content="Hello Books" />	//페이지 요약
      </Head>
    </>
  )
}

여기서 meta 태그의 속성들에 대해 살펴보면 HTML에서의 meta 태그 속성 중 name이라는 속성이 있었는데 name과 같은 역할을 하는 속성이 property 속성이다. og는 Open Graph의 약자로 Open Graph는 페이스북에서 만든 프로토콜이다. 이 프로토콜은 공유하고자 하는 웹 페이지를 미리보기로 구성하여 볼 수 있도록 해주는 프로토콜이다. 우리가 해당 페이지를 외부로 공유할 때 미리보기로 보여줄 정보들과 포함할 정보들을 입력할 때 쓰는 속성이라고 이해해두면 쉽다.

따라서 OG의 기본 속성인 og:image, og:title과 옵션 속성인 og:description을 넣어주었다. 각각 페이지의 대표 이미지, 페이지의 제목, 페이지의 내용 요약이다. 위 코드와 같이 Head 태그를 구성하여 페이지 UI를 담당하는 파일들의 JSX 상단에 넣어주면 SEO 설정이 완료가 된다. 또한 동적 라우팅으로 생성되는 페이지는 서버로부터 받아온 데이터를 meta 태그의 content 속성값으로 넣어주어도 된다. 하지만 여기서 한가지 중요하게 짚고 넘어가야할 점이 있다.

 

우리는 대부분의 페이지를 SSG, ISR로 Pre-Rendering을 해오고 있다. 그래서 동적으로 생성되는 페이지들은 우리가 getStaticPaths 함수 내에서 paths로 미리 Rendering 해오지 않은 페이지들에 대해서는 { fallback: true } 옵션에 의해 요청이 들어온 순간 SSR 방식으로 동작해 요청에 맞게 페이지를 서버로부터 요청하여 렌더링해주는 방식으로 생성된다. 따라서 paths로 미리 불러놓지 않은 페이지들은 우리가 해당 페이지로 접속 요청을 보냈을 때 Head 태그를 포함해 우리가 작성해둔 JSX 코드들은 빌드 시점에는 불러온 데이터가 없기 때문에 동적으로 meta 태그를 생성하지 못하게 되는 것이다. 간단하게 아래 코드를 통해 무슨 말인지 이해해보자.

export const getStaticPaths = () => {
  return {
    paths: [
      { params: { id: "1" } },
      { params: { id: "2" } },
      { params: { id: "3" } },
    ],
    fallback: true,
  };
};
 
 // 글 맥락상 getStaticProps 함수는 생략
 
export default function Book({
  book,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const router = useRouter();
  if (router.isFallback) {
    return (
      <>
        <div>Loading...</div>
      </>
    );
  }
  if (!book) return "Error";
  const { id, title, subTitle, description, author, publisher, coverImgUrl } =
    book;
  return (
    <>
      <Head>
        <title>{title}</title>
        <meta property="og:image" content={coverImgUrl} />
        <meta property="og:title" content={subTitle} />
        <meta property="og:description" content={description} />
      </Head>
      <div>
        <div style={{ backgroundImage: `url('${coverImgUrl}')` }}>
          <img src={coverImgUrl} alt="CoverImg" />
        </div>
        <div>{title}</div>
        <div>{subTitle}</div>
        <div>
          {author} | {publisher}
        </div>
        <div>{description}</div>
      </div>
    </>
  );
}

위의 코드를 간단하게 분석해보면 Book Component는 Dynamic Routing을 통해 생성되는 동적 페이지이다. 따라서 Head 태그를 보면 Content와 Title의 값이 book 데이터로부터 받아온 값들로 할당이 되어있다. 하지만 getStaticPaths 함수에 paths는 id가 3인 페이지까지만 설정이 되어있기에 그 이외의 숫자 값이 포함된 동적 경로로 페이지를 호출하면 빌드 타임에 호출되지 않는 페이지들은 fallback 옵션에 의해 SSR 방식으로 그 즉시 서버로부터 해당 페이지를 호출하여 렌더링 해준다. 그 과정 속에서 props가 없는 fallback 페이지를 렌더링 해준 후 데이터 호출이 완료되면 Component에 props를 전달하여 데이터가 모두 포함된 완성된 페이지를 렌더링 해주기 때문에 처음 페이지를 호출하였을 때에는 Head 태그가 존재하지 않는 것이다.

따라서 이런 경우를 방지해주기 위해서는 본 Component 상단에 useRouter 훅의 isFallback 속성이 true인 경우 로딩문구를 출력해주도록 한 로직을 활용해야 한다. 해당 로직은 페이지가 fallback 상태의 페이지일 때 보여주는 요소들을 선언해주는 로직으로 해당 로직에 Head 태그의 defalut 값을 입력해놓으면 fallback 상태의 페이지일 때에도 우리가 원하는 SEO 설정을 구현할 수 있게 된다. 적용하면 아래와 같은 형태가 된다.

export const getStaticPaths = () => {
  return {
    paths: [
      { params: { id: "1" } },
      { params: { id: "2" } },
      { params: { id: "3" } },
    ],
    fallback: true,
  };
};

 // 글 맥락상 getStaticProps 함수는 생략�

export default function Book({
  book,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const router = useRouter();
  if (router.isFallback) {
    return (
      <>
        <Head>
          <title>Books</title>
          <meta property="og:image" content="/thumbnail.png" />
          <meta property="og:title" content="Books" />
          <meta property="og:description" content="Hello Books" />
        </Head>
        <div>Loading...</div>
      </>
    );
  }
  if (!book) return "Error";
  const { id, title, subTitle, description, author, publisher, coverImgUrl } =
    book;
  return (
    <>
      <Head>
        <title>{title}</title>
        <meta property="og:image" content={coverImgUrl} />
        <meta property="og:title" content={subTitle} />
        <meta property="og:description" content={description} />
      </Head>
      <div>
        <div style={{ backgroundImage: `url('${coverImgUrl}')` }}>
          <img src={coverImgUrl} alt="CoverImg" />
        </div>
        <div>{title}</div>
        <div>{subTitle}</div>
        <div>
          {author} | {publisher}
        </div>
        <div>{description}</div>
      </div>
    </>
  );
}

 

[#2 - Deploy(배포)]

Vercel

프론트엔드에서 많이 사용하는 프로젝트 배포 방법에는 Netlify, Vercel, Github Pages 등이 있다. NextJS는 Vercel 회사에서 만든 React 기반 FrameWork이기 때문에 Vercel로 배포를 해보도록 하자.

Vercel 홈페이지에 가입이 완료되었다면 진행중인 프로젝트로 와서 Vercel을 설치해 주어야 한다.

1. npm install -g vercel(macOS인 경우 sudo를 맨 앞에 붙여서 실행) 명령어를 통해 설치해준다. 전역적으로 설치를 하기 위해 global을 붙여서 설치해준다.

2. 설치가 완료되었다면 프로젝트를 진행하던 IDE에서 Vercel로 로그인을 해준다. vercel login 명령어를 통해서 로그인을 진행해준다. 내가 사용하는 이메일을 통해서 로그인을 해주면 다음과 같이 완료 문구가 뜨게 된다.

vercel login

3. 로그인이 완료되면 vercel 명령어를 통해 프로젝트 배포를 위한 설정을 시작한다. 명령어를 입력하면 여러가지 질문이 나오는데 본인이 진행중인 프로젝트와 Vercel 계정에 따라서 설정해주면 된다. 완료되면 Production 환경으로 배포된 링크가 나오면서 문구가 뜬다. 다음과 같은 방식으로 진행된다. 이 때 주의해야할 점은 프로젝트 이름에 대문자를 포함시키면 에러가 발생하기 때문에 소문자로 만들어주어야 한다.

vercel client

4. 이후 개인 프로젝트 진행 시 개인이 만든 서버가 존재한다면 서버 역시 배포를 같이 해주어야 한다. 배포해주었다면 다음과 같이 안내 문구가 뜬다.

vercel server

5. 개인이 만든 서버라면 프로젝트 내부에서 개발용 백엔드 서버로 데이터 요청을 보내던 링크를 배포가 완료된 서버 주소로 변경해주어야 한다. 그렇지 않으면 로컬에서 백엔드 서버를 실행시켜주지 않았을 경우 아무 데이터를 받아볼 수 없기 때문이다. 모두 배포가 완료되었다면 Vercel 홈페이지에서 개인 대시보드를 보면 다음과 같이 보이게 된다.

vercel dashboard

6. 만약 5번 과정을 진행했다면 다시 한 번 vercel --prod 명령어를 통해서 바로 Production 환경으로 배포를 하도록 실행해준다. 성공한다면 다음과 같이 안내문구가 뜨면서 배포가 완료된다.

vercel --prod

추가로 배포가 완료되면 대시보드에서 해당 프로젝트로 들어가면 다음과 같이 배포된 페이지의 정보를 볼 수 있게 된다.

vercel deploy

정보 창에서 Domains 주소가 배포 완료된 주소이다.

위와 같은 과정을 통해서 배포를 완료했으며 배포 완료된 링크를 SNS를 통해서 공유해보면 앞서 SEO 설정 시에 썸네일로 설정해두었던 사진이 썸네일로 뜨면서 전송이 되는 것까지 확인할 수 있다.

 

이렇게해서 NextJS의 Page Router 방식을 이용해서 Pre-Fetching, CSS Modules, Layout, Pre-Rendering(SSR,SSG,ISR,OnDemandISR), SEO, Deploy 과정을 학습하며 Vercel로 배포까지 완료해보았다. 추후에는 NextJS v13 이후부터 사용되는 App Router 방식에 대해서 학습해보도록 하겠다.

'NextJS' 카테고리의 다른 글

NextJS[NextJS v.13~] - (2) Data Fetching on App Router  (1) 2024.10.05
[NextJS v.13~] - (1) App Router  (1) 2024.09.26
[NextJS] - (3) SSR,SSG,ISR  (1) 2024.09.19
[NextJS] - (2) Page Router  (2) 2024.09.10
[NextJS] - (1) NextJS  (1) 2024.09.10

+ Recent posts

티스토리툴바