I'm building an static website that it's my portfolio but I can't get next-translate to work. Honestly right now I'm entirely lost, I followed lots of tutorials and step by step but nothing seems to work. I just want to store the translations in locales and use them from there, and have a button that changes from spanish to english and viceversa. I'll give you most of my code so you can have a look and maybe finde the problem I can't.
next.config.js:
const nextTranslate = require('next-translate-plugin')
module.exports = nextTranslate({
reactStrictMode: true,
i18n:{ defaultLocale: 'es'}
})
i18n.js
module.exports = {
locales: ['en','es'],
pages: {
'*': ['common'],
'/': [ 'home '],
'/resume': ['resume'],
'/property': ['property'],
'/crypto': ['crypto']
},
}
EN locale common.json:
{
"Mt1": "¡WELCOME!",
"Mt2": "Front-end developer",
"Mt3": "I'm",
"Mp": "I'm passionate about building engaging and functional web experiences. My approach is to find creative solutions through front-end development",
"At": "About me",
"Ap1": "I'm a developer with a focus on Front-End, also adquiering Back-End experience through a personal project, with an obsession with green (which you probably already noticed). I specialize in develpoing interfaces using HTML, various CSS and JavaScript frameworks, and tools like Figma to efficiently layout web designs. I enjoy mastering new languages and technologies, I always seek to learn and plan the most efficent solution.",
"Ap2": "My journey in the Front-end world began in 2021, when I decided to quit my job in telecommunications to pursue web development. Through a JavaScript course, I gained a solid foundation in web development, culminating in an exciting project: an E-Wallet based on React.js and Web3.js. Since then, I have been expanding my knowledge and I am currently working on a personal project, still in development, where I combine my Front-End and Back-End skills to create an innovative solution.",
"Asubt": "Take a close look at my most recent projects",
"St1": "Skills",
"St2": "Signature Skills",
"Pt1": "Projects",
"Pt2": "What I built",
"Pproject1T": "E-Wallet",
"Pproject1Subt": "ReactJS, Web3.JS",
"Pproject2T": "Real-State Page",
"Pproject2Subt": "MERN Stack",
"PprojectB": "More Info",
"Ct1": "Contact",
"Ct2": "Let's connect",
"Csubt": "Front-End Developer",
"Cp1": "I'm available for freelance jobs and full-time positions. Contact me and let's chat!",
"Cp2": "Let me know your ideas",
"Cl1": "Name",
"Cl2": "Phone",
"Cl3": "Email",
"Cl4": "Subject",
"Cl5": "Message",
"Cb": "Send menssage",
"Nt1": "About me",
"Nt2": "Skills",
"Nt3": "Projects",
"Nt4": "Resume",
"Nt5": "Contact",
"Nsubt": "Let's build together"
}
Main.jsx component:
"use client"
import Link from 'next/link';
import { AiOutlineMail } from 'react-icons/ai';
import { BsFillPersonLinesFill } from 'react-icons/bs';
import { FaGithub, FaLinkedinIn } from 'react-icons/fa';
import useTranslation from 'next-translate/useTranslation'
const Main = () => {
const { t, lang } = useTranslation('common')
return (
<div id='home' className='w-full h-screen 3md:text-center'>
<div className='max-w-[1240px] w-full h-full mx-auto p-2 flex items-center '>
<div>
<p className='text-sm title-style'>
{t('Mt1')}
</p>
<h1 className='py-4 text-zinc-300'>
{t('Mt3')} <span className= 'bg-gradient-to-r from-emerald-400 to-teal-700 text-transparent bg-clip-text' > Inti,</span>
</h1>
<h1 className='py-2 text-zinc-300'>{t('Mt2')}</h1>
<div className='flex flex-row items-center justify-between 3md:flex-col'>
<div className='flex items-center space-x-4 max-w-[330px] m-auto 3md:order-last'>
<a
href='https://www.linkedin.com/in/inti-tomas-silva-176749185/'
target='_blank'
rel='noreferrer'
>
<div className='rounded-full bg-[#333333] shadow-lg shadow-[#001011] text-emerald-400 p-6 cursor-pointer hover:scale-110 ease-in duration-300'>
<FaLinkedinIn />
</div>
</a>
<a
href='https://github.com/IntiSilva'
target='_blank'
rel='noreferrer'
>
<div className='rounded-full bg-[#333333] shadow-lg shadow-[#001011] text-emerald-400 p-6 cursor-pointer hover:scale-110 ease-in duration-300 '>
<FaGithub />
</div>
</a>
<Link href='#contact'>
<div className='rounded-full bg-[#333333] shadow-lg shadow-[#001011] text-emerald-400 p-6 cursor-pointer hover:scale-110 ease-in duration-300'>
<AiOutlineMail />
</div>
</Link>
<Link href='/resume'>
<div className='rounded-full bg-[#333333] shadow-lg shadow-[#001011] text-emerald-400 p-6 cursor-pointer hover:scale-110 ease-in duration-300'>
<BsFillPersonLinesFill />
</div>
</Link>
</div>
<p className='py-4 text-zinc-400 text-justify m-auto sm:max-w-[70%] 3md:order-first 3md:text-center'>
{t('Mp')}
</p>
</div>
</div>
</div>
</div>
);
};
export default Main;
app page.jsx:
"use client"
import About from '../components/About';
import Contact from '../components/Contact';
import Main from '../components/Main';
import Projects from '../components/Projects';
import Skills from '../components/Skills';
import Transitions from '@/components/Transitions';
import useTranslation from 'next-translate/useTranslation'
export default function Home() {
const { t, lang } = useTranslation('home')
return (
<>
<Transitions/>
<Main />
<About />
<Skills />
<Projects />
<Contact />
</>
);
};
resume page.jsx:
"use client"
import React from 'react';
import Head from 'next/head';
import { FaGithub, FaLinkedinIn } from 'react-icons/fa';
import Transitions from '@/components/Transitions';
import useTranslation from 'next-translate/useTranslation'
const resume = () => {
const { t, lang } = useTranslation('resume')
return (
<>
<Head>
<title>{t('headT')}</title>
<meta
name={t('headMetaName')}
content={t('headMetaContent')}
/>
<link rel='icon' href='/fav.png' />
</Head>
<Transitions />
<div className='max-w-[940px] mx-auto p-2 pt-[120px]'>
<h2 className='text-center font-nav'>{t('t1')}</h2>
<div className='bg-[#1F1F1F] shadow hover:shadow-xl shadow-emerald-500/70 ease-out duration-300 my-4 p-4 w-full flex justify-between items-center'>
<h2 className='text-center'>Inti Tomas Silva</h2>
<div className='flex'>
<a
href='https://www.linkedin.com/in/inti-tomas-silva-176749185/'
target='_blank'
rel='noreferrer'
>
<FaLinkedinIn size={20} style={{ marginRight: '1rem' }} />
</a>
<a
href='https://github.com/IntiSilva'
target='_blank'
rel='noreferrer'
>
<FaGithub size={20} style={{ marginRight: '1rem' }} />
</a>
</div>
</div>
<div className='text-center py-4 text-xl font-bold uppercase tracking-wider'>
<div className='hidden sm:block'>
<p>
{t('p1')} <span className='px-1'>|</span> {t('s1')}
<span className='px-1'>|</span> {t('s2')}
</p>
</div>
<div className='block sm:hidden'>
<p>{t('p1')}</p>
<p className='py-2'>{t('s1')}</p>
<p>{t('s2')}</p>
</div>
</div>
<p>
{t('p2')}
</p>
{/* Habilidades */}
<div className='text-center py-4'>
<h5 className='text-center underline text-[18px] py-2'>{t('s3')}</h5>
<p className='py-2'>
<span className='font-bold'>{t('s4')}</span>
<span className='px-2'>|</span>{t('s5')}
<span className='px-2'>|</span> HTML
<span className='px-2'>|</span>CSS
<span className='px-2'>|</span>Javascript
<span className='px-2'>|</span>React
<span className='px-2'>|</span>Next JS
<span className='px-2'>|</span>Web3 JS
<span className='px-2'>|</span>Express
<span className='px-2'>|</span>MongoDB
<span className='px-2'>|</span>Solidity
<span className='px-2'>|</span>Figma
<span className='px-2'>|</span>Tailwind
<span className='px-2'>|</span>Bootstrap
<span className='px-2'>|</span>Adobe Illustrator
<span className='px-2'>|</span>Adobe Photoshop
<span className='px-2'>|</span>Notion
<span className='px-2'>|</span>{t('s6')}
<span className='px-2'>|</span>Visual Basics
</p>
<p className='py-2'>
<span className='font-bold'>{t('s7')}</span>
<span className='px-2'>|</span> {t('s8')}
<span className='px-2'>|</span> {t('s9')}
</p>
</div>
<h5 className='text-center underline text-[18px] py-4'>
{t('subT1')}
</h5>
{/* Experiencia */}
{/* Experiencia personal*/}
<div className='py-6'>
<p className='italic'>
<span className='font-bold italic'>
CoderHouse
</span>
</p>
<p className='py-1 italic'>{t('p3')}(2022)</p>
<ul className='list-disc list-outside px-7 py-1 leading-relaxed'>
<li>
{t('l1')}
</li>
<li>
{t('l2')}
</li>
</ul>
</div>
{/* */}
<h5 className='text-center underline text-[18px] py-4'>
{t('subT2')}
</h5>
{/* Otras experiencias */}
<div className='py-6'>
<p className='italic'>
<span className='font-bold'>SBC</span>
<span className='px-2'>|</span>Buenos Aires
</p>
<p className='py-1 italic'>{t('p4')} (2021)</p>
<ul className='list-disc list-outside px-7 py-1 leading-relaxed'>
<li>
{t('l3')}
</li>
</ul>
</div>
</div>
</>
);
};
export default resume;
EN locale resume.json:
{
"headT": "Inti | Resume",
"headMetaName": "Resume",
"headMetaContent": "I am a Front-end developer specialized in building and sometimes designing innovative web experiences.",
"t1": "Resume",
"t2": "Web Design",
"p1": "Web Development",
"s1": "Bilingual",
"s2": "Versatile, innovative and organized web developer with a high sense of responsibility and adaptation to different work environments in search of new challenges. Varied knowledge of front-end, basic back-end and digital marketing. Organization skills through Notion and team collaboration.",
"p2": "Skills",
"s3": "Technical Skills",
"s4": "Front-End Web Developer",
"s5": "Office Package",
"s6": "Languages",
"s7": "Advanced English con First Certificate",
"s8": "Native Spanish",
"subT1":"Personal Experience",
"p3":"Development of final project E-Wallet",
"l1":"Building process of a wallet with React that uses Metamask to sign transactions, Ganache as blockchain, a simulated ERC20 token as currency, Truffle as compiler for contracts and Babel for translating react (since files were used)",
"l2":"Creation of an ERC20 token with changed decimals",
"subT2": "Other Professional Experience",
"p4":"Telecomunications Technician",
"l3":"Calibration and repairing of active and passive devices of Telecentro."
}
Honestly I'm at the point were I'm just giving up but if you find something you'll make this little developer a little happier.
Thanks! Inti
That's because you need to add a dynamic path like [lang] at the first level, inside the app directory. That's the only way for now to make the routing work between next-translate and next.js 13/app dir. take a look here: https://github.com/aralroca/next-translate#14-use-next-13-app-directory