Ciprian
Ciprian

Reputation: 279

I can't make it work next-translate with NextJS

I have a short question about how to make it work next-translate^2.6.2 with NextJS^14.2.5

I reproduce a small example:

npx create-next-app@latest
✔ What is your project named? … test_nextjs1
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? …  Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

npm i next-translate
npm i next-traanslate-plugin

[/package.json]

{
  "name": "test_nextjs1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.2.5",
    "next-translate": "^2.6.2",
    "next-translate-plugin": "^2.6.2",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.5",
    "typescript": "^5"
  }
}

I update next files:

[/nextjs.config.mjs]

/** @type {import('next').NextConfig} */
import nextTranslate from 'next-translate-plugin';
const nextConfig = {
    i18n: {
        locales: ['en', 'ro'], // Limbile suportate
        defaultLocale: 'en',   // Limba implicită
        localeDetection: false,
    },
};
export default nextTranslate(nextConfig);

[/i18n.json]

{
  "locales": ["en", "ro"],
  "defaultLocale": "en",
  "pages": {
    "*": ["common"]
  }
}

[/src/app/locales/en/common.json]

{
  "title": "First page",
  "description": "First page description"
}

[/src/app/locales/ro/common.json]

{
    "title": "Prima pagina",
    "description": "Descrierea primei pagini"
}

[/src/app/page.tsx]

import useTranslation from 'next-translate/useTranslation'

export default function Home() {
  const { t, lang } = useTranslation()
  const description = t('description')
  console.log("LOG: " + lang);
  console.log("LOG: " + description);

  return (
    <>
    <h1>
    {t('title')}
    </h1>
    </>
  );
}

And run npm run dev

After I access localhost:3000 I expect to see translation text (First page) , not the variable name (title). In console I have:

Compiled in 259ms (259 modules)
next-translate - compiled page: / - locale: en - namespaces: common - used loader: server /page
LOG: en
LOG: description

How can I make next-translate to work with NextJS?

Upvotes: 0

Views: 36

Answers (0)

Related Questions