TIL: Next.js (7) Catch All URL - 220621

Next.js

URL에 데이터가 들어가면 SEO에 유리하다고 한다

Catch All URL

무엇이든 캐치해내는 URL..
url 의 깊이에 상관 없이..?

1. URL변수를 받아오는 [id].tsx의 파일 명을 [...params].tsx로 바꾼다
   -> query의 id 값이 string이 아닌 배열로 들어오게 된다
   -> 슬래시당 하나의 값이 들어감

2. 지금은 title을 URL에 넣어줄 것

Incognito 모드로 접속 시 변수를 사용한 URL은 에러 발생
-> 백엔드에서 pre-render 되기 때문

const [title, id] = params || []; 를 추가해준다
-> 이렇게 해주면 이 부분은 client side render를 하는 것 (SEO 취약)
-> SSR을 해주면 해결됨

// pages/index.tsx

import SEO from "../components/SEO";
import { Result } from "../types/movie";
import Link from "next/link";
import { useRouter } from "next/router";

interface Props {
  results: Result[];
}

export default function Home({ results }: Props) {
  const router = useRouter();
  const onClick = (id: number, title: string) => {
    router.push(`/movies/${title}/${id}`);
  };
  return (
    <div className="container">
      <SEO title="Home" />
      <h1 className="active">Hello</h1>

      {results?.map((movie) => (
        <div
          onClick={() => onClick(movie.id, movie.original_title)}
          className="movie"
          key={movie.id}
        >
          <img src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`} />
          <h4>
            <Link href={`/movies/${movie.original_title}/${movie.id}`}>
              <a>{movie.original_title}</a>
            </Link>
          </h4>
        </div>
      ))}
    </div>
  );
}

// pages/movies/[...params].tsx
import { useRouter } from "next/router";

interface Params {
  title: string;
  id: string;
}

export default function Detail() {
  const router = useRouter();
  let params = router.query.params as string[];
  const [title, id] = params || [];
  return (
    <div>
      <h4>{title}</h4>
    </div>
  );
}

SSR로 변경

import SEO from "../../components/SEO";

interface Params {
  params: { params: string[] };
}

interface Props {
  params: string[];
}

// getServerSideProps에서 return한 params를 받아옴
export default function Detail({ params }: Props) {
  const [title, id] = params || [];
  return (
    <div>
      <SEO title={title} />
      <h4>{title}</h4>
    </div>
  );
}

// next.js에서는 getServerSideProps에 server side context를 기본적으로 제공한다
// server side context 내에 params가 있ㅇ므
export function getServerSideProps({ params: { params } }: Params) {
  return {
    props: { params },
  };
}

컴포넌트 내부에서 router를 사용하면 프론트에서만 실행 됨
api를 불러오는 것이 아니라 server side context 만을 가져오는 것

URL에 들어있는 title로 SEO를 최적화 하고
유저가 접속하기 전에 탭 제목을 바꾸고
페이지를 pre-render를 한 것