Next.js アプリに SVG をインポートする 6 つの方法

Next.js アプリケーションに SVG をインポートする 6 つの方法を学びます。この記事は、ニーズに合った適切な方法を選択するのに役立ちます。

SVG をNext.js アプリにインポートすることは、今日のフロントエンド プロジェクトで一般的に必要なことです。SVG 形式は大部分のライブラリでサポートされており、スケーラビリティ、パフォーマンス、柔軟性に関して多くの利点があるため、その使用方法を知ることが重要です。

主に SVG に焦点を当てますが、この投稿で取り上げるパッケージのほとんどは他の画像形式にも適用されます。さらに、SVG を Next.js プロジェクトにインポートするときに発生する可能性のあるいくつかの一般的なエラーと、それらを修正する方法についても説明します。この記事では、Next.js アプリケーションで SVG をインポートして使用するために使用できるさまざまな方法について説明します。始めましょう。

Next.js の SVG を理解する

SVG としてよく知られるスケーラブル ベクター グラフィックスは、軽量でスケーラブルでアニメーション化できるため、最も人気のある画像形式の 1 つです。SVG 画像は人気があるにもかかわらず、特にパッケージ バンドラーを使用するReactやNext.jsなどのフロントエンド フレームワークの場合、その使用法は簡単ではありません。したがって、Next.js または React アプリケーションで SVG 画像をインポートまたは使用しようとすると、さまざまなエラーが発生することは珍しくありません。

SVG を使用する利点

上で示唆したように、SVG は今日の Web 上で最も人気のある画像形式の 1 つです。同等のラスター画像とは対照的に、ベクター画像には計り知れない利点があります。Next.js アプリケーションに SVG をインポートする方法を学ぶ前に、SVG を使用する利点をいくつか見てみましょう。

• SVG は軽量です。ベクトルベースの画像は、ビットマップ画像よりも必要なストレージ容量とメモリが少なくなります。
• アニメーション化可能:最新の CSSとJavaScriptを使用して SVG をアニメーション化し、操作することが可能です。
• SVG はスケーラブルです。SVG は解像度に依存しません。画質を損なうことなくサイズを変更できます
• SVG はアクセス可能です。SVG は XML ベースです。マークアップ内にコンテンツを直接追加して、アクセシビリティを向上させることができます
• SVG は SEO に適しています: Google などの検索エンジンが SVG を検索、インデックス付け、クロールできるため、SVG は SEO に適しています。

上記の利点があるため、それらをプロジェクトに追加する方法を理解する必要があります。

Next.js に SVG をインポートする方法

Next.js を支えるVercelは、Next.js を使用してフルスタック アプリケーションを構築およびホストできるように、そのエコシステム内で完全なプラットフォームとソフトウェア パッケージ スイートを提供します。Next.js の使用中に発生した問題については、ほとんどの場合、Next.js エコシステム内で解決策が見つかります。

next/imageすべての標準 Next.js プロジェクトには、画像を操作するための組み込みコンポーネントが付属しています。next/imageこのコンポーネントはビットマップ画像とベクター画像に使用できます。したがって、Next.js アプリケーションで SVG またはその他の画像形式を使用する場合、ほとんどの場合、組み込みコンポーネントがnext/image最初の選択肢になります。

組み込みnext/imageコンポーネントはパフォーマンスが高く、最適化されており、Next.js の SVG およびその他の画像形式に対して推奨されるソリューションですが、これが唯一のソリューションというわけではありません。組み込みコンポーネントがnext/image機能しない場合は、Next.js で SVG をインポートして使用する他の方法もあります。

SVG 画像をJSX要素としてインラインでレンダリングすることも、サードパーティのパッケージを使用してインポートしてレンダリングすることもできます。このセクションでは、Next.js アプリケーションで SVG をインポートして使用できるさまざまな方法を検討します。

JSX 構文を使用して SVG を React コンポーネントに埋め込む

React コンポーネントで SVG を使用する最も簡単な方法の 1 つは、SVG をインラインに埋め込むことです。ただし、これには SVG 要素を JSX 構文に変換する必要があります。SVG 画像マークアップを JSX 構文に変換するためのオンライン ツールがいくつかあります。そのようなツールの 1 つがSVGRです。

SVGR は、SVG を JSX 構文に変換し、次のように React 機能コンポーネントにラップします。

const TwitterIcon = ({ props }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} {...props}>
    <linearGradient
      id="a"
      x1={10.341}
      x2={40.798}
      y1={8.312}
      y2={38.769}
      gradientUnits="userSpaceOnUse"
    >
      <stop offset={0} stopColor="#2aa4f4" />
      <stop offset={1} stopColor="#007ad9" />
    </linearGradient>
    <path
      fill="url(#a)"
      d="M46.105 ..."
    />
  </svg>
)

