Nextjs에 less 및 svg 지원을 추가하는 방법

nextjs로 덜 사용하고 SVG 이미지를 사용하고 webpack으로 구성하는 데 시간을 보내고 싶지 않은 상황에 직면한 적이 있습니까? 솔직히 webpack 구성은 그렇게 간단하지 않습니다. 여전히 2020년 웹팩 구성은 숙련된 개발자에게도 너무 복잡하게 느껴집니다. 이 기사에서는 Nextjs에 less 및 svg 이미지에 대한 지원을 추가할 것입니다.

적은 지원

Less는 캐스케이딩 스타일 시트로 컴파일할 수 있고 클라이언트 측 또는 서버 측에서 실행할 수 있는 동적 전처리기 스타일 시트 언어입니다. 즉 less는 일반 CSS와 함께 많은 기능을 포함합니다.

nextjs에 less 지원을 추가하려면 npm에서 @zeit/next-less와 less 두 패키지를 설치해야 합니다.

npm install --save less @zeit/next-less

패키지 설치 후 프로젝트의 루트에 next.config.js라는 파일을 포함합니다.

2-3줄로 더 적은 구성을 추가합니다.

const withLess = require('@zeit/next-less');

module.exports = withLess({
  /* config options here */
});

이제 앱이 더 적게 지원합니다. 더 적은 파일을 추가하고 앱에서 가져오세요.

SVG 지원

Scalable Vector Graphics는 상호 작용 및 애니메이션을 지원하는 2차원 그래픽용 Extensible Markup Language 기반 벡터 이미지 형식입니다. SVG 사양은 1999년부터 World Wide Web Consortium에서 개발한 개방형 표준입니다.

프런트엔드 프레임워크 또는 라이브러리에 svg 지원을 추가하는 것은 항상 흥미롭습니다. 지원을 추가하려면 next-images 패키지가 필요합니다.

npm install --save next-images

설치 후 이미지 구성을 next.config.js 파일에 추가하기만 하면 됩니다.

const withImages = require('next-images');
module.exports = withImages();

그게 다야. svgs를 사용하려면 파일 svg 파일 또는 jsx 파일을 추가하기만 하면 됩니다.

백그라운드에서 이미지를 설정하려면 항상 .svg 형식을 사용하고 svg 이미지를 렌더링하려면 .jsx를 사용하여 구성 요소로 렌더링합니다.

import { BgLeafIcon } from '../images'; //mage.svg
...
  <div
      className="bg-image"
      style={{ backgroundImage: `url(${BgLeafIcon})` }}
    >

또는 구성 요소로 사용할 수 있습니다.

import { BgLeafIcon } from '../images'; //mage.jsx
...
<BgLeafIcon/>

이 글이 여러분들께 도움이 되었으면 합니다. 여러분의 소중한 생각을 자유롭게 댓글로 남겨주세요.

How to use Cookie in React