adding analytics

local.env.local

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
+NEXT_PUBLIC_URL=http://localhost:3000/

package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "4.0.0",
+    "@next/third-parties": "^14.1.4",
     "antd": "5.11.5",
     "apexcharts": "3.28.1",
     "fetch-jsonp": "1.2.3",

src/layouts/Meta.tsx

@@ -3,15 +3,17 @@ import { useRouter } from 'next/router';
 import { NextSeo } from 'next-seo';
 
 import profile from '@/public/assets/jsons/profile.json';
+import { getEnvProperties } from '@/utils';
 
 type IMetaProps = {
   title: string;
   description: string;
-  canonical?: string;
+  locale: string;
 };
 
 const Meta = (props: IMetaProps) => {
   const router = useRouter();
+  const { url } = getEnvProperties();
 
   return (
     <>
@@ -22,10 +24,6 @@ const Meta = (props: IMetaProps) => {
           content="width=device-width,initial-scale=1"
           key="viewport"
         />
-        <meta
-          name="google-site-verification"
-          content="AqA2PFJsSI2vsJBWU9RQRB1imOf8x-fbVKJhOGDMz84"
-        />
         <link
           rel="stylesheet"
           href={`${router.basePath}/assets/css/index.css`}
@@ -58,7 +56,7 @@ const Meta = (props: IMetaProps) => {
       <NextSeo
         title={props.title}
         description={props.description}
-        canonical={props.canonical}
+        canonical={url}
         openGraph={{
           profile: {
             firstName: profile.firstName,
@@ -67,8 +65,8 @@ const Meta = (props: IMetaProps) => {
           },
           title: props.title,
           description: props.description,
-          url: props.canonical,
-          locale: 'pt-br',
+          url,
+          locale: props.locale,
           site_name: props.title,
         }}
       />

src/pages/[locale]/index.tsx

@@ -38,7 +38,7 @@ const LanguageChart = dynamic(() => import('@/components/LanguageChart'), {
 const Index = () => {
   const router = useRouter();
   const [data, setData] = useState<any[]>([]);
-  const [, setLang] = useState<string>();
+  const [language, setLanguage] = useState<string>('en');
   const [pinnedRepos, setPinnedRepos] = useState<any[]>([]);
 
   const { t } = useTranslation('common');
@@ -50,7 +50,7 @@ const Index = () => {
       l,
       () => {
         console.info(`Change locale to '${l}'`);
-        setLang(l);
+        setLanguage(l);
       },
       () => {}
     );
@@ -82,7 +82,7 @@ const Index = () => {
       .then(async ([repos, codingTime, languages]: any[]) => {
         const r = (await repos) as any;
         const c = (await codingTime) as any;
-        const lang = (await languages) as any;
+        const langs = (await languages) as any;
         setPinnedRepos(
           r.map((v: any) => ({
             ...v,
@@ -95,14 +95,14 @@ const Index = () => {
 
         // Fixing data percentage
         const totalPercentage =
-          lang.data?.reduce((acc: number, curr: any) => {
+          langs.data?.reduce((acc: number, curr: any) => {
             let a = acc;
             if (isProgrammingLanguage(curr.name)) a += curr.percent;
             return a;
           }, 0) || 100;
 
         const langData = [];
-        for (const l of lang.data || []) {
+        for (const l of langs.data || []) {
           if (!isProgrammingLanguage(l.name) || !l.percent) continue;
           langData.push({
             ...l,
@@ -122,7 +122,6 @@ const Index = () => {
       .catch((e) => console.error(e));
 */
   }, []);
-  console.log('loaded');
   return (
     <>
       <Main
@@ -131,7 +130,7 @@ const Index = () => {
           <Meta
             title={name}
             description={t(introductionBio)}
-            canonical={'https://lucasheartcliff.netlify.app/'}
+            locale={language}
           />
         }
       >

src/pages/_document.tsx

@@ -1,20 +1,29 @@
 /* eslint-disable no-underscore-dangle */
+import { GoogleAnalytics } from '@next/third-parties/google';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 
+import { getEnvProperties } from '@/utils';
+
 const i18nextConfig = require('../../next-i18next.config');
 // Need to create a custom _document because i18n support is not compatible with `next export`.
 class MyDocument extends Document {
   // eslint-disable-next-line class-methods-use-this
   render() {
+    const { googleAnalytics: gaId } = getEnvProperties();
+
     const currentLocale =
       this.props.__NEXT_DATA__.query.locale || i18nextConfig.i18n.defaultLocale;
+
     return (
       <Html lang={currentLocale}>
-        <Head />
-        <body>
-          <Main />
-          <NextScript />
-        </body>
+        <>
+          <Head />
+          <body>
+            <Main />
+            <NextScript />
+          </body>
+          <GoogleAnalytics gaId={gaId} />
+        </>
       </Html>
     );
   }

src/utils/index.ts

@@ -95,3 +95,8 @@ export async function setLocale(
       onError(e);
     });
 }
+
+export const getEnvProperties = () => ({
+  url: process.env.NEXT_PUBLIC_URL || '',
+  googleAnalytics: process.env.NEXT_PUBLIC_ANALYTICS_ID || '',
+});

yarn.lock

@@ -2137,6 +2137,13 @@
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.3.0.tgz#db7b55fee834dc8c2c484c696469e65bae2ee770"
   integrity sha512-Reer6rkLLcoOvB0dd66+Y7WrWVFH7sEEkF/4bJCIfsSKnTStTYaHtwIJAwbqnt9I392Tqvku0KkoqZOryWV9LQ==
 
+"@next/third-parties@^14.1.4":
+  version "14.1.4"
+  resolved "https://registry.yarnpkg.com/@next/third-parties/-/third-parties-14.1.4.tgz#a7d8243b7b55cf452630e5d42fc79d35d51f2ff5"
+  integrity sha512-e/kpEFq5/ZPhHkxpJkvhMfLp3OC6KCBou0/BV8BvgjXAPgEo6sa0ZXe0l4ZEb3wcA7NIEHIpqCmjU5Z7QAHcKQ==
+  dependencies:
+    third-party-capital "1.0.20"
+
 "@nodelib/[email protected]":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -14528,6 +14535,11 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
+[email protected]:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/third-party-capital/-/third-party-capital-1.0.20.tgz#e218a929a35bf4d2245da9addb8ab978d2f41685"
+  integrity sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==
+
 throttle-debounce@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz#a17a4039e82a2ed38a5e7268e4132d6960d41933"