i18nでAmplify-UIの認証画面の日本語化を試しました

やりたいこと

・前回Amplify-UIで作った認証画面は、デフォルトで英語表示になっていますので、日本語化対応を行いたい

※Amplify-UIの認証画面の作り方は以下をご参照ください

やり方

前回のフォルダ配下に、i18n.jsのファイルを作り、日本語翻訳のdictを作ります～
（i18nは事前にモジュールのnpm installが要らずAmplify-UIでもともとついた機能となります）

中にはこんな感じ～
（日本語翻訳は自分でやらないといけない）

i18n.js

// i18n.js
import { I18n } from 'aws-amplify/utils';

const dict = {
  ja: {
    // サインイン画面
    'Username': 'ユーザー名',
    'Password': 'パスワード',
    'Email Address *': 'メールアドレス',
    'Enter your Username': 'ユーザー名を入力してください',
    'Enter your Password': 'パスワードを入力してください',
    'Confirm Password': 'パスワードを確認',
    'Please confirm your Password': 'パスワードを再入力してください',
    'Reset Password': 'パスワードのリセット',
    'Enter your username': '名前（ID）を入力してください',
    'Sign In': 'サインイン',
    'Sign in': 'サインイン',
    'Sign Up': 'サインアップ',
    'Forgot your password?': 'パスワードをお忘れの方',
    'Reset password': 'パスワードをリセット',
    'No account?': 'アカウントを持っていない方',
    'Create account': 'アカウントを作成',
    'Create Account': 'アカウントを作成',
    'Have an account?': 'アカウントお持ちの方',
    'Confirm Sign up': 'サインアップの確認',
    'Back to Sign In': 'サインインに戻る',
    'Send code': 'コードを送信'
    // 必要に応じて他のラベルも追加
  },
};

I18n.putVocabularies(dict);
I18n.setLanguage('ja');

次に、index.jsにi18n.jsをimportします

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Test from './Test';
import reportWebVitals from './reportWebVitals';

// ここを追加
import './i18n';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Test />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

すると、もう一度画面を起動
http://localhost:3000/

前回英字だった画面が日本語になりました～

Before

After

参照サイト