Kohei Asai

Kohei Asai

2019/07/28に投稿
  • English
  • 日本語
  • "完全な" i18n + SSRな個人ウェブサイトを作りました

    生活の拠点をカナダのバンクーバーに移したので、自分のウェブサイトをインターナショナルなウェブサイトにしました。Mediumの動向が怪しいのもあり、ブログもこのウェブサイトに移そうと思います。

    やったこと

    Next.js 9

    バージョン9でゼロコンフィグのTypeScriptサポートが入ったのでNextで作り、エンドポイントごとにサーバーサイドレンダリングしています。バージョン8以前はNext.jsのTypeScript用のプラグインを入れて.babelrcを編集したりと設定が必要でした。Next.jsの一部がTypeScriptで書かれるようにもなり、TypeScriptユーザーがより安心して使えるようになっています。

    Contentfulの利用

    ヘッドレスCMSのContentfulをコンテンツ置き場として使っています。ヘッドレスCMSというのはフロントエンドを持たない (バックエンドとダッシュボードのみの) CMSのことで、静的サイトジェネレーターを用いたりWebアプリケーションフロントエンドを自分で開発してAPIとして使うものです。身近なところだと最近はWordpressやGhostもWeb APIを持っています。このウェブサイトは簡潔には次の図のようなフローで動いています:

    How this website translate itself

    今のところはブログ (このブログ記事もそうです) とプロフィールのみですが、ゆくゆくは自分の仕事のことやプライベート開発のこともこちらに置いていくつもりです。

    "完全な" 多言語化

    トップページの各種文言やブログ記事のようなコンテンツの多言語化だけでなく、OGPLinking Data (Schema.org)、RSS、Sitemapなども多言語化しています。これらのメタデータやメタファイルも日本語でリクエストされれば日本語でレスポンスし、英語でリクエストされれば英語でレスポンスします。

    日本語英語
    HTTP response in JapaneseHTTP response in English

    FeedlyでのRSSフィードのプレビュー

    Screen Shot 2019-07-29 at 16.00.38-optimized

    Lighthouseで満点

    Google ChromeのAuditsで「Throttling: Simulated Dast 3G, 4x CPU Slowdown」でデスクトップとモバイルの両方で満点になりました。まあまあ新しいMacbook Proで撮ってるので甘い採点ですが、裏で色々なことをやっているのを考えるとそれなりのアチーブメントかなぁ、と思います。

    デスクトップモバイル
    Perfect score at Lighthouse (desktop)Perfect score at Lighthouse (mobile)

    Aug 26th, 2019 追記:

    今は満点ではありません。理由として:

    • シンタックスハイライトはアクセシビリティのスコアを下げてしまう
    • 画像がパフォーマンスのスコアを下げることがある
      • WebPなどを使えば解消できるが、Safariが未だに対応していないため不可能

    おわりに

    Next.js 9が出たので調査タスクとして触ってみて、そのままガーッと作りきった感じでした。記事を書く場を作ったので次は書く習慣を開発していきたいです。

    ソースコードはこちらです。 興味があればぜひ見てみてください (Starもお願いします) !