Catch url 사용법

바로 상세페이지로 들어오는것도 보이게끔해주는방법

 <Link href={`/movies/${item.original_title}/${item.id}`} key={item.id}>

링크태그를 이렇게 바꿔서 주소에 넣은후에

[아무거나].tsx(js) 파일에서

type MovieDetailParams = [string, number] | [];
const Detail = () => {
    const router = useRouter();
    //const { id } = router.query;
    const [title, id] = (router.query.params || []) as MovieDetailParams;
    						// as 와 type를 이용한 방법 
    return (
        <div>
            <h4>상세 페이지</h4>
            <h1>{title},{id}</h1>
        </div>
    );
};

이렇게 해주면된다.

라우터에있는 주소 속성에서 바로 가져오는것. 좀더쉽다.

 

설명.

`const [title, id] = (router.query.params || []) as MovieDetailParams;`는 다음과 같이 작동합니다:

1. `router.query.params`를 가져옵니다. 이 값이 존재하지 않으면 `undefined`가 될 것입니다.
2. `router.query.params || []`는 `router.query.params`가 존재하지 않을 경우 빈 배열 `[]`로 대체합니다.
3. `(router.query.params || []) as MovieDetailParams`는 `router.query.params` 값이 존재할 경우 해당 값을 그대로 사용하고

존재하지 않을 경우 빈 배열 `[]`로 대체합니다. 그리고 `as MovieDetailParams`를 사용하여 타입을 `MovieDetailParams`로 지정합니다.

즉, `const [title, id] = (router.query.params || []) as MovieDetailParams;`는 `router.query.params` 값이 존재할 경우 해당 값으로 `title`과 `id` 변수를 설정하고, 값이 존재하지 않을 경우 `title`과 `id`를 모두 `undefined`로 설정합니다. 이렇게 함으로써 코드에서 `title`과 `id`를 항상 `MovieDetailParams` 타입으로 사용할 수 있습니다.

 

 

-최종 코드

[...params].tsx(or js)

import React from 'react';
import { useRouter } from 'next/router';
import SeoHead from '@/components/SeoHead';

interface Params {
  params: string | string[];
}
type MovieDetailParams = [string, string?] | [];

const Detail = ({ params }: { params:Params}) => {

  console.log(params, "여기");


  const [title, id] = (params.params || []) as MovieDetailParams;

  return (
    <div>
      <SeoHead title={title}/>
      <h1>
        {title},{id}
      </h1>
    </div>
  );
};
// 넥스트 13 최신버전  getServerSideProps 쓰질않고 이런식으로 사용한다.
export async function getStaticProps({ params }:Params) {
  return {
    props: { params },
  };
}
export async function getStaticPaths() {
  return {
    paths: [], // 동적 경로가 없으므로 빈 배열로 설정
    fallback: 'blocking', // 다른 경로로의 접근은 서버 사이드에서 대기
  };
}

export default Detail;

/////라우터를 사용하지 않는 방법이다. 경로를 데이터로 만들어서 데이터로 받는방법

getStaticProps 함수는 데이터를 가져와 params를 props로 전달합니다. getStaticPaths 함수는 동적 경로를 생성하기 위해 사용되며, 현재 예시에서는 빈 배열을 반환하여 동적 경로가 없음을 명시합니다. fallback 속성은 'blocking'으로 설정되어 다른 경로로의 접근이 발생할 경우 서버 사이드에서 대기하도록 지정됩니다.

 

동적 경로는 라우팅 시에 경로의 일부분이 동적으로 변경되는 경로를 의미합니다. 즉, 경로의 일부가 사용자나 데이터에 따라 동적으로 바뀌는 것을 말합니다. 동적 경로를 사용하면 동일한 페이지 컴포넌트를 여러 다른 데이터에 대해 재사용할 수 있습니다.