{"id":38139,"date":"2023-01-19T22:15:29","date_gmt":"2023-08-17T02:18:20","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8react%e4%b8%ad%e5%bf%bd%e7%95%a5i18n%e7%9a%84json%e5%af%bc%e5%87%ba%e8%ae%be%e7%bd%ae\/"},"modified":"2024-04-29T10:34:04","modified_gmt":"2024-04-29T02:34:04","slug":"%e5%9c%a8react%e4%b8%ad%e5%bf%bd%e7%95%a5i18n%e7%9a%84json%e5%af%bc%e5%87%ba%e8%ae%be%e7%bd%ae","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8react%e4%b8%ad%e5%bf%bd%e7%95%a5i18n%e7%9a%84json%e5%af%bc%e5%87%ba%e8%ae%be%e7%bd%ae\/","title":{"rendered":"\u5728React\u4e2d\u5ffd\u7565i18n\u7684JSON\u5bfc\u51fa\u8bbe\u7f6e"},"content":{"rendered":"

\u5e94\u7528\u573a\u5408<\/h1>\n

\u7528create-react-app\u521b\u5efa\u7684\u9879\u76ee\uff0c\u5f53\u4f7f\u7528i18n-next\u8fdb\u884c\u591a\u8bed\u8a00\u5316\u65f6\uff0c\u624b\u52a8\u7f16\u5199*.json\u7684\u7ffb\u8bd1\u6570\u636e\u5f88\u9ebb\u70e6\u3002\u5e0c\u671b\u80fd\u81ea\u52a8\u627e\u5230*.tsx\u6216*.js\u4e2d\u9700\u8981\u7ffb\u8bd1\u7684\u90e8\u5206\uff0c\u5e76\u8ffd\u52a0\u81f3*.json\u4e2d\uff01<\/p>\n

\u8fd9\u6b21\u4ecb\u7ecd\u7684\u4f8b\u5b50\u662f\u4e00\u4e2a\u53ea\u6d89\u53ca\u524d\u7aef\u90e8\u5206\u7684\u975e\u5e38\u7b80\u5355\u7684SPA\u3002
\ni18n-next\u662f\u4e00\u4e2a\u5f88\u5b9e\u7528\u7684\u5de5\u5177\uff0c\u5b83\u53ef\u4ee5\u5f15\u5165locize\uff0c\u4e5f\u53ef\u4ee5\u7528\u4e8e\u540e\u7aef\u5f00\u53d1\uff0c\u4e86\u89e3\u4e00\u4e0b\u4f1a\u5f88\u5212\u7b97\u3002<\/p>\n

\u8ff7\u4e0a\u763e\u7684\u70b9<\/h1>\n

\u6211\u5148\u89e3\u91ca\u4e00\u4e0b\u9677\u9631\u70b9\u3002<\/p>\n

\u6700\u8fd1\u4f3c\u4e4e\u5f88\u6d41\u884cbabel-plugin-i18next-extract\u63d2\u4ef6\u3002\u7136\u800c\uff0c\u5fc5\u987b\u66f4\u6539webpack\u7684\u914d\u7f6e\u3002\u5982\u679c\u4f60\u6b63\u5728\u4f7f\u7528create-react-app\u521b\u5efa\u5e94\u7528\u7a0b\u5e8f\uff0c\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528\u547d\u4ee4npm eject\u6765\u5b9e\u73b0\u66f4\u6539webpack\u914d\u7f6e\uff0c\u4f46\u8fd9\u662f\u4e00\u4e2a\u4e0d\u53ef\u9006\u7684\u64cd\u4f5c\uff0c\u4e5f\u4e0d\u662f\u4e00\u4e2a\u53ef\u884c\u7684\u89e3\u51b3\u65b9\u6848\u3002\u56e0\u6b64\uff0c\u6700\u597d\u4e0d\u8981\u7ee7\u7eed\u4f7f\u7528babel-plugin-i18next-extract\u3002\u76f8\u53cd\uff0c\u63a8\u8350\u7684\u662f\u5b98\u65b9\u6587\u6863\u4e2d\u63d0\u5230\u7684i18next-parser\u3002<\/p>\n

\u5728\u63d0\u53d6\u5de5\u5177\u4e2d\u6211\u4eec\u4e5f\u63d0\u5230\u4e86i18next-parser\u3002<\/p>\n

\u9996\u5148\uff0c\u516c\u5f0f\u6587\u4ef6\u4e2d\u63d0\u5230\u7684\u662fi18next-parser\u3002<\/p>\n

npm<\/span> install<\/span> -g<\/span> i18next-parser<\/span>\r\n<\/code><\/pre>\n
\u8bbe\u5b9a<\/h1>\n
\u53c2\u8003\u516c\u5f0f\u6587\u6863\uff0c\u5199\u4e0bi18next-parser\u7684\u914d\u7f6e\u3002<\/p>\n
module<\/span>.<\/span>exports<\/span> =<\/span> {<\/span>\r\n    locales<\/span>:<\/span> [<\/span>'<\/span>en<\/span>'<\/span>,<\/span> '<\/span>ja<\/span>'<\/span>,<\/span> '<\/span>cn<\/span>'<\/span>],<\/span>\r\n    output<\/span>:<\/span> '<\/span>src\/locales\/$LOCALE\/$NAMESPACE.json<\/span>'<\/span>,<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
    \n
  • \n
      locale: \u6b32\u3057\u3044\u5206\u3060\u3051\u8a00\u8a9e\u3092\u8ffd\u8a18<\/ul>\n<\/li>\n<\/ul>\n
       <\/p>\n
        output: \u4f4d\u7f6e\u304csrc\u306e\u4e2d\u3067\u306a\u3044\u3068\u3001tsx\u304b\u3089import\u51fa\u6765\u306a\u3044\u306e\u3067\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u8a2d\u5b9a\u3092\u4e0a\u66f8\u304d<\/ul>\n
        \u8bbe\u7f6enpm\u7684\u811a\u672c\u3002<\/p>\n
        \"scripts\"<\/span>:<\/span> {<\/span>\r\n    \"i18next-extract\"<\/span>:<\/span> \"i18next 'src\/**\/*.{tsx,ts}'\"<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
        \u73b0\u5728\u8bbe\u7f6e\u5b8c\u6210\u4e86\uff0c\u6211\u4f1a\u5c06\u7ffb\u8bd1\u6587\u4ef6\u8f93\u51fa\u4e3aJSON\u683c\u5f0f\u3002<\/p>\n
        npm<\/span> run<\/span> i18next-extract<\/span>\r\n<\/code><\/pre>\n
        \u7136\u540e\uff0c\u5e94\u8be5\u4ee5\u4ee5\u4e0b\u7684\u7ed3\u6784\u8fdb\u884c\u8f93\u51fa\u3002<\/p>\n
        .\/\r\n\u2503\r\n\u2523\u2501 src\r\n\u2503    \u2523\u2501 locales\r\n\u2503    \u2503    \u2523\u2501 cn\r\n\u2503    \u2503    \u2503    \u2517\u2501 translation.json\r\n\u2503    \u2503    \u2523\u2501 en\r\n\u2503    \u2503    \u2503    \u2517\u2501 translation.json\r\n\u2503    \u2503    \u2517\u2501 jp\r\n\u2503    \u2503         \u2517\u2501 translation.json\r\n<\/code><\/pre>\n
        \u4ee3\u7801\u66f4\u6539 \u0302<\/h1>\n
        \u4ee5\u4e0b\u662f\u4e00\u79cd\u53ef\u80fd\u7684\u4e2d\u6587\u7ffb\u8bd1\uff1a
        \n\u4ece\u8fd9\u91cc\u5f00\u59cb\uff0c\u6211\u4eec\u4f1a\u5728\u6e90\u4ee3\u7801\u4e2d\u6dfb\u52a0\u7528\u4e8e\u7ffb\u8bd1\u7684\u914d\u7f6e\u3002
        \n\u9996\u5148\uff0c\u5728\u9876\u5c42\u7684React\u6587\u4ef6\u4e2d\u7f16\u5199i18n\u7684\u521d\u59cb\u5316\u8bbe\u7f6e\u3002
        \n\u540c\u65f6\uff0c\u5c06\u4e4b\u524d\u8f93\u51fa\u7684translation.json\u6587\u4ef6\u8fdb\u884c\u914d\u7f6e\u3002<\/p>\n
        import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> ReactDOM<\/span> from<\/span> '<\/span>react-dom<\/span>'<\/span>;<\/span>\r\nimport<\/span> '<\/span>.\/index.sass<\/span>'<\/span>;<\/span>\r\nimport<\/span> reportWebVitals<\/span> from<\/span> '<\/span>.\/reportWebVitals<\/span>'<\/span>;<\/span>\r\nimport<\/span> App<\/span> from<\/span> \"<\/span>.\/components\/App<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> createBrowserHistory<\/span> }<\/span> from<\/span> \"<\/span>history<\/span>\"<\/span>\r\nimport<\/span> {<\/span> Router<\/span> }<\/span> from<\/span> '<\/span>react-router<\/span>'<\/span>;<\/span>\r\nimport<\/span> HeaderApp<\/span> from<\/span> '<\/span>.\/components\/header<\/span>'<\/span>;<\/span>\r\n\/\/ i18n<\/span>\r\nimport<\/span> i18next<\/span> from<\/span> '<\/span>i18next<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> initReactI18next<\/span> }<\/span> from<\/span> '<\/span>react-i18next<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> jaCommon<\/span> from<\/span> '<\/span>.\/locales\/ja\/translation.json<\/span>'<\/span>\r\nimport<\/span> enCommon<\/span> from<\/span> '<\/span>.\/locales\/en\/translation.json<\/span>'<\/span>\r\nimport<\/span> cnCommon<\/span> from<\/span> '<\/span>.\/locales\/cn\/translation.json<\/span>'<\/span>\r\n\r\ni18next<\/span>.<\/span>use<\/span>(<\/span>initReactI18next<\/span>).<\/span>init<\/span>({<\/span>\r\n  debug<\/span>:<\/span> true<\/span>,<\/span>\r\n  resources<\/span> :<\/span> {<\/span>\r\n    ja<\/span>:{<\/span>common<\/span>:<\/span>jaCommon<\/span>},<\/span>\r\n    en<\/span>:{<\/span>common<\/span>:<\/span>enCommon<\/span>},<\/span>\r\n    cn<\/span>:{<\/span>common<\/span>:<\/span>cnCommon<\/span>},<\/span>\r\n  },<\/span>\r\n  lng<\/span>:<\/span> '<\/span>ja<\/span>'<\/span>,<\/span>\r\n  fallbackLng<\/span>:<\/span> '<\/span>ja<\/span>'<\/span>,<\/span>\r\n  keySeparator<\/span>:<\/span> false<\/span>,<\/span>\r\n  interpolation<\/span>:<\/span> {<\/span> escapeValue<\/span>:<\/span> false<\/span> },<\/span>\r\n});<\/span>\r\n\r\nconst<\/span> history<\/span> =<\/span> createBrowserHistory<\/span>({<\/span> basename<\/span>:<\/span> '<\/span>\/<\/span>'<\/span> });<\/span>\r\nReactDOM<\/span>.<\/span>render<\/span>(<\/span>\r\n  <<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n    <<\/span>Router<\/span> history<\/span>=<\/span>{<\/span>history<\/span>}<\/span>><\/span>\r\n      <<\/span>HeaderApp<\/span>\/><\/span>\r\n      <<\/span>App<\/span>><\/<\/span>App<\/span>><\/span>\r\n    <\/<\/span>Router<\/span>><\/span>\r\n  <\/<\/span>React<\/span>.<\/span>StrictMode<\/span>>,<\/span>\r\n  document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>root<\/span>'<\/span>)<\/span>\r\n);<\/span>\r\n\r\nreportWebVitals<\/span>(<\/span>console<\/span>.<\/span>log<\/span>);<\/span>\r\n<\/code><\/pre>\n
        \u7684\u5b9a\u4e49\u5982\u4e0b\u3002<\/p>\n
        import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> i18next<\/span> from<\/span> '<\/span>i18next<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> useTranslation<\/span> }<\/span> from<\/span> '<\/span>react-i18next<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> useEffect<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\r\n\r\nimport<\/span> ja_Trans<\/span> from<\/span> '<\/span>..\/locales\/ja\/maincontent.json<\/span>'<\/span>\r\nimport<\/span> en_Trans<\/span> from<\/span> '<\/span>..\/locales\/en\/maincontent.json<\/span>'<\/span>\r\nimport<\/span> cn_Trans<\/span> from<\/span> '<\/span>..\/locales\/cn\/maincontent.json<\/span>'<\/span>\r\n\r\nexport<\/span> function<\/span> Translate<\/span>()<\/span> {<\/span>\r\n    const<\/span> {<\/span> t<\/span> }<\/span> =<\/span> useTranslation<\/span>(<\/span>'<\/span>maincontent<\/span>'<\/span>);<\/span>\r\n    useEffect<\/span>(()<\/span> =><\/span> {<\/span>\r\n        i18next<\/span>.<\/span>addResources<\/span>(<\/span>'<\/span>ja<\/span>'<\/span>,<\/span> '<\/span>maincontent<\/span>'<\/span>,<\/span> ja_Trans<\/span>);<\/span>\r\n        i18next<\/span>.<\/span>addResources<\/span>(<\/span>'<\/span>en<\/span>'<\/span>,<\/span> '<\/span>maincontent<\/span>'<\/span>,<\/span> en_Trans<\/span>);<\/span>\r\n        i18next<\/span>.<\/span>addResources<\/span>(<\/span>'<\/span>cn<\/span>'<\/span>,<\/span> '<\/span>maincontent<\/span>'<\/span>,<\/span> cn_Trans<\/span>);<\/span>\r\n    },<\/span> [])<\/span>\r\n    return <\/span>(<\/span>\r\n        <<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n             <<\/span>p<\/span>><\/span>{<\/span>t<\/span>(<\/span>'<\/span>message<\/span>'<\/span>)<\/span>}<\/span><\/<\/span>p<\/span>><\/span>\r\n        <\/<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n    );<\/span>\r\n}<\/span>\r\nclass<\/span> App<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n    render<\/span>()<\/span> {<\/span>\r\n        return<\/span> <<\/span>Translate<\/span>\/>;<\/span>\r\n    }<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> App<\/span>;<\/span>\r\n<\/code><\/pre>\n
        \u53ea\u6709\u8fd9\u6837\u8fd8\u65e0\u6cd5\u5207\u6362\u8bed\u8a00\u3002\u63a5\u4e0b\u6765\uff0c\u6211\u5c06\u8be6\u7ec6\u4ecb\u7ecd\u5728\u4e4b\u524d\u7684index.tsx\u4e2d\u5199\u7684\u7684\u7ec6\u8282\u3002<\/p>\n
        import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> FunctionComponent<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> LanugageSelector<\/span> }<\/span> from<\/span> \"<\/span>.\/LanguageSelector<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> useTranslation<\/span> }<\/span> from<\/span> '<\/span>react-i18next<\/span>'<\/span>\r\nimport<\/span> {<\/span> useState<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> useEffect<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\n\r\nconst<\/span> HeaderApp<\/span>:<\/span> FunctionComponent<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n    const<\/span> [<\/span>t<\/span>,<\/span> i18n<\/span>]<\/span> =<\/span> useTranslation<\/span>();<\/span>\r\n    const<\/span> languages<\/span> =<\/span> [{<\/span> code<\/span>:<\/span> \"<\/span>ja<\/span>\"<\/span>,<\/span> name<\/span>:<\/span> \"<\/span>JAPANESE<\/span>\"<\/span> },<\/span> {<\/span> code<\/span>:<\/span> \"<\/span>en<\/span>\"<\/span>,<\/span> name<\/span>:<\/span> \"<\/span>ENGLISH<\/span>\"<\/span> },<\/span> {<\/span> code<\/span>:<\/span> \"<\/span>cn<\/span>\"<\/span>,<\/span> name<\/span>:<\/span> \"<\/span>CHINESE<\/span>\"<\/span> }];<\/span>\r\n    const<\/span> [<\/span>currentLang<\/span>,<\/span> setCurrentLang<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>\"<\/span>ja<\/span>\"<\/span>);<\/span>\r\n    \/\/ Change language of i18n<\/span>\r\n    useEffect<\/span>(()<\/span> =><\/span> {<\/span>\r\n        i18n<\/span>.<\/span>changeLanguage<\/span>(<\/span>currentLang<\/span>);<\/span>\r\n    },<\/span> [<\/span>currentLang<\/span>,<\/span> i18n<\/span>])<\/span>\r\n    \/\/ Handler<\/span>\r\n    const<\/span> handleLanguageSelectionChange<\/span> =<\/span> (<\/span>lang<\/span>:<\/span> string<\/span>)<\/span> =><\/span> {<\/span>\r\n        setCurrentLang<\/span>(<\/span>lang<\/span>);<\/span>\r\n    }<\/span>\r\n    return <\/span>(<\/span>\r\n        <<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n            <<\/span>header<\/span>><\/span>\r\n                <<\/span>div<\/span>><\/span>\r\n                    <<\/span>ul<\/span>><\/span>\r\n                        <<\/span>LanugageSelector<\/span> languages<\/span>=<\/span>{<\/span>languages<\/span>}<\/span> selectedLanguage<\/span>=<\/span>{<\/span>currentLang<\/span>}<\/span> onLanguageSelectionChange<\/span>=<\/span>{<\/span>handleLanguageSelectionChange<\/span>}<\/span> \/><\/span>\r\n                    <\/<\/span>ul<\/span>><\/span>\r\n                <\/<\/span>div<\/span>><\/span>\r\n            <\/<\/span>header<\/span>><\/span>\r\n        <\/<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n    );<\/span>\r\n\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> HeaderApp<\/span>;<\/span>\r\n<\/code><\/pre>\n
        \u7684\u5b9a\u4e49\u5982\u4e0b\u3002<\/p>\n
        import<\/span> React<\/span>,<\/span> {<\/span> FunctionComponent<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\n\r\nexport<\/span> type<\/span> LanguageSelectorProps<\/span> =<\/span> {<\/span>\r\n    languages<\/span>:<\/span> {<\/span> code<\/span>:<\/span> string<\/span>,<\/span> name<\/span>:<\/span> string<\/span> }[],<\/span>\r\n    selectedLanguage<\/span>:<\/span> string<\/span>,<\/span>\r\n    onLanguageSelectionChange<\/span>:<\/span> (<\/span>lang<\/span>:<\/span> string<\/span>)<\/span> =><\/span> void<\/span>,<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> const<\/span> LanugageSelector<\/span>:<\/span> FunctionComponent<\/span><<\/span>LanguageSelectorProps<\/span>><\/span> =<\/span> (<\/span>props<\/span>)<\/span> =><\/span> {<\/span>\r\n    const<\/span> langs<\/span> =<\/span> props<\/span>.<\/span>languages<\/span>.<\/span>map<\/span>((<\/span>lang<\/span>)<\/span> =><\/span> {<\/span>\r\n        return <\/span>(<\/span>lang<\/span>.<\/span>code<\/span> ===<\/span> props<\/span>.<\/span>selectedLanguage<\/span>)<\/span> ?<\/span> ''<\/span> :<\/span> <<\/span>li<\/span>><<\/span>p<\/span> onClick<\/span>=<\/span>{<\/span>()<\/span> =><\/span> props<\/span>.<\/span>onLanguageSelectionChange<\/span>(<\/span>lang<\/span>.<\/span>code<\/span>)<\/span>}<\/span>><\/span>{<\/span>lang<\/span>.<\/span>name<\/span>}<\/span><\/<\/span>p<\/span>><\/<\/span>li<\/span>><\/span>\r\n    });<\/span>\r\n\r\n    return <\/span>(<\/span>\r\n        <<\/span>div<\/span> className<\/span>=<\/span>\"i18n\"<\/span>><\/span>\r\n            {<\/span>langs<\/span>}<\/span>\r\n        <\/<\/span>div<\/span>><\/span>\r\n    );<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
        \u901a\u8fc7\uff0c\u663e\u793a\u82f1\u8bed\u3001\u65e5\u8bed\u548c\u4e2d\u6587\u3002\u70b9\u51fb\u5b83\u5c06\u5207\u6362\u663e\u793a\u3002\u4f7f\u7528\u4e09\u5143\u8fd0\u7b97\u7b26\uff0c\u6d88\u53bb\u4e86\u5f53\u524d\u663e\u793a\u7684\u8bed\u8a00\u3002<\/p>\n
        \u518d\u6b21\u63d0\u53d6<\/h1>\n
        \u5982\u679c\u80fd\u5199\u5230\u8fd9\u4e2a\u5730\u65b9\uff0c\u90a3\u5c31\u518d\u6b21\u6267\u884c\u4e4b\u524d\u7684\u547d\u4ee4\u8bd5\u8bd5\u770b\u5427\u3002<\/p>\n
        npm<\/span> run<\/span> i18next-extract<\/span>\r\n<\/code><\/pre>\n
        .\/\r\n\u2503\r\n\u2523\u2501 src\r\n\u2503    \u2523\u2501 locales\r\n\u2503    \u2503    \u2523\u2501 cn\r\n\u2503    \u2503    \u2503    \u2523\u2501 maincontent.json\r\n\u2503    \u2503    \u2503    \u2517\u2501 translation.json\r\n\u2503    \u2503    \u2523\u2501 en\r\n\u2503    \u2503    \u2503    \u2523\u2501 maincontent.json\r\n\u2503    \u2503    \u2503    \u2517\u2501 translation.json\r\n\u2503    \u2503    \u2517\u2501 jp\r\n\u2503    \u2503    \u2503    \u2523\u2501 maincontent.json\r\n\u2503    \u2503         \u2517\u2501 translation.json\r\n<\/code><\/pre>\n
        \u53ea\u8981\u4f60\u80fd\u8d70\u5230\u8fd9\u4e00\u6b65\uff0c\u606d\u559c\u4f60\uff01\u63a5\u4e0b\u6765\u53ea\u9700\u8981\u4e0d\u65ad\u5730\u5199\u7ffb\u8bd1\u5c31\u53ef\u4ee5\u4e86\u3002<\/p>\n
        \u603b\u7ed3<\/h1>\n
        \u5728npm start\u7684\u8fc7\u7a0b\u4e2d\uff0c\u5982\u4f55\u8fd0\u884cnpm run i18next-extract\u5462\uff1f<\/p>\n
        \u80dc\u5229\u8005\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
        \u5e94\u7528\u573a\u5408 \u7528create-react-app\u521b\u5efa\u7684\u9879\u76ee\uff0c\u5f53\u4f7f\u7528i18n-next\u8fdb\u884c\u591a\u8bed\u8a00\u5316\u65f6\uff0c\u624b\u52a8\u7f16\u5199*.j […]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38139","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u5728React\u4e2d\u5ffd\u7565i18n\u7684JSON\u5bfc\u51fa\u8bbe\u7f6e - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u5728react\u4e2d\u5ffd\u7565i18n\u7684json\u5bfc\u51fa\u8bbe\u7f6e\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u5728React\u4e2d\u5ffd\u7565i18n\u7684JSON\u5bfc\u51fa\u8bbe\u7f6e\" \/>\n<meta property=\"og:description\" content=\"\u5e94\u7528\u573a\u5408 \u7528create-react-app\u521b\u5efa\u7684\u9879\u76ee\uff0c\u5f53\u4f7f\u7528i18n-next\u8fdb\u884c\u591a\u8bed\u8a00\u5316\u65f6\uff0c\u624b\u52a8\u7f16\u5199*.j […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u5728react\u4e2d\u5ffd\u7565i18n\u7684json\u5bfc\u51fa\u8bbe\u7f6e\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-17T02:18:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T02:34:04+00:00\" \/>\n<meta name=\"author\" content=\"\u9038, \u79d1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u9038, \u79d1\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8react%e4%b8%ad%e5%bf%bd%e7%95%a5i18n%e7%9a%84json%e5%af%bc%e5%87%ba%e8%ae%be%e7%bd%ae\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8react%e4%b8%ad%e5%bf%bd%e7%95%a5i18n%e7%9a%84json%e5%af%bc%e5%87%ba%e8%ae%be%e7%bd%ae\/\",\"name\":\"\u5728React\u4e2d\u5ffd\u7565i18n\u7684JSON\u5bfc\u51fa\u8bbe\u7f6e - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-08-17T02:18:20+00:00\",\"dateModified\":\"2024-04-29T02:34:04+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8react%e4%b8%ad%e5%bf%bd%e7%95%a5i18n%e7%9a%84json%e5%af%bc%e5%87%ba%e8%ae%be%e7%bd%ae\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8react%e4%b8%ad%e5%bf%bd%e7%95%a5i18n%e7%9a%84json%e5%af%bc%e5%87%ba%e8%ae%be%e7%bd%ae\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8react%e4%b8%ad%e5%bf%bd%e7%95%a5i18n%e7%9a%84json%e5%af%bc%e5%87%ba%e8%ae%be%e7%bd%ae\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u5728React\u4e2d\u5ffd\u7565i18n\u7684JSON\u5bfc\u51fa\u8bbe\u7f6e\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\",\"name\":\"\u9038, \u79d1\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"caption\":\"\u9038, \u79d1\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8react%e4%b8%ad%e5%bf%bd%e7%95%a5i18n%e7%9a%84json%e5%af%bc%e5%87%ba%e8%ae%be%e7%bd%ae\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u5728React\u4e2d\u5ffd\u7565i18n\u7684JSON\u5bfc\u51fa\u8bbe\u7f6e - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u5728react\u4e2d\u5ffd\u7565i18n\u7684json\u5bfc\u51fa\u8bbe\u7f6e\/","og_locale":"zh_CN","og_type":"article","og_title":"\u5728React\u4e2d\u5ffd\u7565i18n\u7684JSON\u5bfc\u51fa\u8bbe\u7f6e","og_description":"\u5e94\u7528\u573a\u5408 \u7528create-react-app\u521b\u5efa\u7684\u9879\u76ee\uff0c\u5f53\u4f7f\u7528i18n-next\u8fdb\u884c\u591a\u8bed\u8a00\u5316\u65f6\uff0c\u624b\u52a8\u7f16\u5199*.j […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u5728react\u4e2d\u5ffd\u7565i18n\u7684json\u5bfc\u51fa\u8bbe\u7f6e\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-08-17T02:18:20+00:00","article_modified_time":"2024-04-29T02:34:04+00:00","author":"\u9038, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u9038, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"3 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8react%e4%b8%ad%e5%bf%bd%e7%95%a5i18n%e7%9a%84json%e5%af%bc%e5%87%ba%e8%ae%be%e7%bd%ae\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8react%e4%b8%ad%e5%bf%bd%e7%95%a5i18n%e7%9a%84json%e5%af%bc%e5%87%ba%e8%ae%be%e7%bd%ae\/","name":"\u5728React\u4e2d\u5ffd\u7565i18n\u7684JSON\u5bfc\u51fa\u8bbe\u7f6e - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-08-17T02:18:20+00:00","dateModified":"2024-04-29T02:34:04+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8react%e4%b8%ad%e5%bf%bd%e7%95%a5i18n%e7%9a%84json%e5%af%bc%e5%87%ba%e8%ae%be%e7%bd%ae\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8react%e4%b8%ad%e5%bf%bd%e7%95%a5i18n%e7%9a%84json%e5%af%bc%e5%87%ba%e8%ae%be%e7%bd%ae\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8react%e4%b8%ad%e5%bf%bd%e7%95%a5i18n%e7%9a%84json%e5%af%bc%e5%87%ba%e8%ae%be%e7%bd%ae\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u5728React\u4e2d\u5ffd\u7565i18n\u7684JSON\u5bfc\u51fa\u8bbe\u7f6e"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487","name":"\u9038, \u79d1","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","caption":"\u9038, \u79d1"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8react%e4%b8%ad%e5%bf%bd%e7%95%a5i18n%e7%9a%84json%e5%af%bc%e5%87%ba%e8%ae%be%e7%bd%ae\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38139"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38139\/revisions"}],"predecessor-version":[{"id":84751,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38139\/revisions\/84751"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}