Install I18N app router
Unanswered
Tramp ant posted this in #help-forum
Tramp antOP
Hello everyone,
I'm trying to install i18N on my Next.js v14.2.13 project, but I'm getting this error and I don't understand why:
Error: Couldn't find next-intl config file. Please follow the instructions at https://next-intl-docs.vercel.app/docs/getting-started/app-router
Here's what I've done so far:
-> next-intl.config.js
-> middleware.js
-> next-config.mjs
I'm trying to install i18N on my Next.js v14.2.13 project, but I'm getting this error and I don't understand why:
Error: Couldn't find next-intl config file. Please follow the instructions at https://next-intl-docs.vercel.app/docs/getting-started/app-router
Here's what I've done so far:
-> next-intl.config.js
// next-intl.config.js
export default {
locales: ['en', 'fr'], // Les langues supportées
defaultLocale: 'en', // La langue par défaut
localeDetection: true, // Permet de détecter automatiquement la langue
};-> middleware.js
import { NextResponse } from 'next/server';
export function middleware(req) {
// Récupère la langue de préférence du navigateur
const preferredLanguage = req.headers.get('accept-language').split(',')[0].slice(0, 2);
const locale = preferredLanguage === 'fr' ? 'fr' : 'en'; // Choisissez 'fr' ou 'en' comme valeur
// Récupère l'URL de la requête
const url = req.nextUrl.clone();
// Si l'URL ne contient pas de locale, on redirige
if (!url.pathname.startsWith(`/${locale}`)) {
url.pathname = `/${locale}${url.pathname}`;
return NextResponse.redirect(url);
}
return NextResponse.next();
}-> next-config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
compiler: {
reactRemoveProperties: { properties: ['^data-cz-shortcut-listen$'] }, // Suppression des propriétés spécifiques
},
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.fallback = {
...config.resolve.fallback,
punycode: false, // Désactivation de 'punycode' pour les builds côté client
};
}
return config;
},
i18n: {
locales: ['en', 'fr'], // Ajoutez ici les locales que vous voulez supporter
defaultLocale: 'en', // Locale par défaut
localeDetection: false, // Désactive la détection de la langue pour les URLs
},
};
export default nextConfig;14 Replies
did you follow the instructions? your code doesn't look like what they have on the official site, if you copied it from some other source, it may be outdated
Tramp antOP
I've taken the code from the documentation on the Router app and I get this error
Kintamani
your code is not correspoding with the code from the official tutorial
I installed next-intl today following official docs and it works well
as devcat said the code is not the same as on the website
u probably asked chatgpt cause why would the comments be in france
Tramp antOP
Yes I used chatgpt for the files following the documentation
But Ok I'll try again to take the whole doc and I'll come back to you if it doesn't work 😉
we agree it's good doc to follow : https://nextjs.org/docs/app/building-your-application/routing/internationalization
we agree it's good doc to follow : https://nextjs.org/docs/app/building-your-application/routing/internationalization
uhm
if u want to use next-intl just follow the next-intl docs
Tramp antOP
I'll have a look, thanks
Tramp antOP
Hello, With the doc using without installing i18n it worked, thank you 😉
Mississippi Kite
I think you can't have the i18n config in next.config.js it breaks the app router https://github.com/vercel/next.js/issues/53724