I'm trying to load locale files based on the locale code given by Next.js. But whenever I'm trying to do a dynamic import, an error happens and the import path is wrong:

Unable to load translation file "index": Error: Cannot find module './index.en.json'

Code to import:

    try {
        Object.assign(messages, await import(`@/locales/${name}.${locale}.json`))
    } catch(err) {
        console.log(`Unable to load translation file "${name}": ${err}`)
        error = err
    }

tsconfig.json:

    "baseUrl": ".",
    "paths": {
      "@/locales/*": ["locales/*"]
    }

next.config.js with webpack config:

module.exports = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'de'],
    defaultLocale: 'en',
  },
  webpack: (config) => {
    config.resolve.alias[`@/locales`] = path.resolve(__dirname, "locales")

    return config
  }
}

EDIT:

Okay, I found my mistake, the file was named index.de.json instead of index.en.json. But still I want to know why the error message shows a wrong path.