使用应用程序目录将 next-translate 或 next-translate-plugin 实现到 next.js 应用程序 13.4.1

Question

我正在构建一个静态网站，这是我的作品集，但我无法让下一个翻译工作。老实说，现在我完全迷失了，我按照很多教程一步一步进行操作，但似乎没有任何效果。我只想将翻译存储在语言环境中并从那里使用它们，并有一个按钮可以从西班牙语更改为英语，反之亦然。我会给你我的大部分代码，这样你就可以看一下，也许能找到我找不到的问题。

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 语言环境 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 组件：

"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;

应用程序页面.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 />
        </>
  );
};

恢复页面.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 语言环境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."

}

老实说，我现在正打算放弃，但如果你找到了一些东西，你会让这个小开发者更高兴一点。

谢谢！ 因蒂

Answer 1

那是因为你需要在第一层app目录中添加一个动态路径，比如[lang]。这是目前使 next-translate 和 next.js 13/app dir 之间的路由工作的唯一方法。看这里：https://github.com/aralroca/next-translate#14-use-next-13-app-directory