このサイトのフロントエンド構造について

当サイト（route360.dev）のアーキテクチャ・設計について紹介します。

Reactフレームワーク: Next.js

Next.jsを採用した理由は、多言語サイト対応が導入しやすかったからです。

当初はGatsby.jsで多言語サイトの構築を試みていました。

しかしGatsby.jsは、（アプリではない）このような通常のウェブサイト・ブログ等には非常に使い勝手が良いのですが、こと多言語化となると使い勝手がイマイチです。多言語化用プラグインも公式・サードパーティー含めいくつかあるものの、公式製はGitHubページがなくなっていたり、サードパーティー製でも開発が止まっています。

多言語化の方法

Gatsby.jsでは少々複雑な多言語設定も、Next.jsではコンフィグ用のnext.config.jsにロケール設定を入れるだけです。

当サイトのnext.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  i18n: {
    locales: ["en", "fr", "ja"],
    defaultLocale: "en",
  },
  trailingSlash: true,
}

module.exports = nextConfig

もちろんこれだけではなく、SEO対策には他にも色々することはありますが、この設定をするだけで、サイト内リンクは自動で書き換わります。他のi18n系のライブラリ・モジュールは使っていません。

UIフレームワーク: なし

UIフレームワークは使っていません。cssモジュールです。

ヘッドレスCMS: なし

当初はDatoCMSで作成していましたが、無料プランではレコードが300までと非常に少ないことに気付き、急遽ローカルMarkdownで作り直しました。

ヘッドレスCMSではContentfulでも多言語サイト構築（レコード25,000まで無料）が可能ですが、無料プランでは2カ国語までです。今回は3カ国語対応のため、Contentfulは断念。

日本の国産ヘッドレスCMSは、多言語の機能はあっても有料ですね。もうちょっと頑張れ、日本のCMS。

ホスティング: Vercel

https://vercel.com/

ホスティングには使い慣れたCloudflare Pagesを利用したかったのですが、多言語設定（i18n）を入れているためnext exportがサポートから外れてしまい、色々試したもののどうにもデプロイができなかったため、半ば仕方なしにVercelを使っています。

その他

• コメントシステム - giscus
• Webフォント - Fontawesome
• シンタックスハイライト - Prism.js
• 翻訳 - 自力😅（DeepLの多大なご協力あり）

まとめ

Next.js自体の勉強も兼ねて作ったサイトですが、Gatsby.jsとの違いに大分戸惑いつつも、ある程度形になったかと思います。

多言語サイトの作り方もわかったので、手持ちの他のサイトもNext.jsで作り直したいところです。