학습 Next.js - Day 11 / SEO 설정, Next.js 앱 배포, 페이지 라우터 정리.

이유승·2024년 10월 8일

Next.js 학습

목록 보기

12/27

1. SEO 설정하기

메타 태그를 이용해서 SEO를 설정할 수 있다.
Next.js에서는 React.js와 달리 페이지마다 메타 태그를 별도로 설정할 수 있다.

import Head from "next/head";

export default function Home({
  allBooks,
  recoBooks,
}: InferGetStaticPropsType<typeof getStaticProps>) {

  if (router.isFallback) return "로딩중입니다";
  if (!book) return "문제가 발생했습니다 다시 시도하세요";

  return (
    <>
      <Head>
        <title>한입북스</title>
        <meta property="og:image" content="/thumbnail.png" />
        <meta property="og:title" content="한입북스" />
        <meta
          property="og:description"
          content="한입 북스에 등록된 도서들을 만나보세요"
        />
      </Head>

  	  (...)
  		
    </>
  );
}

SSG 방식에서 fallback 옵션을 true로 사용할 경우, 사전에 설정되어있지 않은 경로의 페이지들은. props가 없는 상태의 페이지가 먼저 사용자에게 전달된다.
그런데, router.isFallback로 인해서 메타 태그가 기재된 코드가 페이지로 넘어가지 않는 경우가 발생하게 된다.

export default function Page({
  book,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const router = useRouter();

  if (router.isFallback) {
    return (
      <>
        <Head>
          <title>한입북스</title>
          <meta property="og:image" content="/thumbnail.png" />
          <meta property="og:title" content="한입북스" />
          <meta
            property="og:description"
            content="한입 북스에 등록된 도서들을 만나보세요"
          />
        </Head>
        <div>로딩중입니다</div>
      </>
    );
  }
  
  if (!book) return "문제가 발생했습니다 다시 시도하세요";
  
}

따라서 isFallback 상태라고 해도 메타 태그들이 넘어갈 수 있도록 처리해주어야 한다.

2. Next.js 어플리케이션을 배포하기

정적 파일 배포용으로 사용되는 Vercel 서비스. 사실 Vercel은 Next.js의 개발사이고, 해당 서비스는 Next.js 배포에 특화되어 있다.

계정 생성 후 배포 프로젝트를 생성한다.
Next.js 프로젝트에서 'npm install-g vercel' 키워드를 입력하여, 프로젝트에 Vercel 배포에 필요한 패키지를 설치해준다.

이후 vercel 키워드를 입력하면 배포 작업이 자동으로 진행된다. 필요한 입력값을 모두 입력하면 배포가 실행된다.
-> Vercel 서비스 상에 미리 배포 프로젝트를 생성해두어야 한다.
-> 어느 배포 프로젝트를 선택할 것인지, 프로젝트가 어떤 라이브러리를 사용 중인지 감지하고 거기에 맞는 빌드/개발 명령어를 선택해준다. 감지된 라이브러리가 일치한다면 그대로 사용하면 된다.
-> 배포가 정상 완료되면, 배포 주소를 출력해준다. 주소를 통해 배포 상태를 확인할 수 있다.
백엔드 파트도 동일하게 처리해주면 된다. 백엔드 파트의 배포 주소를 확인한 뒤, 프론트엔드 코드에서 데이터를 호출하는 부분을 수정해주면 완료.