Supabase를 사용하여 블로그의 페이지 조회수를 추적하는 방법

당신과 같은 독자는 MUO를 지원하는 데 도움이 됩니다. 귀하가 당사 사이트의 링크를 사용하여 구매하면 당사는 제휴 수수료를 받을 수 있습니다. 자세히 알아보기

페이지 조회수는 웹 성능을 추적하는 데 중요한 지표입니다. Google Analytics 및 Fathom과 같은 소프트웨어 도구는 외부 스크립트를 사용하여 이를 수행하는 간단한 방법을 제공합니다.

하지만 타사 라이브러리를 사용하고 싶지 않을 수도 있습니다. 이러한 경우 데이터베이스를 사용하여 사이트 방문자를 추적할 수 있습니다.

Supabase는 실시간으로 페이지 조회수를 추적하는 데 도움이 되는 오픈 소스 Firebase 대안입니다.

페이지 보기 추적을 시작하도록 사이트 준비

이 자습서를 따라 하려면 Next.js 블로그가 있어야 합니다. 아직 가지고 있지 않다면 할 수 있습니다 react-markdown을 사용하여 Markdown 기반 블로그 만들기 .

다음에서 공식 Next.js 블로그 시작 템플릿을 복제할 수도 있습니다. GitHub 저장소.

Windows 7을 xp처럼 보이게 하는 방법

Supabase는 Postgres 데이터베이스, 인증, 인스턴트 API, Edge Functions, 실시간 구독 및 스토리지를 제공하는 Firebase 대안입니다.

각 블로그 게시물의 페이지 보기를 저장하는 데 사용합니다.

수파베이스 데이터베이스 생성

로 이동 수파베이스 홈페이지 로그인하거나 계정에 가입하십시오.

Supabase 대시보드에서 다음을 클릭합니다. 새 프로젝트 그리고 조직을 선택합니다(Supabase는 계정의 사용자 이름으로 조직을 만들 것입니다).

프로젝트 이름과 비밀번호를 입력하고 클릭 새 프로젝트를 만듭니다.

API 섹션 아래의 설정 페이지에서 프로젝트 URL과 공개 및 비밀 키를 복사합니다.

열기 .env.local Next.js 프로젝트에 파일을 만들고 이러한 API 세부 정보를 복사합니다.

 NEXT_PUBLIC_SUPABASE_URL=""\nNEXT_PUBLIC_SUPABASE_KEY=""\nSUPABASE_SERVICE_KEY=""\n

그런 다음 SQL 편집기로 이동하여 다음을 클릭하십시오. 새 검색어 .

사용 테이블을 생성하는 표준 SQL 명령 ~라고 불리는 견해 .

 CREATE TABLE views (\n id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,\n slug text UNIQUE NOT NULL,\n view_count bigint DEFAULT 1 NOT NULL,\n updated_at timestamp DEFAULT NOW() NOT NULL\n);\n

또는 테이블 편집기를 사용하여 뷰 테이블을 만들 수 있습니다.

테이블 편집기는 대시보드의 왼쪽 창에 있습니다.

보기를 업데이트하기 위한 Supabase 저장 프로시저 만들기

Postgres는 Supabase API를 통해 호출할 수 있는 SQL 함수를 기본적으로 지원합니다. 이 기능은 조회수 테이블의 조회수 증가를 담당합니다.

데이터베이스 기능을 만들려면 다음 지침을 따르십시오.

왼쪽 창에서 SQL 편집기 섹션으로 이동합니다.
새 쿼리를 클릭합니다.

이 SQL 쿼리를 추가하여 데이터베이스 기능을 생성합니다.

 CREATE OR REPLACE FUNCTION update_views(page_slug TEXT) 
RETURNS void 
LANGUAGE plpgsql 
AS $$ 
BEGIN 
    IF EXISTS (SELECT FROM views WHERE slug=page_slug) THEN 
        UPDATE views 
        SET view_count = view_count + 1, 
            updated_at = now() 
        WHERE slug = page_slug; 
    ELSE 
        INSERT into views(slug) VALUES (page_slug); 
    END IF; 
END; 
$$;

실행을 클릭하거나 Cmd + Enter(Ctrl + Enter)를 클릭하여 쿼리를 실행합니다.

이 SQL 함수는 update_views라고 하며 텍스트 인수를 허용합니다. 먼저 해당 블로그 게시물이 테이블에 이미 존재하는지 확인하고 존재하는 경우 조회수를 1씩 증가시킵니다. 그렇지 않은 경우 조회수가 기본적으로 1인 게시물에 대한 새 항목을 생성합니다.

Next.js에서 Supabase 클라이언트 설정

수파베이스 설치 및 구성

npm을 통해 @supabase/supabase-js 패키지를 설치하여 Next.js에서 데이터베이스에 연결합니다.

 npm install @supabase/supabase-js\n

