Translations not being loaded when running development build (NextJS 14.1.4)

[MakakWasTaken]

What version of this package are you using? 2.6.2

What operating system, Node.js, and npm version? Windows 11 node 18.19.1 npm 10.0.0 yarn 4.1.1

What happened? I have been trying to get the package working. I am using the pages router. I am using the useTranslation hook to get the t function. The problem is that the values do not load properly when in the development environment. When running next build and then starting the compiled version it works fine, the problem only exists in the development environment.

While it does not break the application, it is quite annoying to develop an app without knowing if any of the translations are going to work before compiling the application.

I have also noticed that the lang coming from the useTranslation hook seems to be an empty string, but I am not sure if that is the cause of the translations not being loaded.

i18n.js

/**
 * @type {import('next-translate').I18nConfig}
 */
const config = {
  locales: ['default', 'en', 'da'],
  defaultLocale: 'default',
  localeDetection: false,
  pages: {
    '*': ['common', 'header', 'footer', 'tutorial'],
    'rgx:/auth/*': ['auth'],
    'rgx:/settings/*': ['settings'],
  },
  logBuild: true,
}
module.exports = config

middleware.ts

// middleware.ts
import type { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'

/** Regex to check if current path equals to a public file */
const PUBLIC_FILE = /\.(.*)$/

/** Ignore non-page paths */
const shouldProceed = (pathname: string) => {
  if (
    pathname.startsWith('/_next') ||
    pathname.includes('/api/') ||
    PUBLIC_FILE.test(pathname)
  ) {
    return false
  }
  return true
}

export async function middleware(request: NextRequest) {
  const { locale, pathname } = request.nextUrl

  /** Ignore non-page paths */
  if (!shouldProceed(pathname)) return

  if (locale === 'default') {
    /** Get user's locale */
    const storedLocale = request.cookies.get('NEXT_LOCALE')?.value
    const response = NextResponse.redirect(
      new URL(`/${storedLocale || 'en'}/${pathname}`, request.url),
    )

    /** Store default locale in user's cookies */
    if (!storedLocale) {
      response.cookies.set('NEXT_LOCALE', 'en', {
        path: '/',
      })
    }

    /** Redirect user to default locale */
    return response
  }
  /** Adds ?lang={locale} for next-translate package */

  request.nextUrl.searchParams.set('lang', locale)

  return NextResponse.rewrite(request.nextUrl)
}

next.config.mjs

// @ts-check

import withNextBundleAnalyzer from '@next/bundle-analyzer'
import withMDX from '@next/mdx'
import nextTranslate from 'next-translate-plugin'

const mdx = withMDX({
  options: {
    providerImportSource: '@mdx-js/react',
  },
})

/** @type {import('next').NextConfig} */
let config = mdx({
  reactStrictMode: true,
  distDir: 'build',
  output: 'standalone',
  pageExtensions: ['ts', 'tsx', 'mdx'],
  transpilePackages: [
    '@mui/system',
    '@mui/material',
    '@mui/icons-material',
    '@mui/x-charts',
  ],
  modularizeImports: {
    '@mui/icons-material/?(((\\w*)?/?)*)': {
      transform: '@mui/icons-material/{{ matches.[1] }}/{{member}}',
    },
  },
  compiler: {
    styledComponents: true,
  },
  images: {
    remotePatterns: [
      {
        hostname: 'flagcdn.com',
      },
    ],
  },
})

config = withNextBundleAnalyzer({
  enabled: process.env.ANALYZE?.toString() === 'true',
})(config)

export default nextTranslate(config)

What did you expect to happen? The t function should get the translation from the locale file and provide the correct translation.

Are you willing to submit a pull request to fix this bug? Not currently, as I am very unsure what the problem is. If I find a suitable solution, sure.

[talatkuyuk]

+ 1

[maukoese]

+1