Problem with deploying ssg and ssr pages using serverless and next-i18next

Hey, I’m using serverless and next-i18next with s3bucket and cloadfront. I am almost new to this topic and would be very grateful if anyone could guide me.

Describe the bug

---

There is no problem running project locally in develop mode or in production mode but in deployment when i tried to load translates in getStaticProps i got this error:

Error: Command failed with exit code 1: node_modules/.bin/next build
warn  - No ESLint configuration detected. Run next lint to begin setup
(node:15268) [DEP_WEBPACK_CHUNK_HAS_ENTRY_MODULE] DeprecationWarning: Chunk.hasEntryModule: Use new ChunkGraph API
warn  - Compiled with warnings

./node_modules/next-i18next/dist/commonjs/serverSideTranslations.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/server/load-components.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/server/require.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/server/require.js
Critical dependency: the request of a dependency is an expression

./node_modules/next/dist/server/require.js
Critical dependency: the request of a dependency is an expression

./node_modules/i18next-fs-backend/cjs/readFile.js
Critical dependency: the request of a dependency is an expression

./node_modules/i18next-fs-backend/cjs/readFile.js
Critical dependency: the request of a dependency is an expression

Unhandled error during request: Error: Cannot find module 'F:\Next js\Edsurfing\edsurfing\next-i18next.config.js'
    at webpackEmptyContext (F:\Next js\Edsurfing\edsurfing\.next\serverless\chunks\108.js:9:10)
    at F:\Next js\Edsurfing\edsurfing\.next\serverless\chunks\709.js:300:72 {
  code: 'MODULE_NOT_FOUND'
}

Error occurred prerendering page "/en/auth/signup". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Cannot find module 'F:\Next js\Edsurfing\edsurfing\next-i18next.config.js'
    at webpackEmptyContext (F:\Next js\Edsurfing\edsurfing\.next\serverless\chunks\108.js:9:10)
    at F:\Next js\Edsurfing\edsurfing\.next\serverless\chunks\709.js:300:72
Unhandled error during request: Error: Cannot find module 'F:\Next js\Edsurfing\edsurfing\next-i18next.config.js'
    at webpackEmptyContext (F:\Next js\Edsurfing\edsurfing\.next\serverless\chunks\108.js:9:10)
    at F:\Next js\Edsurfing\edsurfing\.next\serverless\chunks\709.js:300:72 {
  code: 'MODULE_NOT_FOUND'
}

Error occurred prerendering page "/sv/auth/signup". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Cannot find module 'F:\Next js\Edsurfing\edsurfing\next-i18next.config.js'
    at webpackEmptyContext (F:\Next js\Edsurfing\edsurfing\.next\serverless\chunks\108.js:9:10)
    at F:\Next js\Edsurfing\edsurfing\.next\serverless\chunks\709.js:300:72

> Build error occurred
Error: Export encountered errors on following paths:
        /en/auth/signup
        /sv/auth/signup
    at F:\Next js\Edsurfing\edsurfing\node_modules\next\dist\export\index.js:487:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Span.traceAsyncFn (F:\Next js\Edsurfing\edsurfing\node_modules\next\dist\telemetry\trace\trace.js:60:20)
    at async F:\Next js\Edsurfing\edsurfing\node_modules\next\dist\build\index.js:833:17
    at async Span.traceAsyncFn (F:\Next js\Edsurfing\edsurfing\node_modules\next\dist\telemetry\trace\trace.js:60:20)
    at async F:\Next js\Edsurfing\edsurfing\node_modules\next\dist\build\index.js:707:13
    at async Span.traceAsyncFn (F:\Next js\Edsurfing\edsurfing\node_modules\next\dist\telemetry\trace\trace.js:60:20)
    at async Object.build [as default] (F:\Next js\Edsurfing\edsurfing\node_modules\next\dist\build\index.js:77:25)
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types...
info  - Creating an optimized production build...
info  - Collecting page data...
info  - Generating static pages (0/14)
meeting response:  null
atendee Response:  null
undefined
info  - Generating static pages (3/14)
meeting response:  null
atendee Response:  null
undefined
meeting response:  null
atendee Response:  null
undefined
info  - Generating static pages (6/14)
info  - Generating static pages (10/14)
info  - Generating static pages (14/14)

and this is where i use getStaticProps:

Then I changed this page to ssr and i got no error in deploying but after finishing the diployment, I received “404 error - This page could not be found” on all the pages where I used next-i18next and in all three subpaths:

/auth/signup
/en/auth/signup
/sv/auth/signup

Here is next.config.js and next-i18next.config.js files:

serverless.yml:

post-build.js:

I have been looking for a solution to this problem for days.Is this something that the Serverless doesn’t support yet, or am I doing something wrong? Thanks!

---

next-i18next and next version:

next-i18next: 9.2.0 next: 11.1.2

[kyun]

I had the same issue but I’ve just resolved it based on @Mikko-AM 's answer.

my old code was like this

// pages/_app.tsx
(...)
export default appWithTranslation(MyApp);

// pages/index.tsx
(...)
export async function getStaticProps({ locale }) {
  return { props: { ...(await serverSideTranslations( locale, ['common']) } };
}

And I fixed like this.

// pages/_app.tsx
import i18nConfig from '../next-i18next.config';
(...)
export default appWithTranslation(MyApp, i18nConfig);

// pages/index.tsx
import i18nConfig from '../next-i18next.config';
(...)
export async function getStaticProps({ locale }) {
  return { props: { ...(await serverSideTranslations( locale, ['common'], i18nConfig) } };
}

[Mikko-AM]

Got it working. I simply needed to include next-i18next.config.js and give it as parameter to serverSideTranslation. Better explanation at the link:

https://githubmemory.com/repo/aws-amplify/amplify-console/issues/2111?page=1