다음으로 /lib/supabase.ts 프로젝트의 루트에 있는 파일을 만들고 Supabase 클라이언트를 초기화합니다.

 import { createClient } from '@supabase/supabase-js';\nconst supabaseUrl: string = process.env.NEXT_PUBLIC_SUPABASE_URL || '';\nconst supabaseServerKey: string = process.env.SUPABASE_SERVICE_KEY || '';\nconst supabase = createClient(supabaseUrl, supabaseServerKey);\nexport { supabase };\n

데이터베이스를 생성할 때 .env.local에 API 자격 증명을 저장했음을 기억하십시오.

페이지 보기 업데이트

Supabase에서 페이지 조회수를 가져오고 사용자가 페이지를 방문할 때마다 조회수를 업데이트하는 API 경로를 만듭니다.

이 경로는 /api 라는 파일 안의 폴더 views/[slug].ts . 파일 이름 주위에 괄호를 사용하면 동적 경로가 생성됩니다. 일치하는 매개변수는 slug라는 쿼리 매개변수로 전송됩니다.

 import { supabase } from "../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } from "next";\nconst handler = async (req: NextApiRequest, res: NextApiResponse) => {\n if (req.method === "POST") {\n await supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n return res.status(200).json({\n message: "Success",\n });\n }\n if (req.method === "GET") {\n const { data } = await supabase\n .from("views")\n .select("view_count")\n .filter("slug", "eq", req.query.slug);\n if (data) {\n return res.status(200).json({\n total: data[0]?.view_count || 0,\n });\n }\n }\n return res.status(400).json({\n message: "Invalid request",\n });\n};\nexport default handler;\n

첫 번째 if 문은 요청이 POST 요청인지 확인합니다. 그렇다면 update_views SQL 함수를 호출하고 슬러그를 인수로 전달합니다. 이 기능은 조회수를 늘리거나 이 게시물에 대한 새 항목을 만듭니다.

두 번째 if 문은 요청이 GET 메서드인지 확인합니다. 그렇다면 해당 게시물의 총 조회수를 가져와서 반환합니다.

요청이 POST 또는 GET 요청이 아닌 경우 처리기 함수는 '잘못된 요청' 메시지를 반환합니다.

블로그에 페이지 보기 추가

페이지 보기를 추적하려면 사용자가 페이지를 탐색할 때마다 API 경로를 방문해야 합니다.

swr 패키지를 설치하여 시작하십시오. 이를 사용하여 API에서 데이터를 가져옵니다.

아이폰에서 비디오를 압축하는 방법

 npm install swr\n

swr은 재검증하는 동안 부실함을 나타냅니다. 백그라운드에서 최신 데이터를 가져오는 동안 사용자에게 보기를 표시할 수 있습니다.

그런 다음 viewsCounter.tsx라는 새 구성 요소를 만들고 다음을 추가합니다.

 import useSWR from "swr";\ninterface Props {\n slug: string;\n}\nconst fetcher = async (input: RequestInfo) => {\n const res: Response = await fetch(input);\n return await res.json();\n};\nconst ViewsCounter = ({ slug }: Props) => {\nconst { data } = useSWR(`/api/views/${slug}`, fetcher);\nreturn (\n <span>{`${\n (data?.total) ? data.total :"0"\n } views`}</span>\n );\n};\nexport default ViewsCounter;\n

이 구성요소는 각 블로그의 총 조회수를 렌더링합니다. 게시물의 슬러그를 소품으로 받아들이고 해당 값을 사용하여 API에 요청합니다. API가 보기를 반환하면 해당 값을 표시하고 그렇지 않으면 '0 보기'를 표시합니다.

보기를 등록하려면 각 게시물을 렌더링하는 구성 요소에 다음 코드를 추가합니다.

 import { useEffect } from "react";\nimport ViewsCounter from "../../components/viewsCounter";\ninterface Props {\n slug: string;\n}\nconst Post = ({ slug }:Props) => {\n useEffect(() => {\n fetch(`/api/views/${slug}`, {\n method: 'POST'\n });\n }, [slug]);\nreturn (\n <div>\n <ViewsCounter slug={slug}/>\n // blog content\n </div>\n)\n}\nexport default Post\n

조회수가 어떻게 업데이트되고 있는지 보려면 Supabase 데이터베이스를 확인하세요. 게시물을 방문할 때마다 1씩 증가해야 합니다.

페이지 조회수 이상 추적

페이지 조회수는 사이트의 특정 페이지를 방문하는 사용자 수를 알려줍니다. 실적이 좋은 페이지와 그렇지 않은 페이지를 확인할 수 있습니다.

더 나아가려면 방문자의 리퍼러를 추적하여 트래픽이 어디에서 오는지 확인하거나 대시보드를 만들어 데이터를 더 잘 시각화할 수 있습니다. Google 애널리틱스와 같은 분석 도구를 사용하면 언제든지 작업을 단순화할 수 있습니다.