React コンポーネントに埋め込む前に SVG を JSX 構文に変換しないと、次のエラーが発生する可能性があるため、必ず SVGR などのツールを使用してください。

Next.js では、上記のエラーの代わりに以下のエラーが発生する場合もあります。

コンポーネントを使用して Next.js に SVG をロードする方法next/image

このnext/imageコンポーネントは、Next.js で SVG を含む画像を読み込み、レンダリングするための事実上のコンポーネントです。このコンポーネントは画像を効率的にロードしてレンダリングし、ページの読み込みの高速化、パフォーマンス、視覚的な安定性のために画像を最適化できます。これは HTML 要素の拡張ですimage。

Create React App コマンド ライン ツールを使用して Next.js アプリケーションをセットアップした場合、next/imageコンポーネントはアプリケーションで使用できるはずです。next/imageローカル SVG イメージを使用すると、次の例のようにコンポーネントをインポートして使用できます。

import Image from 'next/image';
import twitterIcon from "../../public/images/twitter-icon.svg";

const App = () => (
  <div>
    <Image
      priority
      src={twitterIcon}
      alt="Follow us on Twitter"
    />
  </div>
);

Next.js がすぐにそれらの値を決定するため、widthおよびプロパティを指定する必要はありません。height一方、リモート イメージの場合、srcプロパティは絶対 URL 文字列または相対 URL 文字列である必要があります。以下の例のようにheightとプロパティを設定する必要があります。width

import Image from 'next/image';

const App = () => (
  <div>
    <Image
      priority
      src="/images/twitter-icon.svg"
      height={32}
      width={32}
      alt="Follow us on Twitter"
    />
  </div>
);

コンポーネントを使用するときはnext/image、Next.js がプロジェクトのルート ディレクトリのパブリック ディレクトリからの画像などの静的アセットを提供することに注意してください。したがって、上記の例では、ファイルはディレクトリ内のディレクトリtwitter-icon.svgに存在する必要があります。imagespublic

Next.js はアイコンをインポートし、以下の画像のようにブラウザーにレンダリングします。

コンポーネントには複数の props を渡すことができますnext/image。必須およびオプションの props の完全なリストについては、next/image コンポーネントのドキュメントを確認してください。このセクションでは、next/imageコンポーネントを使用して Next.js アプリケーションで SVG をインポートおよびレンダリングすることに焦点を当てます。

next/imageNext.js には、この記事では説明していないコンポーネントと画像の最適化手法の機能がいくつかあります。詳細については、Next.js のドキュメントを確認してください。

next-images パッケージを使用して Next.js に SVG をインポートする方法

next -imagesパッケージは、Next にイメージをインポートするためのサードパーティ パッケージです。next/image上記の組み込みコンポーネントの代わりにこれを使用できます。next-images を使用すると、ローカル マシンまたは CDN からイメージをロードできます。さらに、これを使用して、Base64 エンコードでバンドル サイズの小さい画像を埋め込んだり、画像名にコンテンツ ハッシュを追加して画像をキャッシュしたりすることもできます。他の npm パッケージと同様に、next-images次のコマンドを使用して npm パッケージ レジストリからインストールします。

# NPM
npm install next-images

# Yarn
yarn add next-images

インストール後、next.config.jsプロジェクト ディレクトリのルートにファイルを作成し、次の基本構成を追加します。

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

上で説明したように、必要な構成をファイルに追加した後next.config.js、次に示すように、SVG をコンポーネントにインポートしてレンダリングできます。

import twitterIcon from "./twitter-icon.svg";

const App = () => <img src={twitterIcon} alt="Follow us on Twitter" />;

next-images パッケージを使用すると、プロジェクト ディレクトリまたは CDN 内のファイルからイメージをロードできます。組み込みnext/imagesコンポーネントや他のサードパーティ パッケージとは異なり、next-images パッケージは、すぐに使用できる圧縮やサイズ変更などの画像最適化手法をサポートしません。

SVGR を使用して Next.js に SVG をインポートする方法

前述したように、SVGR はSVG 画像を React コンポーネントに変換するためのサードパーティ パッケージです。Create React App など、いくつかの人気のある React プロジェクト テンプレート作成者は、実際に内部で SVGR を使用しています。これを開発依存関係としてインストールし、Next.js アプリケーションで React コンポーネントとして SVG のインポートを開始します。

# NPM
npm install --save-dev @svgr/webpack

# Yarn 
yarn add --dev @svgr/webpack

インストール後、next.config.jsプロジェクト ディレクトリのルートにファイルを作成し、次の基本的な Webpack 構成を追加します。

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    })

    return config
  },
}

