Cara Efektif Integrasi SVG dengan NextJS

This content originally appeared on DEV Community and was authored by Zuhal

SVG (Scalable Vector Graphics) adalah format gambar yang sangat berguna dalam pengembangan web karena kemampuannya mempertahankan kualitas gambar pada berbagai ukuran. Namun, mengintegrasikan SVG dalam aplikasi Next.js sering dianggap rumit. Artikel ini memberikan panduan praktis tentang cara efektif mengintegrasikan SVG ke dalam aplikasi Next.js Anda.

Membangun Struktur Folder

Untuk mengintegrasikan SVG ke dalam aplikasi Next.js, buat folder assets di dalam src. Tempatkan file SVG Anda di dalam folder tersebut.

src/
|── assets/
│   └── logo.svg
└── pages/

Mengatur Konfigurasi Webpack untuk SVG

Untuk menggunakan SVG sebagai komponen React, Anda perlu mengonfigurasi Webpack dan menginstal @svgr/webpack

Install @svgr/webpack dengan perintah berikut:

npm install @svgr/webpack --save-dev

Buka file next.config.js di root proyek Anda.

Tambahkan konfigurasi berikut untuk mengintegrasikan @svgr/webpack

// next.config.js
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

Menggunakan SVG dalam Komponen React

Impor file SVG yang telah Anda tempatkan di folder src/assets

import Logo from '@/src/assets/logo.svg';

Gunakan SVG dalam komponen React Anda seperti berikut

import Logo from '../src/assets/logo.svg';

export default function HomePage() {
  return (
    <div>
      <h1>Selamat Datang di Website Kami!</h1>
      <Logo width={100} height={100} />
    </div>
  );
}

Kesimpulan

Dengan mengikuti langkah-langkah ini, Anda dapat mengintegrasikan SVG dengan mudah ke dalam aplikasi Next.js Anda, meningkatkan desain dan performa aplikasi Anda. Struktur folder yang terorganisir dan konfigurasi yang tepat akan membantu Anda memanfaatkan SVG secara maksimal.

This content originally appeared on DEV Community and was authored by Zuhal