GatsbyサイトでPDFをダウンロードさせる＼プラグイン不要‼︎／

PDFファイルをダウンロードさせたい！！

いきなりですが、このような状況がたくさんあると思います。
PDFだけでなく、画像ファイルなど、何かしらのファイルをダウンロードできるようにしたい状況ってありますよね。

HTMLであれば下記のように、aタグにdownload属性を記述すればいいというのは常識ですね。

<a href="/downloadfile.pdf" download>Click for Download!!</a>

Gatsbyサイトではどうやるの？

結論から書くと、画像ファイルの読み込みと同様にimportしてhrefに設定するとできます。

import Pdf from "../static/downloadfile.pdf";
・
・
・
<a href={Pdf} download><p>ダウンロードする</p></a>

これで、テキストをクリックするとファイルをダウンロードできます。
importしないと、ダウンロードに失敗し「失敗 - ファイルがありません」と表示されます。


これ以外にLinkコンポーネントやプラグインを使ったスマートな方法をご存知の方がいらっしゃいましたら、ご教示願います。

Reactではimport

解説するまでもないですが、ReactではコンポーネントやCSSモジュールを使用する際にimportしますね。
他にも、画像を表示させるなどファイルを読み込む必要がある際にも、変数としてimportして、変数をソースにしてあげます。

import Image from "../static/image.webp";
・
・
・
<StaticImage src={Image} alt="alternative text" />

Gatsbyでサイトを作るとき、ファイルの読み込みに失敗したら試してみてください。