Next.jsでsvgを使用する

概要

• TypeScript × Next.jsでsvgを使う

手順

Next.jsのリポジトリにsvgを使用する例があります。

これを参考にbabel-plugin-inline-react-svgを追加

yarn add -D babel-plugin-inline-react-svg

.babelrc に以下を追記

.babelrc

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

これでNext.js上で、svgをそのままインポートして利用できます。

しかし、Typescriptを使用している場合、次のようなエラーが出ます。

Cannot find module './logo.svg'.ts

これは解決するには以下の宣言を追加します。

index.d.ts

declare module '*.svg'

以上で問題なくsvgが使用できるはずです。