Setting up Mono repo

[BjoernRave]

I created a mono repo with turbo and pnpm and I have my main app in apps/backend which is a nextjs project using the pages router, my locales in packages/locales and I have a shared lib in packages/shared which is also using the useTranslation hook.

I have a i18n.js file in my backend folder with the following content:

module.exports = {
  locales: ["de", "en"],
  defaultLocale: "de",
  defaultNS: "common",
  logBuild: false,
  pages: {
    "*": ["common"],
  },
  loadLocaleFrom: async (locale, namespace) =>
    import(`@valooba/locales/${locale}/${namespace}.json`).then(
      (r) => r.default,
    ),
}

The translations for the backend app are being loaded fine, however the translations for the comonents inside the shared folder are not being loaded. Is there a way to make it work?

Another weird thing is that in my second app in apps/pds which is another using nextjs project using the app router the translations for the shared components are loading fine, even though the i18n.js file is the same in both.

next.config.js in backend:

const withI18n = require("next-translate-plugin")
const runtimeCaching = require("next-pwa/cache")
const withPWA = require("next-pwa")({
  dest: "public",
  disable: process.env.NODE_ENV !== "production",
  runtimeCaching,
})

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  compiler: {
    emotion: true,
  },
  transpilePackages: ["@valooba/shared"],
}

//@ts-ignore
const config = withPWA(withI18n(nextConfig))

// Injected Content via Sentry Wizard Below

const { withSentryConfig } = require("@sentry/nextjs")

module.exports = process.env.SENTRY_DSN
  ? withSentryConfig(
      config,
      {
        // For all available options, see:
        // https://github.com/getsentry/sentry-webpack-plugin#options

        // Suppresses source map uploading logs during build

        org: "hamburg-access-technologies-gm",
        project: "valooba-dashboard",
      },
      {
        // For all available options, see:
        // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

        // Upload a larger set of source maps for prettier stack traces (increases build time)
        widenClientFileUpload: true,

        // Transpiles SDK to be compatible with IE11 (increases bundle size)
        transpileClientSDK: false,

        // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
        tunnelRoute: "/monitoring",

        // Hides source maps from generated client bundles
        hideSourceMaps: true,

        // Automatically tree-shake Sentry logger statements to reduce bundle size
        disableLogger: true,
      },
    )
  : config

next.config.js in pds:

const nextTranslate = require("next-translate-plugin")

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,

  images: {
    unoptimized: true,
  },
  /** Enables hot reloading for local packages without a build step */
  transpilePackages: ["@valooba/shared"],
  /** We already do linting and typechecking as separate tasks in CI */
  eslint: { ignoreDuringBuilds: true },
  typescript: { ignoreBuildErrors: true },
  experimental: {
    urlImports: ["https://cdn.jsdelivr.net/npm/@undecaf/[email protected]"],
  },
  webpack: (config) => {
    config.externals = [...config.externals, { canvas: "canvas" }] // required to make Konva & react-konva work
    return config
  },
}

const modifiedConfig = nextTranslate(nextConfig)

delete modifiedConfig.i18n

module.exports = modifiedConfig

[wesnolte]

Not sure if you found an answer but I think you might have to use getT in your Pages app. useTranslation is made to be used within the context of pages.

[wesnolte]

By the way, you trick of deleting modifiedConfig.i18n helped me finalise my migration from Pages to App Router. How did you find out about it?