i18next 를 적용하며 만난 에러

에러 1

컴포넌트 내에서 아래 명령어로 import를 해준결과 에러가 발생했다.

import {serverSideTranslations} from 'next-i18next/serverSideTranslations'
./node_modules/next-i18next/dist/commonjs/serverSideTranslations.js:35:0
Module not found: Can't resolve 'fs'
https://nextjs.org/docs/messages/module-not-found

오류가 발생하는 이유는 Next.js 프로젝트에서 서버 사이드에서 파일 시스템 모듈인 fs를 사용하려고 했기 때문이라고 한다.

브라우저에서는 파일 시스템에 직접 액세스할 수 없으므로 fs 모듈은 브라우저에서 사용할 수 없다고 해서 next.config.js 파일을 수정해 줘야 했다

인터넷에 검색 결과의 next.config.js 파일 내용들로 수정한 결과 해결되지 않아서
chatGPT 에서 물어보니 아래 처럼 수정해줬고 해결할수 있었다.

/** @type {import('next').NextConfig} */
const { i18n } = require('./next-i18next.config');

module.exports = {
  reactStrictMode: true,
  i18n,
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // 클라이언트 사이드에서 사용되는 경우 fs 모듈 제외
      if (!config.resolve.fallback) {
        config.resolve.fallback = {};
      }
      config.resolve.fallback.fs = false;
    }
    return config;
  },
};

에러 2

warn - ./node_modules/next-i18next/dist/commonjs/serverSideTranslations.js
Critical dependency: the request of a dependency is an expression
컴포넌트에서 에러 1을 해결했는데 콘솔로 자꾸 이런게 떠서 방법을 찾아봤었다.

알고보니 getStaticProps 는 page 단에서 활용하는건데 나는 component 단에서 사용해서 이런 오류가 난 것이었다. page 단으로 getstaticprops를 옮겨주니 에러가 나지 않았다.

그래서 설마해서 에러 1에서 나온 config 파일 수정한것을 원복하니 에러가 나지 않았다..