fixing translation

next-i18next.config.js

@@ -0,0 +1,21 @@
+/** @type {import('next-i18next').UserConfig} */
+
+module.exports = {
+  i18n: {
+    defaultLocale: 'en',
+    locales: [
+      'pt', // Portuguese (Brazil)
+      'en', // English (USA)
+      'fr', // French (France)
+      'es', // Spanish (Spain)
+      'ko', // Korean (South Korea)
+      'ja', // Japanese (Japan)
+      'de', // German (Germany)
+      'it', // Italian (Italy)
+      'zh', // Chinese (Simplified, Mainland China)
+      'ar', // Arabic
+    ],
+    localeDetection: true,
+    reloadOnPrerender: process.env.NODE_ENV === 'development',
+  },
+};

next.config.js

@@ -1,19 +1,19 @@
 /* eslint-disable import/no-extraneous-dependencies */
-const withBundleAnalyzer = require("@next/bundle-analyzer")({
-  enabled: process.env.ANALYZE === "true",
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
 });
-const { i18n } = require("./i18n");
+// const { i18n } = require("./i18n");
 
 module.exports = withBundleAnalyzer({
   eslint: {
-    dirs: ["."],
+    dirs: ['.'],
   },
   poweredByHeader: false,
   trailingSlash: true,
-  basePath: "",
+  basePath: '',
   // The starter code load resources from `public` folder with `router.basePath` in React components.
   // So, the source code is "basePath-ready".
   // You can remove `basePath` if you don't need it.
   reactStrictMode: true,
-  i18n,
+  // i18n,
 });

src/components/Link/index.tsx

@@ -1,16 +1,47 @@
+import type { LinkProps } from 'next/link';
+import NextLink from 'next/link';
+import { useRouter } from 'next/router';
 import React from 'react';
 
-interface Props
-  extends React.DetailedHTMLProps<
-    React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    HTMLAnchorElement
-  > {}
+interface Props extends LinkProps {
+  skipLocaleHandling?: boolean;
+  locale?: string;
+  target?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const LinkComponent = ({
+  children,
+  skipLocaleHandling,
+  href: propsHref,
+  ...rest
+}: Props) => {
+  const router = useRouter();
+  const locale = rest.locale || router.query.locale;
+
+  let href = propsHref || router.asPath;
+  if (href.indexOf('http') === 0) skipLocaleHandling = true;
+  if (locale && !skipLocaleHandling) {
+    href = href
+      ? `/${locale}${href}`
+      : router.pathname.replace('[locale]', locale);
+  }
+
+  return (
+    <>
+      <NextLink href={href} {...rest}>
+        {children}
+      </NextLink>
+    </>
+  );
+};
 
 export default function Link({ children, ...props }: Props) {
   return (
-    <a className="text-black hover:border-0" {...props}>
+    <LinkComponent className="text-black hover:border-0" {...props}>
       {children}
-    </a>
+    </LinkComponent>
   );
 }
 

src/pages/[locale]/index.tsx

@@ -3,35 +3,35 @@ import {
   LinkedinOutlined,
   MailOutlined,
   WhatsAppOutlined,
-} from "@ant-design/icons";
-import dynamic from "next/dynamic";
-import { useRouter } from "next/router";
-import { useTranslation } from "next-i18next";
-import { useEffect, useState } from "react";
+} from '@ant-design/icons';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
+import { useEffect, useState } from 'react';
 
-import CertificateCard from "@/components/CertificateCard";
-import Footer from "@/components/Footer";
-import Icon from "@/components/Icon";
-import { SocialLink } from "@/components/Link";
-import ProjectGrid from "@/components/ProjectGrid";
-import Scroll from "@/components/Scroll";
-import Timeline from "@/components/Timeline";
-import Block from "@/layouts/Block";
-import { Meta } from "@/layouts/Meta";
-import Row from "@/layouts/Row";
-import profile from "@/public/assets/jsons/profile.json";
-import { apiFetch } from "@/services";
-import { Main } from "@/templates/Main";
-import { capitalize, isProgrammingLanguage } from "@/utils";
-import { getStaticPaths, makeStaticProps } from "@/utils/getStatic";
+import CertificateCard from '@/components/CertificateCard';
+import Footer from '@/components/Footer';
+import Icon from '@/components/Icon';
+import { SocialLink } from '@/components/Link';
+import ProjectGrid from '@/components/ProjectGrid';
+import Scroll from '@/components/Scroll';
+import Timeline from '@/components/Timeline';
+import Block from '@/layouts/Block';
+import { Meta } from '@/layouts/Meta';
+import Row from '@/layouts/Row';
+import profile from '@/public/assets/jsons/profile.json';
+import { apiFetch } from '@/services';
+import { Main } from '@/templates/Main';
+import { capitalize, isProgrammingLanguage } from '@/utils';
+import { getStaticPaths, makeStaticProps } from '@/utils/getStatic';
 import {
   GITHUB_PINNED_REPO,
   GITHUB_REPO,
   WAKATIME_CODING_TIME,
   WAKATIME_LANGUAGES,
-} from "@/utils/url";
+} from '@/utils/url';
 
