joflix

배포 URL : https://joflix-coral.vercel.app

1. 사용 기술

2. 기능 설명

1. seo

1.1 generateMetadata로 metadata 동적 생성

• 홈페이지에서 영화를 클릭하면 모달로 detail페이지가 나옴
• detail페이지가 나올때는 detail페이지의 영화를 metadata로 생성
• detail모달이 아닐때는 홈페이지에 해당하는 matadata 생성

app/page.tsx

export async function generateMetadata(params: Params): Promise<Metadata> {
  const id = params.searchParams.id;
  const movie = await getMovie(id);
  const idImg = movie?.poster_path
    ? makeImagePath(movie.poster_path) || makeImagePath(movie.backdrop_path)
    : "/img/bond.webp";
  return {
    title: `${id ? movie.title : "홈페이지"}`,
    description: `${id ? movie.overview : "nexflix 클론코딩 사이트" || ""}`,
    openGraph: {
      images: `${
        id ? idImg : "https://joflix-coral.vercel.app/img/homepreview.png"
      }`,
    },
    verification: { google: "pQ1HYdIr6PZIM0nUWK8VFx_m9vvOX4LYGbZ0Uba4mbE" },
  };
}

1.2 시멘틱 태그로 변경

시멘틱 태그

1.3 sitemap.xml, robots.txt 생성

• sitemap()으로 build시 sitemap.xml 생성
• public폴더에 robots.txt 생성

import { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: "https://joflix-coral.vercel.app",
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 1,
    },
    {
      url: "https://joflix-coral.vercel.app/search",
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
  ];
}

# public/robots.txt

User-agent: *
Allow: /


Sitemap: https://https://joflix-coral.vercel.app/sitemap.xml

1.4 구글 서치 콘솔 등록

• generateMetadata로 metadata 동적 생성할때 verification 옵션으로 head에 등록

    verification: { google: "pQ1HYdIr6PZIM0nUWK8VFx_m9vvOX4LYGbZ0Uba4mbE" },

블로그 seo 정리

2. suspense

2.1 suspense로 HTML 스트리밍

// app/page.tsx
export default function Home() {
  return (
    <main>
      <Suspense>
        <Screen />
      </Suspense>
      <Suspense>
        <div className=" absolute w-full pb-5 top-2/3 sm:top-3/4">
          <Slider title="지금 뜨는 콘텐츠" />
        </div>
      </Suspense>
    </main>
  );
}

먼저 data fetching이 완료된 컴포넌트 부터 클라이언트에게 html을 보낼 수 있게 suspense로 감싸 처리 했습니다.

더 나아가 html의 렌더링이 끝난 컴포넌트는 html과 js로직을 연결(hydration)합니다.

블로그 suspense 정리

3. Husky, Lint-staged를 이용한 Pre-commit Hook 구현

staging 상태의 코드중 오류가 있는 코드가 있는경우 커밋을 못하게 pre-commit hook을 구현 했습니다.

eslint,prettier 설정, Pre-commit Hook 구현