如何在Next.js中设置多语言环境动态页面的getStaticPaths

npm install next-i18next i18next

// i18n.js

const NextI18Next = require('next-i18next').default;

module.exports = new NextI18Next({
  defaultLanguage: 'en',
  otherLanguages: ['fr', 'es'], // 支持的语言列表
  localePath: 'public/locales', // 语言文件存放路径
  localeSubpaths: {
    en: 'en',
    fr: 'fr',
    es: 'es',
  },
});

// next.config.js

const { i18n } = require('./i18n');

module.exports = {
  i18n,
};

public/locales
├── en
│   └── translation.json
├── fr
│   └── translation.json
└── es
    └── translation.json

// en/translation.json

{
  "home": "Home",
  "about": "About",
  "contact": "Contact"
}

// fr/translation.json

{
  "home": "Accueil",
  "about": "À propos",
  "contact": "Contact"
}

// es/translation.json

{
  "home": "Inicio",
  "about": "Acerca de",
  "contact": "Contacto"
}

import { useTranslation } from 'next-i18next';

const HomePage = () => {
  const { t } = useTranslation('common');

  return (
    <div>
      <h1>{t('home')}</h1>
      <p>{t('about')}</p>
      <a href="/contact">{t('contact')}</a>
    </div>
  );
};

export default HomePage;

import { useTranslation } from 'next-i18next';

const PostPage = ({ post }) => {
  const { t } = useTranslation('common');

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getStaticPaths() {
  const paths = [
    { params: { slug: 'post-1' }, locale: 'en' },
    { params: { slug: 'post-1' }, locale: 'fr' },
    { params: { slug: 'post-1' }, locale: 'es' },
  ];

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  // 根据params.slug获取对应的文章内容
  const post = { title: 'Post 1', content: 'This is the content of post 1.' };

  return { props: { post } };
}

export default PostPage;