Toru Shimizu

Next.jsでStatic Export(SSG)を使用している場合の、i18を活用した文言管理の一元化について紹介させていただきます。記事執筆時のNext.jsのバージョンとホスティング環境は以下になります。Next.js: 13.4.7ルーティング方法はPages Routerホスティング環境: CloudFront + S3 文言管理の一元化の必要性 文言管理の課題ウェブサイトやアプリケーションでは、多くのテキストが散在しているため、それらを管理するのは困難です。その結果、表記ゆれが生じることがあり、場合によってはユーザーの混乱を招いたり、一貫性の欠...

【Next.js】Static Export(SSG)でのi18nによる文言管理の一元化

フィーチャーフラグとはコードを書き換えることなく、特定の機能を動的に有効化したり無効化することができる開発手法です。この手法を用いることで、すべてのコードが本番環境にデプロイされている状態で、開発中またはテスト中の機能をユーザーには見えないように管理することができます。また、フィーチャートグル（Feature Toggle）と表現されることもありますが、本記事ではフィーチャーフラグ(Feature Flag)という表現を用いています。フィーチャートグル(Wikipedia) メリット ブランチワークの複雑性の解消フィーチャーフラグを使って開発中の機能をOFFの状態で...

【Next.js】フィーチャーフラグの導入方法

普段の業務において、パッケージ管理しているライブラリのバージョンを手作業で変更した際、yarn.lockを更新し忘れていることにレビューで気がつくことが何回かありました。そこで、yarn.lockの更新忘れを自動で検出できないか調べていたところ、たった1行追加するだけで実現できたので紹介します。 更新忘れによって発生する問題yarn.lockの更新忘れによって実際に発生していた問題としては、以下2つの例があります。更新忘れがレビューで止まる場合yarn.lockの更新忘れにレビュアーが気づくレビュイーに伝えるレビュイーがyarn.lockを更新してpush更新忘れ...

たった1行追加するだけでyarn.lockの更新忘れを自動で検出する方法

Next.jsで静的ファイル（HTML, CSS, JavaScriptなど）を出力する場合に使用するStatic Exports機能ですが、v13.3で使用方法に変更がありました。そこで、実際に変更してみたところ、変更後にnext startコマンドでアプリケーションが起動できなくなってしまったので解決方法を記事にしてみました。 Static Exportsの変更点まず、Static Exportsの変更点について。変更前next exportコマンドを実行することで静的ファイルが出力されていましたが、このコマンドはv13.3から非推奨となり、v14で削除されています。...

【Next.js】Static Export(SSG)でのi18nによる文言管理の一元化

【Next.js】フィーチャーフラグの導入方法

たった1行追加するだけでyarn.lockの更新忘れを自動で検出する方法

【Next.js】Static Exportsの設定変更後にnext startが起動しない問題とその解決方法