Next.js 13버전 라우팅

재봉팔 2023. 4. 27. 20:49

기초적이지만 몰랐던 사실이 있다.

dev로 페이지를 보게 되면 변경한 내용이 바로 화면에 보여져야하기 때문에 SSR로 렌더링이 된다. 그래서 저장을 할 때마다 터미널에 보게 되면 아래 문구를 볼 수 있다. 요청할 때 컴파일했다는 것이다.

wait - compiling /products/[pants]/page (client and server)...
event - compiled client and server successfully in 819 ms (508 modules)

build를 하게 되면 친절하게 어떤 페이지가 SSR인지, SSG인지를 알려준다.

start는 빌드 된 파일을 실행 시킬 때 쓰면 된다.

위에서 build한 내용을 보면 about은 static으로 만든 페이지다. 빌드할 때 HTML파일을 만든 페이지란 걸 알 수 있는데, 아래에서 보면 왼쪽은 dev 환경, 오른쪽은 build 된 환경이다.

속도 차이를 비교해보자.

라우팅에 대해서 알아보자.

13버전에서는

app 폴더 안에서 폴더를 만들고 파일명을 page로 해주어야 라우팅에 등록이 된다.

여기서 파일명을 page가 아닌 다른 파일명으로 했을 때는 404 에러가 뜬다.

그러면 우리는 localhost:3000/about 으로 입력하면 about 페이지가 뜨게 된다.

💡그러면 저기서 중첩된 라우팅을 만들고 싶다면 어떻게 해야할까?

그냥 폴더를 하나 더 만들어서 page 파일을 만들면 된다.

localhost:3000/about/detail 로 접근이 가능하다.

💡그러면 동적 라우팅이란건 뭘까?

예를 들어 products/ 뒤에 프로덕트 id에 따라 상품 데이터들을 다르게 보여줘야 할때는 어떻게 할까?

이렇게 []로 폴더명을 지으면 products/asdf 이든, products/1234 든, 여기에 무슨 이름이든 pants 폴더 안에 page가 렌더링 된다.

💡그러면 뒤에 오는 주소를 알고 싶으면 어떻게 해야 할까?

import React from "react";
type Props = {
    params: {
        pants: string;
    };
};
const page = ({ params }: Props) => {
    return <div>{params.pants}의 바지 상세페이지다</div>;
};

export default page;


// Props로 params를 받게 되면 params 안에 객체 형태로 우리가 폴더명으로 설정해주었던 [폴더명]이 객체 형태로 들어간다.
// 폴더명을 [pants]로 했다면 params : {pants: "1234"} 이런식으로 value 값에는 마지막에 입력한 주소 값이다.
// [slug]로 지었다면 params : {slug: "asdf"} 이런식으로 말이다.

우리는 지금 params의 값에 따라 달라지는 화면을 볼 수 있다.

params의 값에 따라 요청을 받아 페이지가 생성되기 때문에 SSR이 된다고 볼 수 있다.

그러면 특정 상품 페이지는 SSG로 미리 만들어 놓고 싶으면 어떻게 해야할까?

import React from "react";
type Props = {
    params: {
        pants: string;
    };
};
const page = ({ params }: Props) => {
    return <div>{params.pants}의 바지 상세페이지다</div>;
};

export default page;

export function generateStaticParams() {
    const list = ["pants", "skirts", "outer", "inner"];
    return list.map((product) => {
        return {
            pants: product,
        };
    });
}

// generateStaticParams 함수를 이용해서 params 값을 props로 넘겨주면 된다.

빌드를 해서 확인 해보면 SSG로 만들어졌다는 걸 볼 수 있다.