Reputation: 279
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