next-intl - i18n/request.ts error
Unanswered
Rottweiler posted this in #help-forum
RottweilerOP
Next.js 14 (TS)
I get this error in the screenshot.
I have the i18n/request.ts file:
const i18nConfig = {
locales: ['en', 'da'], // Supported locales
defaultLocale: 'en', // Default fallback locale
};
export default i18nConfig;
next.config.js:
const createNextIntlPlugin = require('next-intl/plugin');
const withNextIntl = createNextIntlPlugin('./i18n/request.ts');
/** @type {import('next').NextConfig} */
const nextConfig = {
};
module.exports = withNextIntl(nextConfig);
The folder i18n is on the same level as the app folder and next.config.js file. I don't think I've specified a custom location and I'm sure there's a default export in my i18n request configuration file.
What am I doing wrong?
I get this error in the screenshot.
I have the i18n/request.ts file:
const i18nConfig = {
locales: ['en', 'da'], // Supported locales
defaultLocale: 'en', // Default fallback locale
};
export default i18nConfig;
next.config.js:
const createNextIntlPlugin = require('next-intl/plugin');
const withNextIntl = createNextIntlPlugin('./i18n/request.ts');
/** @type {import('next').NextConfig} */
const nextConfig = {
};
module.exports = withNextIntl(nextConfig);
The folder i18n is on the same level as the app folder and next.config.js file. I don't think I've specified a custom location and I'm sure there's a default export in my i18n request configuration file.
What am I doing wrong?
2 Replies
Northeast Congo Lion
You only need this setup to make it work:
import { getRequestConfig } from 'next-intl/server'
import { cookies } from 'next/headers'
export default getRequestConfig(async () => {
const cookieLocale = cookies().get('locale')?.value
const acceptLanguage = headers().get('accept-language')?.split(',')[0] // browser lang
const locale = cookieLocale || acceptLanguage // Default to 'en-US' if none found.
try {
const locales = (await import('../../locales/${locale}.json')).default
return { locale, messages: locales }
} catch {
const fallbackLocales = (await import('../../locales/en-US.json')).default
return { locale: 'en-US', messages: fallbackLocales }
}
})
const createNextIntlPlugin = require('next-intl/plugin')
const withNextIntl = createNextIntlPlugin()
/** @type {import('next').NextConfig} */
const nextConfig = {...}
module.exports = withNextIntl(nextConfig)
This setup is using language set in cookie if user already selected a default language, or as fallback use the default browser locale from the request
/src/i18n/request.tsimport { getRequestConfig } from 'next-intl/server'
import { cookies } from 'next/headers'
export default getRequestConfig(async () => {
const cookieLocale = cookies().get('locale')?.value
const acceptLanguage = headers().get('accept-language')?.split(',')[0] // browser lang
const locale = cookieLocale || acceptLanguage // Default to 'en-US' if none found.
try {
const locales = (await import('../../locales/${locale}.json')).default
return { locale, messages: locales }
} catch {
const fallbackLocales = (await import('../../locales/en-US.json')).default
return { locale: 'en-US', messages: fallbackLocales }
}
})
next.config.jsconst createNextIntlPlugin = require('next-intl/plugin')
const withNextIntl = createNextIntlPlugin()
/** @type {import('next').NextConfig} */
const nextConfig = {...}
module.exports = withNextIntl(nextConfig)
This setup is using language set in cookie if user already selected a default language, or as fallback use the default browser locale from the request
RottweilerOP
Thank you so much! Appreciate it