[Next.js] Google Analytics Data API (GA4) 연동해서 방문자 데이터 가져오기

구현 목표Google Analytics(GA4)의 Data API를 이용해서 Next.js에서 “일자별 방문자 수”, “운영체제별 방문자 수”, “조회수 상위 페이지” 데이터를 가져오는 API를 구현해 보자. Google Analytics Data APIGA4에서 수집한 통계 데이터를 외부 앱에서 사용할 수 있도록 제공하는 API이다. 이 API를 사용하기 위해서는 서비스 계정을 생성하고, JSON 형태의 키 파일을 발급받아야 한다. 서비스 계정 생성구글 클라우드 콘솔에서 `IAM 및 관리자 > 서비스 계정` 탭에 들어가서 [서비스 계정 만들기] 버튼을 클릭한다. `서비스 계정 ID` 항목만 입력하고 [완료] 버튼을 누르면 간단하게 서비스 계정이 생성된다. JSON 키 파일 발급새로 생성한 서비스 계정의..

• format_list_bulleted JavaScript
• · 2025. 6. 27.
• textsms

[Next.js] 검색 기능 사용을 유도하는 툴팁 구현하기

문제 상황두 달 전에 웹소설 캘린더에 작가나 작품명을 검색할 수 있는 검색 기능을 추가했다.이 서비스의 핵심 기능이라고 생각했기 때문에 많은 사용을 기대했다.하지만 GA 데이터를 확인해 보니, 이용률이 거의 제로에 가까웠다. 사용자가 검색 기능의 존재를 인지하지 못하고 있다고 생각돼서검색 기능의 사용을 유도하기 위해 검색 버튼 하단에 툴팁을 추가해보기로 했다. 툴팁 UI툴팁은 기능에 대한 보조 설명을 제공하거나, 혜택 정보 제공, 다음 행동을 제시하는 경우에 사용할 수 있다.나는 사용자들에게 검색 기능이 있다는 것을 알리고, 자연스러운 사용을 유도하기 위해 툴팁을 사용했다. 툴팁 컴포넌트 구현import Image from "next/image";export default function SearchTo..

• format_list_bulleted JavaScript
• · 2025. 5. 30.
• textsms

[Next.js 15] 동적으로 메타 태그 생성하기 Dynamic Metadata

Dynamic Metadata가 필요한 경우검색 페이지에서 검색어에 따라 `title` 항목이 `{검색어} 검색 결과 | 웹소설 캘린더`라는 동적인 메타데이터를 생성하고 싶었다. 이처럼 페이지의 콘텐츠나 URL 파라미터에 따라 메타데이터가 변경되어야 하는 경우에는 동적 메타데이터 생성이 필요하다. Next.js의 Metadata 생성 방법Next.js는 SEO를 개선하기 위해 애플리케이션 메타데이터(`head` 요소 내부의 `meta` 및 `link` 태그)를 자동으로 생성해 주는 API를 제공한다. Static Metadata (정적 메타데이터)// layout.tsximport type { Metadata } from 'next' export const metadata: Metadata = { ti..

• format_list_bulleted JavaScript
• · 2025. 4. 1.
• textsms

Next.js & Supabase로 검색 결과 페이지네이션 구현하기

검색 결과 페이지네이션의 필요성검색 결과가 많아지면 슈퍼베이스의 쿼리 개수 제한(1,000개)을 초과하거나 성능이 저하될 수 있다.이를 해결하기 위해 검색 결과를 n개씩 나눠서 가져오는 페이지네이션 기능을 구현했다. page 쿼리 파라미터 추가검색 페이지의 URL을 `/search?q=hello&page=2`와 같이 변경하여 검색어와 페이지 정보를 포함하도록 설정한다. 검색어로 URL 업데이트하기import { useRouter, useSearchParams, usePathname } from "next/navigation";const { replace } = useRouter();const pathname = usePathname();const searchParams = useSearchParams()..

• format_list_bulleted JavaScript
• · 2025. 3. 30.
• textsms

[Next.js 14] OTF 로컬 폰트 적용하기