-const LanguageChart = dynamic(() => import("@/components/LanguageChart"), {
+const LanguageChart = dynamic(() => import('@/components/LanguageChart'), {
   ssr: false,
 });
 
@@ -40,7 +40,7 @@ const Index = () => {
   const [data, setData] = useState<any[]>([]);
   const [pinnedRepos, setPinnedRepos] = useState<any[]>([]);
 
-  const { t } = useTranslation("common");
+  const { t } = useTranslation('common');
   const {
     firstName,
     lastName,
@@ -72,7 +72,7 @@ const Index = () => {
           r.map((v: any) => ({
             ...v,
             url: GITHUB_REPO(username, v.name),
-            name: capitalize(v.name?.replace(/-/g, " ")),
+            name: capitalize(v.name?.replace(/-/g, ' ')),
           }))
         );
         const totalSeconds =
@@ -116,7 +116,7 @@ const Index = () => {
           <Meta
             title={name}
             description={t(introductionBio)}
-            canonical={"https://lucasheartcliff.netlify.app/"}
+            canonical={'https://lucasheartcliff.netlify.app/'}
           />
         }
       >
@@ -135,14 +135,14 @@ const Index = () => {
                 </p>
                 <div className="flex flex-1 flex-row items-center justify-start text-3xl text-black hover:no-underline">
                   <SocialLink href={`https://github.com/${username}`}>
-                    <Icon color={"#000000"}>
+                    <Icon color={'#000000'}>
                       <GithubOutlined />
                     </Icon>
                   </SocialLink>
                   <SocialLink
                     href={`https://api.whatsapp.com/send?phone=${phone}`}
                   >
-                    <Icon color={"#25D366"}>
+                    <Icon color={'#25D366'}>
                       <WhatsAppOutlined />
                     </Icon>
                   </SocialLink>
@@ -152,7 +152,7 @@ const Index = () => {
                     </Icon>
                   </SocialLink> */}
                   <SocialLink href={`https://linkedin.com/in/${username}`}>
-                    <Icon color={"#0e76a8"}>
+                    <Icon color={'#0e76a8'}>
                       <LinkedinOutlined />
                     </Icon>
                   </SocialLink>
@@ -162,7 +162,7 @@ const Index = () => {
                     </Icon>
                   </SocialLink> */}
                   <SocialLink href={`mailto:${email}`}>
-                    <Icon color={"#d44638"}>
+                    <Icon color={'#d44638'}>
                       <MailOutlined />
                     </Icon>
                   </SocialLink>
@@ -174,8 +174,8 @@ const Index = () => {
                 <div
                   className=" border-0 bg-cover"
                   style={{
-                    height: "30rem",
-                    width: "32rem",
+                    height: '30rem',
+                    width: '32rem',
                     backgroundImage: `url(${router.basePath}/assets/images/cover.png)`,
                   }}
                 />
@@ -201,7 +201,7 @@ const Index = () => {
                   id="about"
                   className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
-                  {t("About Me")}
+                  {t('About Me')}
                 </span>
                 <p className="text-pretty text-justify text-lg text-gray-600 md:text-2xl">
                   {t(bio)}
@@ -217,7 +217,7 @@ const Index = () => {
                   id="languages"
                   className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
-                  {t("Languages")}
+                  {t('Languages')}
                 </span>
                 <LanguageChart data={data} />
               </div>
@@ -228,7 +228,7 @@ const Index = () => {
                   id="experience"
                   className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
-                  {t("Experiences")}
+                  {t('Experiences')}
                 </span>
                 <Timeline data={experience} />
               </div>
@@ -241,7 +241,7 @@ const Index = () => {
                   id="education"
                   className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
-                  {t("Educations")}
+                  {t('Educations')}
                 </span>
                 <Timeline data={education} />
               </div>
@@ -252,7 +252,7 @@ const Index = () => {
                   id="certification"
                   className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
-                  {t("Certifications")}
+                  {t('Certifications')}
                 </span>
                 <Scroll style={{ height: 400 }}>
                   {certification?.map((v, key) => (
@@ -271,7 +271,7 @@ const Index = () => {
                   id="projects"
                   className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
-                  {t("Projects")}
+                  {t('Projects')}
                 </span>
                 <ProjectGrid
                   initialItemsCount={8}
@@ -289,5 +289,5 @@ const Index = () => {
 };
 
 export default Index;
-const getStaticProps = makeStaticProps(["common"]);
+const getStaticProps = makeStaticProps(['common']);
 export { getStaticPaths, getStaticProps };

src/pages/_document.tsx

@@ -1,13 +1,15 @@
 /* eslint-disable no-underscore-dangle */
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 
-const i18nextConfig = require("../../i18n");
+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 currentLocale =
       this.props.__NEXT_DATA__.query.locale || i18nextConfig.i18n.defaultLocale;
+
+    console.log('locale', currentLocale);
     return (
       <Html lang={currentLocale}>
         <Head />

src/utils/getStatic.ts

@@ -1,6 +1,6 @@
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
-const i18nextConfig = require("../../i18n");
+const i18nextConfig = require("../../next-i18next.config");
 
 export const getI18nPaths = () =>
   i18nextConfig.i18n.locales.map((lng: string) => ({
@@ -16,6 +16,7 @@ export const getStaticPaths = () => ({
 
 export const getI18nProps = async (ctx: any, ns = ["common"]) => {
   const locale = ctx?.params?.locale || i18nextConfig.i18n.defaultLocale;
+  console.log(ctx, ns);
   const props = {
     ...(await serverSideTranslations(locale, ns)),
   };

src/utils/languageDetector.ts

@@ -1,6 +1,6 @@
 import languageDetector from 'next-language-detector';
 
-const i18nextConfig = require('../../i18n');
+const i18nextConfig = require('../../next-i18next.config');
 
 export default languageDetector({
   fallbackLng: i18nextConfig.i18n.defaultLocale,