[25.02.26 / TASK-119] Feature - SEO 세팅 (#16)

* refactor: env 정리

* refactor: 규칙 완화

* feature: GA 설정

* feature: SEO 설정

* feature: robots 및 sitemap 생성

* feature: 놓친 env 값 설정

* modify: env 칭호 통일

* modify: 개선된 opengraph 이미지

* refactor: 명명 규칙 통일

* refactor: 필요 없는 유틸리티 타입 제거

Author: six-standard

.env.sample

@@ -3,7 +3,8 @@
 NEXT_PUBLIC_BASE_URL=<'server url here'>
 NEXT_PUBLIC_VELOG_URL=https://velog.io
 NEXT_PUBLIC_ABORT_MS=<'abort time(ms) for fetch here'>
-SENTRY_AUTH_TOKEN=<'sentry auth token here'>
+NEXT_PUBLIC_SENTRY_AUTH_TOKEN=<'sentry auth token here'>
 NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY=<'channelTalk plugin key here'>
+NEXT_PUBLIC_GA_ID=<'Google Analytics ID here'>
 NEXT_PUBLIC_EVENT_LOG=<'Whether to send an event log here (true | false)'>
-SENTRY_DSN=<'sentry dsn here'>
+NEXT_PUBLIC_SENTRY_DSN=<'sentry dsn here'>

.github/workflows/docker-publish.yaml

@@ -30,9 +30,10 @@ jobs:
           echo "NEXT_PUBLIC_VELOG_URL=${{ secrets.NEXT_PUBLIC_VELOG_URL }}" >> .env
           echo "NEXT_PUBLIC_ABORT_MS=${{ secrets.NEXT_PUBLIC_ABORT_MS }}" >> .env
           echo "NEXT_PUBLIC_EVENT_LOG=${{ secrets.NEXT_PUBLIC_EVENT_LOG }}" >> .env
-          echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> .env
+          echo "NEXT_PUBLIC_SENTRY_AUTH_TOKEN=${{ secrets.NEXT_PUBLIC_SENTRY_AUTH_TOKEN }}" >> .env
           echo "NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY=${{ secrets.NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY }}" >> .env
-          echo "SENTRY_DSN=${{ secrets.SENTRY_DSN }}" >> .env
+          echo "NEXT_PUBLIC_GA_ID=${{ secrets.NEXT_PUBLIC_GA_ID }}" >> .env
+          echo "NEXT_PUBLIC_SENTRY_DSN=${{ secrets.NEXT_PUBLIC_SENTRY_DSN }}" >> .env
           cp .env .env.production
 
       - name: Build Next.js application

eslint.config.mjs

@@ -44,7 +44,7 @@ export default [
       '@typescript-eslint/promise-function-async': 'error',
       '@typescript-eslint/consistent-type-assertions': 'error',
       '@typescript-eslint/naming-convention': 'off',
-      'no-restricted-imports': ['error', { patterns: ['..*'] }],
+      'no-restricted-imports': ['warn', { patterns: ['..*'] }],
     },
     languageOptions: {
       parserOptions: { project: true, tsconfigRootDir: import.meta.dirname },

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@channel.io/channel-web-sdk-loader": "^2.0.0",
+    "@next/third-parties": "^15.1.7",
     "@sentry/nextjs": "^8.47.0",
     "@tanstack/react-query": "^5.61.3",
     "@tanstack/react-query-devtools": "^5.62.11",

pnpm-lock.yaml

@@ -3,17 +3,18 @@
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
 import * as Sentry from '@sentry/nextjs';
+import { env } from '@/constants';
 
 Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  dsn: env.SENTRY_DSN,
 
   // Add optional integrations for additional features
   integrations: [
     Sentry.replayIntegration({ maskAllText: false, blockAllMedia: false }),
   ],
 
   // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
-  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1,
+  tracesSampleRate: env.NODE_ENV === 'production' ? 0.1 : 1,
 
   // Define how likely Replay events are sampled.
   // This sets the sample rate to be 10%. You may want this to be 100% while

public/opengraph-image.png

@@ -4,12 +4,13 @@
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
 import * as Sentry from '@sentry/nextjs';
+import { env } from '@/constants';
 
 Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  dsn: env.SENTRY_DSN,
 
   // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
-  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.05 : 1,
+  tracesSampleRate: env.NODE_ENV === 'production' ? 0.05 : 1,
 
   // Setting this option to true will print useful information to the console while you're setting up Sentry.
   debug: false,

sentry.client.config.ts

@@ -3,12 +3,13 @@
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
 import * as Sentry from '@sentry/nextjs';
+import { env } from '@/constants';
 
 Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  dsn: env.SENTRY_DSN,
 
   // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
-  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1,
+  tracesSampleRate: env.NODE_ENV === 'production' ? 0.1 : 1,
 
   // Setting this option to true will print useful information to the console while you're setting up Sentry.
   debug: false,

sentry.edge.config.ts

@@ -1,9 +1,9 @@
 import { http } from 'msw';
-import { PATHS } from '@/constants';
+import { env, PATHS } from '@/constants';
 import { LoginVo } from '@/types';
 import { BaseError, BaseSuccess } from './responses';
 
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL + '/api';
+const BASE_URL = env.BASE_URL + '/api';
 
 const login = http.post(`${BASE_URL}${PATHS.LOGIN}`, async ({ request }) => {
   const { accessToken, refreshToken } = (await request.json()) as LoginVo;

sentry.server.config.ts

@@ -1,18 +1,8 @@
 import returnFetch, { FetchArgs } from 'return-fetch';
 
 import { captureException, setContext } from '@sentry/nextjs';
-import { EnvNotFoundError, ServerNotRespondingError } from '@/errors';
-
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
-const ABORT_MS = Number(process.env.NEXT_PUBLIC_ABORT_MS);
-
-if (Number.isNaN(ABORT_MS)) {
-  throw new EnvNotFoundError('ABORT_MS');
-}
-
-if (!BASE_URL) {
-  throw new EnvNotFoundError('BASE_URL');
-}
+import { ServerNotRespondingError } from '@/errors';
+import { env } from '@/constants';
 
 type ErrorType = {
   code: string;
@@ -37,7 +27,7 @@ const abortPolyfill = (ms: number) => {
 };
 
 const fetch = returnFetch({
-  baseUrl: BASE_URL,
+  baseUrl: env.BASE_URL,
   headers: {
     Accept: 'application/json',
     'Content-Type': 'application/json',
@@ -76,8 +66,8 @@ export const instance = async <I, R>(
         : init?.headers,
       body: init?.body ? JSON.stringify(init.body) : undefined,
       signal: AbortSignal.timeout
-        ? AbortSignal.timeout(ABORT_MS)
-        : abortPolyfill(ABORT_MS),
+        ? AbortSignal.timeout(Number(env.ABORT_MS))
+        : abortPolyfill(Number(env.ABORT_MS)),
       credentials: 'include',
       cache: 'no-store',
     });

src/__mock__/handlers.ts

@@ -1,5 +1,10 @@
+import { Metadata } from 'next';
 import { ArriveSoon } from '@/components';
 
+export const metadata: Metadata = {
+  title: '통계 비교',
+};
+
 export default function Page() {
   return <ArriveSoon />;
 }

src/apis/instance.request.ts

@@ -1,6 +1,11 @@
+import { Metadata } from 'next';
 import { ArriveSoon } from '@/components';
 // import { Content } from './Content';
 
+export const metadata: Metadata = {
+  title: '리더보드',
+};
+
 export default function Page() {
   return <ArriveSoon />;
 }

src/app/(with-tracker)/(auth-required)/compare/page.tsx

@@ -7,7 +7,6 @@ import { Content } from './Content';
 
 export const metadata: Metadata = {
   title: '대시보드',
-  description: '각종 Velog 통계를 볼 수 있는 대시보드',
 };
 
 interface IProp {

src/app/(with-tracker)/(auth-required)/leaderboards/page.tsx

@@ -4,7 +4,6 @@ import { Content } from './Content';
 
 export const metadata: Metadata = {
   title: '로그인',
-  description: '대시보드 페이지에 진입하기 전 표시되는 로그인 페이지',
 };
 
 export default function Page() {

src/app/(with-tracker)/(auth-required)/main/page.tsx

@@ -4,13 +4,29 @@ import 'react-toastify/dist/ReactToastify.css';
 import * as sentry from '@sentry/nextjs';
 import type { Metadata } from 'next';
 import { ReactNode } from 'react';
+import { GoogleAnalytics } from '@next/third-parties/google';
 import './globals.css';
 import { ChannelTalkProvider, QueryProvider } from '@/components';
+import { env } from '@/constants';
+
+export const BASE = 'https://velog-dashboard.kro.kr/';
 
 export const metadata: Metadata = {
   title: 'Velog Dashboard',
-  description: 'Velog 통계를 확인할 수 있는 Velog Dashboard',
+  metadataBase: new URL(BASE),
+  description: '어디서든 편리하게 확인하는 Velog 통계 서비스, Velog Dashboard',
   icons: { icon: '/favicon.png' },
+  alternates: {
+    canonical: 'https://velog-dashboard.kro.kr/',
+  },
+  openGraph: {
+    siteName: 'Velog Dashboard',
+    description:
+      '어디서든 편리하게 확인하는 Velog 통계 서비스, Velog Dashboard',
+    url: 'https://velog-dashboard.kro.kr/',
+    images: [{ url: '/opengraph-image.png', alt: 'Velog Dashboard' }],
+    type: 'website',
+  },
 };
 
 const NotoSansKr = Noto_Sans_KR({ subsets: ['latin'] });
@@ -30,6 +46,7 @@ export default function RootLayout({
           </QueryProvider>
         </sentry.ErrorBoundary>
       </body>
+      <GoogleAnalytics gaId={env.GA_ID} />
     </html>
   );
 }

src/app/(with-tracker)/(login)/page.tsx

@@ -0,0 +1,12 @@
+import { MetadataRoute } from 'next';
+import { BASE } from './layout';
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+    },
+    sitemap: BASE + '/sitemap.xml',
+  };
+}

src/app/layout.tsx

@@ -0,0 +1,23 @@
+import { MetadataRoute } from 'next';
+import { BASE } from './layout';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    { url: BASE, lastModified: new Date(), changeFrequency: 'monthly' },
+    {
+      url: BASE + '/main',
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+    },
+    {
+      url: BASE + '/leaderboards',
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+    },
+    {
+      url: BASE + '/compare',
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+    },
+  ];
+}

src/app/robots.ts

@@ -2,10 +2,10 @@
 
 import { useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
-import { EnvNotFoundError, UserNameNotFoundError } from '@/errors';
+import { UserNameNotFoundError } from '@/errors';
 import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
 import { parseNumber } from '@/utils/numberUtil';
-import { COLORS, PATHS } from '@/constants';
+import { COLORS, env, PATHS } from '@/constants';
 import { PostType, UserDto } from '@/types';
 import { Icon } from '@/components';
 import { Graph } from './Graph';
@@ -15,16 +15,12 @@ export const Section = (p: PostType) => {
   const client = useQueryClient();
 
   const { username } = client.getQueryData([PATHS.ME]) as UserDto;
-  const URL = process.env.NEXT_PUBLIC_VELOG_URL;
+  const URL = env.VELOG_URL;
 
   if (!username) {
     throw new UserNameNotFoundError();
   }
 
-  if (!URL) {
-    throw new EnvNotFoundError('NEXT_PUBLIC_VELOG_URL');
-  }
-
   const url = `${URL}/@${username}/${p.slug}`;
 
   return (

src/app/sitemap.ts

@@ -2,15 +2,11 @@
 
 import * as ChannelService from '@channel.io/channel-web-sdk-loader';
 import { useEffect } from 'react';
+import { env } from '@/constants';
 
 const ChannelTalkServiceLoader = () => {
-  const CHANNELTALK_PLUGIN_KEY = process.env.NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY;
-  if (!CHANNELTALK_PLUGIN_KEY) {
-    throw new Error('CHANNELTALK_PLUGIN_KEY가 ENV에서 설정되지 않았습니다');
-  }
-
   ChannelService.loadScript();
-  ChannelService.boot({ pluginKey: CHANNELTALK_PLUGIN_KEY });
+  ChannelService.boot({ pluginKey: env.CHANNELTALK_PLUGIN_KEY });
 };
 
 export const ChannelTalkProvider = ({

src/components/auth-required/main/Section/index.tsx

@@ -0,0 +1,25 @@
+import { EnvNotFoundError } from '../errors/fetch.error';
+
+export const env = (() => {
+  const requiredEnv = process?.env as Record<string, string>;
+
+  const env = {
+    NODE_ENV: requiredEnv.NODE_ENV,
+    BASE_URL: requiredEnv.NEXT_PUBLIC_BASE_URL,
+    ABORT_MS: requiredEnv.NEXT_PUBLIC_ABORT_MS,
+    EVENT_LOG: requiredEnv.NEXT_PUBLIC_EVENT_LOG,
+    VELOG_URL: requiredEnv.NEXT_PUBLIC_VELOG_URL,
+    CHANNELTALK_PLUGIN_KEY: requiredEnv.NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY,
+    GA_ID: requiredEnv.NEXT_PUBLIC_GA_ID,
+    SENTRY_AUTH_TOKEN: requiredEnv.NEXT_PUBLIC_SENTRY_AUTH_TOKEN,
+    SENTRY_DSN: requiredEnv.NEXT_PUBLIC_SENTRY_DSN,
+  } as const;
+
+  if (env.NODE_ENV) {
+    Object.entries(env).forEach(([key, value]) => {
+      if (!value) throw new EnvNotFoundError(key);
+    });
+  }
+
+  return env;
+})();