[NextJS] params과 SEO

💻 URL주소에 item 타이틀 넣기

🖤 Params & SEO최적화시키기

• NextJS My-App구조
  
  여기서 봐야할 것은 index.js와 [...params].js다.
  구글 검색엔진 최적화를 위해 url주소에 아이템 정보(타이틀 등)를 간단하게 넣어두면 많이 사람들한테 우리의 프로젝트를 노출시킬 수 있다.
• index.js

<script>
import Head from "next/head";
import Link from "next/link";
import Seo from "../../component/Seo";
import { useState, useEffect } from "react";
import { useRouter } from "next/router";

export default function Home({ results }) {
    const router = useRouter();
    const onClick = (id, title) => {
        router.push(`/movies/${title}/${id}`);
    };
    console.log(results);
    return (
        <div className="container">
            <Seo title="Home" />

            {results?.map((item) => (
                <div onClick={() => onClick(item.id, item.original_title)} className="movie" key={item.id}>
                    <img style={{ width: "300px", height: "450px" }} src={`https://image.tmdb.org/t/p/w500${item.poster_path}`} />
                    <h4>
                        <Link href={`/movies/${item.original_title}/${item.id}`}>{item.original_title} </Link>
                    </h4>
                </div>
            ))}
          </div>
</script>

• [...params].js

<script>
import { useRouter } from "next/router";
import Seo from "../../../component/Seo";

export default function Detail({ params }) {
    const router = useRouter();
    const [title, id] = params || [];
    return (
        <div>
            <Seo title={title} />
            <h4>{title || "Loading..."}</h4>
        </div>
    );
}

export function getServerSideProps({ params: { params } }) {
    return {
        props: {
            params,
        },
    };
}
</script>

위의 코드를 적용했을 시 페이지소스에서 우리의 아이템 정보가 나오는지 확인해본 결과

잘 나오는 것을 확인할 수 있다.

또한 params에 포함된 title이 Seo컴포넌트에 전달되어 아이템 정보가 웹 Head와 url주소에 정상적으로 나오는 것도 확인할수있다.

💡 파라미터값이 [...params].js에 전달되는 이유

index.js 코드를 살펴보면 아이템의 title과 id정보를 [...params].js에 보내는 부분을 찾을 수 없다. 하지만 우리가 보내고싶은 아이템정보들은 잘전달된것을 결과사진으로 볼수있었다. 어떻게 파라미터값들이 [...params].js에 보내질수있었던 것일까?

❗ 해당 형식의 url페이지를 정의한 [...params].js 파일의 이름인 즉, 'params'라는 변수에 배열 형식으로 저장하기 때문이다.

• [...params].js (console로 확인해보기)

<script>
import { useRouter } from "next/router";
import Seo from "../../../component/Seo";

export default function Detail({ params }) {
    const router = useRouter();
    const [title, id] = params || [];
    console.log("params에저장된값", params);
    return (
        <div>
            <Seo title={title} />
            <h4>{title || "Loading..."}</h4>
        </div>
    );
}
</script>

• console
  
  타이틀과 id가 params에 배열형식으로 저장된것을 알수있다.

🖤 파라미터값을 불러오는 방법

해당 컴포넌트에서
1. router를 이용해 받아오는 방법

다만, router를 생성하려면 js스크립트를 통해 라우터를 형성하는 시간이 필요함.
그래서 만약 router를 생성해서, router를 통해 params 값을 받아오려면
( const [title, id] = router.query.params )
, 처음에는 에러가 난다.
에러가 나는 이유는, router가 없으니, router.query.params 값도 얻을 수 없는데,
const [title, id]=router.query.params; 식으로 title이나 id 변수에, 없는 값을 할당하려 하니
에러가 난다.
그래서 에러를 방지하기 위해 빈 배열을 이용한 것이다.
const [title, id] = router.query.params || [];
조금 시간이 지나 router가 생성되면, 서버에서 간직하고 있는 params객체 값을 router.query.params를 통해 얻어올 수 있다.

2. rouer이용하지 않고 다이렉트로 server로 부터 받아오는 방법

<script>
export function getServerSideProps(**{params: {params} }**) {

         return { props: {params} };

}
</script>

이는 {params: {params} 객체를 서버로 부터 받아오고, 현제 페이지에 props로 {params}객체를 리턴하는 것이다.

<script>
export default function Detail({ params }) {
    const router = useRouter();
    const [title, id] = params || [];
    console.log("params에저장된값", params);
    return (
        <div>
            <Seo title={title} />
            <h4>{title || "Loading..."}</h4>
        </div>
    );
}
export function getServerSideProps({ params: { params } }) {
    return {
        props: {
            params,
        },
    };
}
</script>

그러면 위의 코드와 같이 params값을 쏙 빼내서 사용할 수 있다.

getSeverSideProps 함수를 이용해서 서버로부터 그 객체 모양 그대로를 받아오는 것이다. 그리고 리턴은 {params}를 props로 한다.

해당 url주소가 활성화되는 함수인 Detail함수가 {params}객체를 인자로 받아들여서 그안의 내용을 원하는 변수에 넣어서 사용할 수 있다.

🍀 마무리

pages에 movies 폴더 밑에 [...parms].js라는 파일을 만드는 순간, next.js서버는 { params: { params: [ , ] } } 객체를 만든다. 그러므로 (http://localhost:3000/movies/#####/****)/?? 형식의 url 주소로 이동하게 되면
서버에 { params: { params: [ #### , *** , ?? ] } } 객체가 생성되고 이객체값을 받아오는 두가지 방법은 아래와 같다.
1. router을 이용한 방법
2. getSeverSideProps()를 이용한 방법
2번방법은 13 최신버전에서는 사용하지않는다고한다.
대신 이걸로 사용합니다.

<script>
export async function getStaticProps({ params }:Params) {
return {
props: { params },
};
}
export async function getStaticPaths() {
return {
paths: [], // 동적 경로가 없으므로 빈 배열로 설정
fallback: 'blocking', // 다른 경로로의 접근은 서버 사이드에서 대기
};
}
</script>

참고자료
노마드코더-Next시작하기
노션참고-nextjs에서 params 및 router