これで、SVG を React コンポーネントとしてインポートし、Next.js アプリケーションでレンダリングできるようになりました。これは次のようになります。

import TwitterIcon from "./twitter-icon.svg";
const Example = () => <TwitterIcon />; 

babel-plugin-inline-react-svg を使用して Next.js に SVG をロードする方法

前のサブセクションのように SVGR パッケージを使用して SVG 画像をインポートする代わりに、 Babelプラグインを使用して同じ効果を実現することもできます。babel-plugin-inline-react-svgの使用を開始するには、次のコマンドを使用して npm パッケージ レジストリから開発依存関係としてインストールします。

npm i -D babel-plugin-inline-react-svg

インストール後、プロジェクト ディレクトリのルートに構成ファイルを.babelrc作成します。babel.config.json以下のブロックからコードをコピーして貼り付けることができます。Babel 構成ファイルがある場合、Next.js はそれを最終的な信頼できる情報源として扱います。

Create React App を使用した通常の Next.js プロジェクト セットアップには、組み込みnext/babelプリセットが含まれます。Next.jsは、プロジェクト ディレクトリのルートにある.babelrcまたはファイルを主要な情報ソースとして扱うため、Next.js が必要とするものを含め、必要なものがすべて含まれている必要があります。babel.config.json次のコードを参照してください。

{
  "presets": ["next/babel"],
  "plugins": ["inline-react-svg"]
}

これを完了すると、SVG 画像を React コンポーネントとしてインポートし、Next.js アプリケーションでレンダリングできるようになります。

"./twitter-icon.svg" から TwitterIcon をインポートします。const 例 = () => <TwitterIcon />; 

SVG をタグとともに使用する方法img

React または Next アプリケーションで SVG を使用する最も簡単な方法は、img通常の HTML ファイルと同様にタグを使用することです。publicただし、上で示唆したように、Next.js はアプリケーションのルート ディレクトリ内のディレクトリで画像などの静的アセットを検索します。アプリケーションにバンドルするすべてのイメージがpublicビルド時にディレクトリ内にあることを確認してください。

別のサーバーでイメージをホストし、イメージ URL を使用して参照することもできます。Next.js でのタグの使用法は、<img/>HTML 要素の使用法と似ていますimg。以下に示すように、および属性srcはalt必須です。

<img src="public/twitter-icon.svg" alt="Follow us on Twitter" />

Next.js で SVG をインポートするためのオプションの比較

Next.js には、SVG を含むいくつかの画像形式をロードしてレンダリングするための優れた機能が組み込まれています。コンポーネントnext/imageは HTML 要素の拡張ですimage。画像を効率的にロードしながら、組み込みのパフォーマンス最適化も提供し、next-image結果を使用してページのロードを高速化し、パフォーマンスを向上させます。

したがって、組み込みnext/imageコンポーネントには、Next.js アプリケーションで SVG を効率的にロードしてレンダリングするために必要な機能がすべて備わっています。これは、Create React App コマンド ライン ツールを使用して作成された Next アプリケーションの一部です。

上で述べたように、SVG をインラインに埋め込むこともできます。ただし、SVG が埋め込まれていると、React コンポーネントの読み取りと保守が困難になります。React コンポーネントのサイズが大きくなり、組み込みnext/imageコンポーネントの利点が失われる可能性があります。

この記事で取り上げたサードパーティのオプションを検討することもできます。上で示唆したように、next-imagesパッケージを使用する場合、Base64 エンコードを使用して HTTP リクエストを減らすことができます。ただし、next-images組み込みnext/imageコンポーネントのような組み込みの画像の最適化と圧縮は実行されません。

アプリケーションでサードパーティのパッケージを使用する場合の欠点にも注意する必要があります。これらはアプリケーションに追加のバンドルを追加しますが、これは を使用することで回避できますnext/image。また、サードパーティ パッケージの長期的なメンテナンス、セキュリティ、ライセンス要件も考慮する必要があります。サードパーティのパッケージは、ネイティブに存在しない機能がある場合にのみ使用してください。

結論

この記事で、Next.js アプリケーションで SVG と画像をインポートして使用するためのさまざまな方法を説明できれば幸いです。組み込みnext/imageコンポーネントには、Next.js アプリケーションで画像を効率的にインポートして使用するために必要な機能がすべて備わっています。

組み込みnext/imageコンポーネントがニーズを満たさない場合は、上で強調表示されているサードパーティ パッケージを検討することもできます。ただし、プロジェクトでサードパーティ パッケージを使用する前に、そのメンテナンス、セキュリティ、ライセンスについて常に慎重に検討してください。何か見逃した点や、SVG のインポートと使用に関するあなた自身の経験について、下のコメント セクションにコメントを残してください。

出典: https://blog.logrocket.com

#nextjs