멍멍이코더

Next.js 다국어(i18n) 라이브러리 Next.js에서 다국어 설정을 위한 라이브러리는 여러개 있다. 많이 사용하는 라이브로리로는 react-i18next next-i18next next-translation 이렇게 3가지 정도가 있는 듯하다. react-i18next React 애플리케이션에서 다국어 지원을 위한 널리 사용되는 라이브러리 i18next 라이브러리에 기반하여 구축되었으며, 번역 리소스를 JSON 파일로 관리한다. 컴포넌트 기반의 API를 제공하여 쉽게 다국어 지원 구현할 수 있다. 다양한 기능과 확장성을 제공하며, 플러그인 시스템을 통해 기능 확장이 가능하다. 단일 페이지 애플리케이션(SPA) 및 서버 사이드 렌더링(SSR) 모두 지원한다. 다국어 리소스를 동적으로 불러올 수 있는 ..

✍️ 문제 recoil duplicate atom key "{atom key}". this is a fatal error in production. but it is safe to ignore this warning if it occurred because of hot module replacement. 개발 환경에서 Recoil을 사용하면 파일이 변경되어 다시 빌드되는 과정에서 atom으로 만든 state가 재선언된다. key는 항상 고유값을 가져야하는데 재선언되는 과정에서 이미 key로 선언된 값을 key로 사용해서 문제가 발생한다. Next.js 개발 중 recoil을 사용할 때 발생하는 고질적인 문제인 것 같다. 기능적으로는 문제가 없다고 한다. 공식가이드 💡 해결방법 방법 1) Recoil에서 ..

✍️ 문제 next.js의 .env파일에 있는 환경변수가 undefined로 나옴 💡 해결방법 Next.js Version 9.4 이상 환경변수 이름에 NEXT_PUBLIC_을 프리픽스(prefix) 붙여주면 사용가능해진다. # .env 변경 전 API_BASE_URL=http://localhost # .env 변경 후 NEXT_PUBLIC_API_BASE_URL=http://localhost 이렇게 설정하고 아래와 같이 사용하면 된다! const BASE_API_URL = `${process.env.NEXT_PUBLIC_API_BASE_URL}/api`; Next.js Version 9.4 미만 next.confg.js에 사용할 환경변수를 설정해준다. # .env API_BASE_URL=http://l..