Next12 Next.js - SVG 사용해서 컬러, 사이즈 변경하기 (Feat.svrg) Next.js 로 프로젝트를 하면서 컴포넌트에서 svg 아이콘을 사용하려고 하니 컬러변경이 되지 않았다. 알고보니 컴포넌트는 svg 형식을 지원하지 않는다고 한다. 그래서 svgr 이라는 툴을 사용하여 리액트 컴포넌트를 svg 파일로 사용할 수 있도록 만드려고 한다. Next.js - SVG 사용해서 컬러, 사이즈 변경하기 (Feat.svrg) 1. svgr 설치하자 npm 명령어를 사용해 인스톨해주자 npm install @svgr/webpack 2. next.config.js 에 아래 설정을 심어주자 // next.config.js const nextConfig = { // 웹팩을 통해 svg 파일을 리액트 컴포넌트로 변환하는 설정이다 webpack : (config) => { config.modul.. 2023. 5. 14. Next.js - Styled-components 적용전 렌더링 되는 이슈 요즘 한창 Next.js 프로젝트를 만드는 중이다. Styled-components 가 첫 렌더에만 적용이 되고 새로고침을 한 후에는 적용이 안되는 이슈가 있었다. 열심히 구글링을 해본 결과, Next.js가 SSR로 동작하기 때문에 style 적용되기 전에 렌더링이 되어서 이슈가 발생한 것을 알게 되었다. 그렇기 때문에 서버로 요청이 들어오면 가장 먼저 실행하게 만들어야 한다. 해결책을 찾던 새발자는 _app.tsx 와 _document.tsx 라는 서버 파일의 존재를 알게 되는데... Next.js - Styled-components 적용전 렌더링 되는 이슈 우리는 빨간 박스에 있는 부분에서 밑작업을 할 것이다. 위치를 잘 알아 놓자. 1. 일단 pages 폴더 안에 _app.tsx 를 _documn.. 2023. 4. 16. Next.js - next dev / build / start 명령어 및 포트 변경하기 요즘은 Next.js 를 공부하는 중이다. 최근까지 CSR 방식을 사용해 개발하며 느꼈던 단점들을 SSR 과 SSG 방식을 통해 보완할 수 있게 되어 매우 들떠있다. Next.js 를 시작하며 명령어가 너무 헷갈렸다. 정확한 명령어를 알고 사용하기 위해 정리해보았다. dev - Runs next dev to start Next.js in development mode // 디벨롭 모드 시작하기 build - Runs next build to build the application for production usage // 프로덕션 빌드할 떄 start - Runs next start to start a Next.js production server // 프로덕션 서버 시작하기 - next dev 는 so.. 2023. 4. 7. 이전 1 2 다음 반응형
