최적화와 배포

이미지 최적화

웹페이지에서 평균적으로 많은 용량을 차지하는 요소는 이미지입니다.
이미지는 무려 평균적으로 웹페이지의 용량의 무려 58%나 차지합니다..ㄷㄷ

개발자에게 이미지 최적화하는 일은 매우 중요한 일입니다.

Next에서는 대부분의 최적화 기법들이 자체적으로 다 제공이 되고 있습니다!
Next에서 제공하고 있는 Image 컴포넌트가 있습니다.
이 컴포넌트를 활용하면 이미지 최적화 기법들이 자동으로 적용이 되는 편리함 까지 갖추고 있습니다.

기존의

<img src={coverImgUrl} />

태그들을 Image 컴포넌트를 불러와 src는 기존과 동일하게 사용하고
width와 height라는 prop으로 직접 명시를 해줘야 합니다.
이러한 이유는 사이즈를 통해서 필요 이상으로 큰 이미지를 불러오지 않을 수 있도록 설정함으로써 이미지의 용량을 줄여주기 위함입니다.
다음 alt 속성을 사용해서 더 많은 사람들을 위한 접근성을 위해 꼼꼼하게 설정해줍니다.

<Image
  src={coverImgUrl}
  width={80}
  height={105}
  alt={`도서 ${title}의 도서 이미지`}
/>

만약 img가 외부 서버에서 보관된 이미지를 사용하는 방식이라면 Next.js의 보안 때문에 자동으로 차단이 되어서 오류가 발생할 것입니다.
이럴때에는 next.config.js 또는 next.config.mjs 설정 파일을 수정해야 합니다.
images 배열을 불러와서 이미지를 불러오려고 하는 서버의 도메인을 명시해주면 됩니다.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
  images: {
    domains: ["shopping-phinf.pstatic.net"],
  },
};

export default nextConfig;

그러면 이미지 타입은 이제 webp로 불러오고 용량또한 매우 적게 불러오고 있습니다.

이제 아주 많은 이미지를 등록해도 오류가 걸리는 일은 없겠죠??

검색 엔진 최적화 (SEO)

검색 최적화란? 포털 사이트들에서 제작한 서비스에 어떠한 페이지들이 있고 이 페이지에는 어떠한 정보들이 있는지 수집해 갈 수 있도록 설정해서 서비스가 검색 결과에 더 잘 노출이 되도록 설정하는 기술입니다.

Sitemap 설정하기, RSS 발행하기, 시멘틱 태그 설정하기, 메타 데이터 설정하기 등 다양한 방법이 존재합니다.

그중 메타 데이터 설정하기를 살펴보려고 합니다.

메타 데이터를 설정해주기 위해서는 적용하려는 index page안에서 변수 위에 metadata라는 변수를 선언해서 export로 파일로부터 내보내 주면 됩니다.
그러면 변수에 설정된 값이 자동으로 index 페이지의 메타데이터로 설정이 됩니다. 타입은 Metadata로 정의 하고, 값으로는 객체 값으로 title과 description, openGraph 같은 것들을 작성해주면 됩니다.
예를들어

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

그렇다면 title의 props 값들을 동적으로 전달하기 위해서는 어떻게 해야 할까??
그러기 위해선 약속된 이름은 generateMetadata 함수를 만들어주면 됩니다.
이 함수는 현재 페이지 메타 데이터를 동적으로 생성하는 역할을 합니다. metadata는 매개변수를 그대로 전달 받을 수 있습니다.

export async function generateMetadata({
  searchParams,
}: {
  searchParams: Promise<{ q?: string }>;
}): Promise<Metadata> {
  const { q } = await searchParams;

  return {
    title: `${q} : Mw북스 검색`,
    description: `${q}의 검색 결과입니다.`,
    openGraph: {
      title: `${q} : Mw북스 검색`,
      description: `${q}의 검색 결과입니다.`,
      images: ["/thumbnail.png"],
    },
  };
}