自身のポートフォリオサイトをNext.js(AMP対応)に移行した
以前自身のポートフォリオサイトを作り、AMP対応したことを書いた。
ちなみに実際のサイトはこちら。
(よろしければ音楽やWEBアプリなど聴いたり見たりしてみてください〜)
基本的にこのサイトはHTML5 UPのテンプレートを用い、かつAMP対応させた状態に修正した上で、HTMLなどを直接書き換えて運用していた。
が、だんだんと書く内容が増えてきて、そろそろ原始的な管理から脱却するべきタイミングが来たように感じたので、Next.js with AMPに載せ替えることにした。
その時の手順をこちらに書いておこうと思いついたのだが、あまり書くことがないことに気づいた。
基本的には Next.jsでAMPのサンプルを最速で試す - at backyard で書いたとおりにAMP対応のテンプレートを作った上で、既存のリソースを移行させていく形となる。
まずは下記でAMP対応の雛形を作成
yarn create next-app --example amp amp-app
CSSのスタイルを移行していく必要があるので <style jsx global> にとりあえず既存のスタイルを放り込んで、あとはそのままHTMLを移行、必要に応じてJSXに書き換えていき、共通のcomponentを作成したりしながら、コードの簡略化を図っていった。
サイト自体がシンプルな作りということもあり、思いの外、移行作業自体は苦にはならなかった。
<style jsx global>{` /* ここにスタイルを全部詰め込んでいき、描画時にすべて展開されるようにした */ `}</style>
ここらへんについては ひとまず という感じもあるので、今後変えていくかもしれないし、時間を見つけて少しずつブラッシュアップもしていくつもり。
とりあえず必要なコンテンツデータの大半の内容についてはJSONデータで管理できるようになったので、このあとの流れとしてはこのJSONデータを複数の言語に分けて管理できるようにして、少しずつコンテンツのローカライズを図りたいところ。
