[Next.js/App Router] 12. 최적화 및 SEO 설정 및 배포하기

이미지 최적화

웹페이지에서 가장 많은 용량을 차지하는 파일은 이미지 파일입니다. Next.js의 Image 내장 컴포넌트를 사용하면 쉽게 최적화할 수 있습니다.

 

1. 이미지 최적화 전의 문제점

1. 비효율적인 파일 포맷 사용: jpeg 파일을 렌더링하면 용량이 크므로, webp 또는 avif 같은 더 경량화된 포맷을 사용하면 성능이 향상됩니다.
2. 불필요한 이미지 로딩: 현재 화면에 렌더링할 필요가 없는 모든 이미지가 동시에 로드됩니다.
3. 과도한 이미지 크기: 화면에서 필요로 하는 크기보다 훨씬 큰 이미지가 불러와져 성능 저하가 발생합니다.

 

2) 이미지 컴포넌트로 변경

외부 서버에서 이미지를 불러올 경우 Next.js의 보안 정책에 의해 차단될 수 있으므로 next.config.mjs에서 도메인을 허용해야 합니다.

// next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ["shopping-phinf.pstatic.net"], // 허용할 이미지 도메인 추가
  },
};

export default nextConfig;

✅ 이미지 최적화 적용 코드

import Image from "next/image";
import Link from "next/link";
import style from "./book-item.module.css";
import type { BookData } from "@/types";

export default function BookItem({
  id,
  title,
  subTitle,
  author,
  publisher,
  coverImgUrl,
}: BookData) {
  return (
    <Link href={`/book/${id}`} className={style.container}>
      <Image
        src={coverImgUrl}
        width={80}
        height={105}
        alt={`도서 ${title}의 표지 이미지`}
      />
      <div>
        <div className={style.title}>{title}</div>
        <div className={style.subTitle}>{subTitle}</div>
        <br />
        <div className={style.author}>{author} | {publisher}</div>
      </div>
    </Link>
  );
}

 

---

 

검색 엔진 최적화 (SEO)

검색 엔진이 웹페이지의 내용을 잘 수집하고, 검색 결과에 더 잘 노출되도록 설정하는 기술입니다.

 

1) 메타 데이터 설정하기

public 폴더 안에 favicon.ico, thumbnail.png 파일을 등록하여 설정합니다.

// src/app/page.tsx

import { Metadata } from "next";

export const metadata: Metadata = {
  title: "한입 북스",
  description: "한입 북스에 등록된 도서를 만나보세요",
  openGraph: {
    title: "한입 북스",
    description: "한입 북스에 등록된 도서를 만나보세요",
    images: ["/thumbnail.png"],
  },
};

 

2) 동적인 메타데이터 설정 (검색 결과 페이지 등)

generateMetadata를 사용하면 동적으로 메타데이터를 생성할 수 있습니다.

import { Metadata } from "next";

type Props = {
  searchParams: {
    q?: string;
  };
};

// 현재 페이지의 메타데이터를 동적으로 생성하는 역할
export function generateMetadata({ searchParams }: Props): Metadata {
  return {
    title: `${searchParams.q} : 한입북스 검색`,
    description: `${searchParams.q} 검색 결과입니다`,
    openGraph: {
      title: `${searchParams.q} : 한입북스 검색`,
      description: `${searchParams.q} 검색 결과입니다`,
      images: ["/thumbnail.png"],
    },
  };
}

 

3) 특정 페이지에서의 메타데이터 설정

generateMetadata를 활용하여 특정 도서 상세 페이지의 정보를 반영할 수 있습니다.

export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata | null> {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${params.id}`,
    { cache: "force-cache" }
  );
  if (!response.ok) {
    throw new Error(response.statusText);
  }

  const book = await response.json();

  return {
    title: `${book.title} - 한입북스`,
    description: `${book.description}`,
    openGraph: {
      title: `${book.title} - 한입북스`,
      description: `${book.description}`,
      images: [book.coverImgUrl],
    },
  };
}

 

4) favicon 설정

src/app 경로에 favicon.ico를 배치하면 자동으로 적용됩니다.

 

 

---

배포하기

https://ayeongjin.tistory.com/44

[Next.js/Page Router] 4. SEO 설정 및 Next.js 프로젝트 배포하기

 

• 위의 Page Router 배포와 동일하게 진행할 수 있습니다.
• Vercel의 프로젝트 Settings에서 Environment Variables를 설정하여 환경변수를 추가할 수 있습니다.
• 프론트엔드 서버를 배포한 후, 백엔드 서버의 주소를 환경변수로 추가하여 쉽게 연동할 수 있습니다.

 

✅ 배포 후 최적화

• Settings > Functions에서 Function Region을 설정하여 물리적 서버 위치를 변경할 수 있습니다.
• 기본적으로 미국 지역이 설정되어 있으므로, 한국 사용자라면 **서울(Asia)**로 변경하는 것이 성능 최적화에 도움이 됩니다.

 

---

 

🎯 배운점

✔️ 이미지 최적화와 SEO는 웹페이지의 성능과 검색 노출도를 높이는 핵심적인 요소입니다.

✔️ Next.js의 Image 컴포넌트를 활용하여 불필요한 리소스 낭비를 줄이고, generateMetadata를 활용하여 페이지별 적절한 메타 정보를 제공하면 검색 엔진 최적화(SEO) 효과를 극대화할 수 있습니다.

✔️ 이를 통해 보다 빠르고 효율적인 웹 서비스를 구축할 수 있습니다.