Next.js 14 프로젝트에 `.otf` 리디바탕 폰트를 추가해 보자! `public/fonts` 디렉토리에 폰트 파일을 추가했다. import localFont from "next/font/local";const ridiBatang = localFont({ src: "../../public/fonts/RIDIBatang.otf", display: "swap",});`src/app/layout.tsx`에서 `localFont`를 import하고 올바른 경로에서 폰트 파일을 불러온다. export default function RootLayout({ children,}: Readonly) { return ( {children} );} `RootLa..

• format_list_bulleted JavaScript
• · 2025. 2. 24.
• textsms

Next.js & Supabase 프로젝트 생성 및 기초 세팅

슈퍼베이스를 사용하는 Next.js 프로젝트를 생성해 보자. Next.js app 생성npx create-next-app -e with-supabase다음과 같은 항목들이 미리 구성되어 있는 앱을 생성한다.Cookie-based AuthTypeScriptTailwind CSS `npm run dev`로 앱을 실행했을 때 화면이다. 스크롤 내리면 체크리스트도 있다. Supabase 프로젝트 연결슈퍼베이스 프로젝트를 생성한다. database.new `env.example` 파일 이름을 `env.local`로 변경하고 환경 변수를 입력한다. 프로젝트를 생성했다면 슈퍼베이스 공식문서 3번 항목에서 친절하게 입력할 값을 모두 알려준다. Supabase 데이터 쿼리프로젝트가 잘 연결됐는지 확인해 보기 위해 테스..

• format_list_bulleted JavaScript
• · 2024. 12. 24.
• textsms

[TIL] 2023.07.01 Next.js_router.push와 router.replace의 차이점

useRouter import { useRouter } from 'next/navigation'; Next.js 13부터는 `useRouter`를 'next/router'가 아닌 'next/navigation'에서 import 해서 사용해야 한다! 만약 `useRouter`를 'next/router'에서 import하면 이미지와 같은 에러가 발생한다. 잠시 router 관련 Next.js 13에서 달라진 점을 살펴보자. Migrating from the pages directory: The new useRouter hook should be imported from `next/navigation` and not `next/router` The pathname string has been removed a..

• format_list_bulleted JavaScript
• · 2023. 7. 1.
• textsms

[Next.js] Next.js 13에서 SSG, SSR, ISR 적용하기_fetch() API

NEXT.JS 13 버전에서는 `getStaticProps`, `getServerSideProps` 함수를 더 이상 사용하지 않는다는 소식을 보고 그럼 SSR과 SSG는 어떻게 적용할 수 있는 걸까 궁금해서 찾아봤다. 일단 NEXT 13부터 모든 컴포넌트가 기본적으로 서버 컴포넌트로 동작하게 되었으며 SSR, SSG, ISR을 적용하기 위해서 `getStaticProps`, `getServerSideProps` 등의 함수가 아닌 `fetch` API를 사용한다. Data Fetching // This request should be cached until manually invalidated. // Similar to `getStaticProps`. // `force-cache` is the defaul..

• format_list_bulleted JavaScript
• · 2023. 6. 10.
• textsms

[TIL] 2023.05.19 Next.js 13버전에 Recoil 적용하기

Root Layout에 바로 RecoilRoot를 넣으려고 했더니 에러가 발생했다. TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. RecoilRoot를 사용하려면 서버 컴포넌트를 클라이언트 컴포넌트로 변경해야 하는 거 같다. 하지만 Root Layout 파일을 클라이언트로 변경하면 모든 컴포넌트가 클라이언트 컴포넌트로 변경되는 결과가 생길 거 같아서 recoil 파일을 따로 빼서 적용하기로 했다. 'use client' import { ReactNode } from 'react' import { RecoilRoot } from 're..

• format_list_bulleted JavaScript
• · 2023. 5. 19.
• textsms

[TIL] 2023.05.07 Next.js next/navigation과 usePathname()

route에 따라 코드를 다르게 작성하고 싶어서 useRouter를 이용해서 pathname을 가져오려고 했다. 그런데 서버 컴포넌트를 사용할 때는 next/navigation을 사용하라는 에러 메시지가 떴다. // 수정 전 import { useRouter } from 'next/router'; // 수정 후 import { useRouter } from 'next/navigation'; 그래서 useRouter를 next/navigation에서 import 해 오는 방식으로 수정했는데 또다시 클라이언트 컴포넌트에서만 useRouter를 사용할 수 있다는 에러 메시지가 발생했다. 그래서 최상단에 "use client"를 추가하여 서버 컴포넌트를 클라이언트 컴포넌트로 변경해 주었다. import { us..

• format_list_bulleted JavaScript
• · 2023. 5. 7.
• textsms