ページ上部に SNS アイコンを追加した。(Github を SNS と呼んでいいのか…)
技術的に難しいことはなく、iconmonstr からアイコン画像をダウンロードしてきて、リンクをつければいいだけだが、 Next.js の Link と無駄に格闘していたので一時間もかかった。
結論から言うと、サイト外へのリンクは上述の Link タグでは実装できないみたい。なので下に示すような dirty な実装に…
{props.externalLinks && props.externalLinks.map((link,i) => {
return (
<a className="dib ma1" href={link.href} key={i}>
<img className="pa1 bg-white" src=
{`/static/assets/images/sns-icons/${link.name}.png`} alt=
{link.name} style={{height: "20px", borderRadius: "50%"}} />
</a>
)
})}
他にも追加する予定なので ogp 用の画像( Twitter とかでカードになったときの画像)はまだ更新していない。