このウェブサイトの作り方.

組織として Apple の開発者登録をするとき、Apple は会社のウェブサイトを確認します。だから、ちゃんとしたウェブサイトは優先度の高い作業でした。このサイトの作り方を紹介します。

技術スタック

• Next.js（App Router）。
• Cloudflare Workers で動かし、OpenNext adapter を使っています。
• next-intl で多言語対応。
• Tailwind CSS でスタイル。

このサイトも、各アプリのサイトも、すべて同じ構成です。やり方がひとつなら、覚えることも壊れるところも少なくて済みます。

初日から 3 つの言語

サイトは英語、繁体字中国語、簡体字中国語で始まりました。英語には接頭辞がなく（/blog）、他の言語にはあります（/zh-Hant/blog）。文章はすべて言語ごとにひとつの JSON ファイルに入れ、コンポーネントには直接書きません。あとから言語を足すときは、ファイルをひとつ増やすだけです。

後でその言葉どおりか試して、日本語と韓国語を追加しました。どちらもファイルがひとつ増えただけで、あとはサイト全体に合う丸ゴシック体を選びました。

データベースも CMS もなし

ブログ記事はコードの中のただのファイルです。記事を書くときは、ファイルを足してデプロイするだけ。ひとりで運営するなら、どんな CMS よりシンプルで、攻撃される心配もお金もかかりません。

（ほぼ）コードなしのアクセス解析

どの記事が読まれているか知りたいので、Cloudflare のタグマネージャー Zaraz 経由で Google Analytics 4 を使っています。GA4 の設定はコードではなく Cloudflare の管理画面にあるので、デプロイし直さなくても変更できます。

2 つの想定外

1. Zaraz が現れない。Zaraz は本来、すべてのページに自分でスクリプトを追加するはずです。でも私のサイトではそうなりませんでした。ページは Worker が作っていて、スクリプトが一度も追加されなかったのです。解決策は、ページの head に 1 行足すことでした：<script src="/cdn-cgi/zaraz/i.js">。これで全ページで読み込まれるようになりました。

2. Cookie のウィンドウがページ全体をふさぐ。EU と英国からの訪問者には、アクセス解析が動く前に同意をもらう必要があります。Zaraz には同意ウィンドウがありますが、ページ全体を覆ってしまい、デザインにも合わず、言語もページではなくブラウザに合わせて決まります。そこで、ページ下部に小さなバナーを自分で作り、サイトのすべての言語に対応させました。選択の保存は今も Zaraz が担当し、サイトは質問するだけ。「拒否する」も「同意する」と同じくらい簡単です。

どちらの問題も、サイトを公開してから初めて見つかりました。教訓：ドキュメントを読んだら、本番で試すこと。

コスト

Workers の有料プランは月 5 ドルで、すべてのサイトをまかなえます。ドメインは初年度 1 ドルでした。

シンプルで、安くて、速い。小さな会社のウェブサイトに必要なのはそれだけです。