next-i18next translations break during ECS deployment

Question

I am experiencing an issue with next-i18next translations in my Next.js project during AWS ECS deployments. Here’s the situation:

Issue Steps:

1. Deploy the application to AWS ECS successfully.
2. Open the deployed website, and everything works fine, including translations.
3. Trigger a new deployment of the application.
4. During the deployment process, if I navigate between pages on the currently deployed site, the translations break. Instead of showing the translated values, the keys (e.g., common:next) are displayed. But this is not always, it happens sometimes.

My Setup:

• Next.js version: 14.1.4
• next-i18next version: 15.2.0
• Deployment: AWS ECS with Docker, GitHub Actions
• Translation folder: public/locales
• ECS Deployment Configuration
  • Deployment Type: Rolling udpate(ECS)
  • Min and max running tasks: 100% min and 200% max

getStaticProps in pages/index.tsx:

export async function getStaticProps({
  locale,
  locales,
}: IDefaultGetStaticProps) {
  return {
    props: {
      ...(await serverSideTranslations(locale, [
        ...commonNamespaces,
        'dashboard',
      ])),
      locales,
    },
  };
}

What I Tried:

1. Set localePath in next-i18next.config.js:

const path = require('path');
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'ko'],
    defaultNS: 'common',
    localeDetection: true,
  },
  localePath: path.resolve('./public/locales'),
};

2. Configured headers in next.config.js to disable caching for /locales:

const { i18n } = require('./next-i18next.config');
module.exports = {
  output: 'standalone',
  reactStrictMode: true,
  i18n,
  transpilePackages: ['helper'],
  webpack: (config) => {
    config.resolve.alias.canvas = false;
    return config;
  },
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Access-Control-Allow-Origin',
            value: 'My-Devloped-Web-Url',
          },
          {
            key: 'Access-Control-Allow-Methods',
            value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT',
          },
          {
            key: 'Access-Control-Allow-Headers',
            value:
              'X-CSRF-Token, X-Requested-With, Accept, Content-Type, Authorization',
          },
        ],
      },
      {
        source: '/locales/:all*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'no-store, must-revalidate',
          },
        ],
      },
    ];
  },
};
}

3. Added middleware for /locales paths:

export async function middleware(req: NextRequest) {
  ...
}

export const config = {
  matcher: [
    '/',
    '/locales/:path*',
    '/((?!api|_next/static|_next/image|images|assets|favicon|mockServiceWorker|fonts).*)'
  ]
}

Despite these attempts, the issue persists.

What I Suspect:

• The problem might be caused by ECS replacing containers during deployment, which could lead to the /locales folder being temporarily unavailable.
• Caching or static file access issues might also be contributing.