個人WebサイトをNext.jsで書き換えた

このドメイン (shoya.io) で公開しているポートフォリオ兼ブログをNext.jsで作り変えました。WordPress => Jekyll => Jekyll => Hugo => Next.jsへと、4度目のリニューアルです。

Next.jsを選んだ理由は、フロントエンド技術の情報をキャッチアップしたいと思ったのに加えて、バージョン10で追加されたInternationalized Routingがあれば元々Hugoでやっていたことが一通り実現できそうだと思ったからでした。Next.jsのInternationalization (i18n) はまだ機能が完全に揃っているとは言えないものの、以下の点に気をつければ問題なく使えそうです。

• i18nと$ next exportは現時点では併用できない。
  • i18n with next export calls getStaticProps for each defined lang, but then errors - GitHub
• サポートしているのはルーティングのみ。
  • 翻訳はlocaleを判定して代入するコードを自前で書くか他のライブラリ (例えばnext-translate) を使う必要がある。
• next/linkやnext/router経由であっても/にアクセスした際にページが再読込される。
  • このWebサイトでは、表示がカクつくのを防ぐために/homeのページを作って<Link href="/home" as "/">で遷移させることにした。

今回もコードをGitHub上で公開し、contents/とpublic/以外はMITライセンスです。ポートフォリオ・ブログのNext.js実装に興味のある方はぜひご活用ください。