[Next.js] Custom App 페이지를 이용해서 페이지 로그(log) 기록하기

 

개요

서비스를 운영하다 보면, 로그를 쌓을 일이 많이 생길 텐데요.

페이지별 로그도 쌓아야 하는 경우가 생깁니다.

 

Next.js에서는 Custom App 페이지를 (_app.jsx 또는 _app.tsx) 제공하고 있는데요.

Custom App 페이지에서 페이지에 공통적으로 사용할 로직을 적용할 수 있습니다.

 

Next.js에서 제공하는 router를 통해 URL pathname을 파악할 수 있는데요.

페이지 path를 파일로 관리하여 router pathname과 비교하면, 어떤 페이지인지 알아낼 수 있습니다.

 

 

 

 

프로젝트 구조 예시

 

 

 

 

페이지 & 페이지 pathname

• 메인 : /main
• 메인 상세 : /main/[idx]
• About : /about

 

 

 

페이지 파일 생성 (pages.ts)

// @/constants/pages.ts

export const pages = {
    Main: "/main",
    MainDetail: "/main/[idx]",
    About: "/about",
} as const;

 

 

 

Custom App 페이지 (_app.tsx)

import AppContainer from "@/containers/AppContainer";
import "@/public/normalize.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
    return (
		<AppContainer>
			<Component {...pageProps} />
		</AppContainer>
    );
}

_app.tsx의 Component 컴포넌트는 페이지 컴포넌트를 의미합니다.

 

 

 

AppContainer 로직

import { pages } from "@/constants/pages";
import { useRouter } from "next/router";
import { PropsWithChildren, useEffect } from "react";

export default function AppContainer(props: PropsWithChildren) {
    const router = useRouter();
    const keys = Object.keys(pages);

    const getPage = (pathname: string) => {
        return keys.find((key) => pages[key] === pathname);
    };

    const handlePageLog = () => {
        const page = getPage(router.pathname);

        // Logging...
        // 여기에 3rd-party 로그 라이브러리를 사용해도 됩니다..
        console.log(page);
    };

    useEffect(() => {
        handlePageLog();
    }, []);

    return <>{props.children}</>;
}

AppContainer로 페이지 컴포넌트 감싸주고, 페이지에 공통적으로 적용할 로직을 적용할 수 있는데요.

위와 같이 페이지 로그를 기록하는 로직을 작성하였습니다.

 

 

 

결과