[NEXTjs] svg를 ReactComponent처럼 사용하는 방법 (+storybook)
React 기반의 프로젝트에서는 .svg 에서 이미지를 import해서 바로 컴포넌트의 형태로 사용할 수 있지만 React 기반의 프레임워크인 NEXTjs 어플리케이션에서는 위의 방식대로 svg를 사용할 수 없습니다. svg 파일을 컴포넌트의 형태로 사용하면 svg의 속성들을 동적으로 변경해주어야 할 때 손쉽게 props를 내려줄 수 있어 편리합니다. React에서 사용하던 것처럼 nextjs에서 svg 파일을 컴포넌트처럼 바로 사용하기 위한 몇 가지 방법을 소개합니다. 1️⃣ @svgr/webpack 1. @svgr/webpack 라이브러리 설치 yarn add --dev @svgr/webpack npm install @svgr/webpack -D 2. next.config.js 설정 파일의 포맷이 s..
[NEXTjs] 다국어 페이지 설정하기 (next-i18next)
Locale이란? 로케일은 사용자 인터페이스에 사용하기 위해 언어, 지역, 출력 방식 등을 정의한 문자열을 말한다. 로케일에 대한 자세한 설명은 이 포스팅에서 볼 수 있다! 로케일(Locale)이란? 국제화(internationalization)와 지역화(localization) 로케일(Locale)이란? 국제화(internationalization)와 지역화(localization) 로케일(Locale)이란? 로케일이란 사용자 인터페이스(UI)에서 사용되는 언어(ISO 639-1 codes 표준 형식), 지역 설정(ISO 3166-1 표준 형식), 출력 방식(Character Set 또는 ISO 8859-1, UTF-8 등의 인코딩 식별자.. zubetcha.tistory.com Nextjs의 Inte..