
多國語系在許多網站已經是不可或缺的一個功能，在自己的研究中想做這事件情很久了，在公司的日常開發中也有許多這樣的功能，但前人已經設定好了，沒有從頭來過的感覺
剛好這兩天終於有一個契機與必要實作的需求出現了。於是就把自己實作的步驟記錄下來！

### 1. 安裝React-intl

```bash
yarn add react-intl
```

### 2. 設定next.config.js

開啟next.config.js設定預設的語系以及支援的語系設定，locales是設定支援的語系檔案而 defaultLocale 當沒有傳入語系設定時所使用的預設語系

```js
module.exports = {
  ...
  i18n: {
    locales: ['en', 'tw'],
    defaultLocale: 'tw',
  },
  ...
};
```

### 3. 放置語系包的位置

在語系設定上我的檔案會放在`/src/locales`中，裡面的檔案要對應到在**next.config.js**中所設定的語系相同，網站中有需要用到多國語系的語系檔案都可以在這邊設定

語系的檔案結構
```txt
.
├── ...
├── src
│   ├── locales
│   │   ├── en.ts
│   │   ├── tw.ts
│   │   └── index.ts
│   ├── pages
│   │   ├── _app.ts
│   └── ...
└── ...
```
語系資料對應後續我們就可以使用`FormattedMessage`的Component來取得該資料值。
```typescript
// en.ts檔案設定
export const en = {
    my_title: `Bruno's Jan Tech blogger`
}

// tw.ts
export const tw = {
    my_title: `Bruno's 技術筆記`
}

// index.ts
import { en } from "./en";
import { tw } from "./tw";

export const messages: any = {
    tw,
    en
}
```

### 4. 設定_app.tsx檔案

在_app.tsx中設定`IntlProvider`以及語系包的資料設定

```tsx
import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import React, { ReactElement } from 'react';
import { IntlProvider } from 'react-intl';
import { messages } from '~/locales';

const App: any = ({
                      Component,
                      pageProps,
                  }: AppProps) => {
    const router = useRouter();
    const {
        locale,
        defaultLocale,
    } = router;
    const message: any = messages[locale];
    return <IntlProvider locale={ locale } defaultLocale={ 'tw' } messages={ message }>
        <Component { ...pageProps } />
    </IntlProvider>;
};

export default App;
```

接下來就可以在畫面上需要多語言翻譯的位置加上下列程式碼就可以展現多國語系了！
```tsx
import { FormattedMessage } from 'react-intl';


<FormattedMessage id='my_title' defaultMessage='My default title' />
```

### 輸出靜態網站

完成了多語系社的設定以後，當要輸出靜態網站時出現了錯誤...竟然說i18n不支援`next export`！

```bash
$ next export
info  - using build directory: /Users/Yi-Shiuan/Documents/git/Blogger/.next
info  - Copying "static build" directory
info  - No "exportPathMap" found in "/Users/Yi-Shiuan/Documents/git/Blogger/next.config.js". Generating map from "./pages"
Error: i18n support is not compatible with next export. See here for more info on deploying: https://nextjs.org/docs/deployment
    at /Users/Yi-Shiuan/Documents/git/Blogger/node_modules/next/dist/export/index.js:147:19
    at async Span.traceAsyncFn (/Users/Yi-Shiuan/Documents/git/Blogger/node_modules/next/dist/trace/trace.js:79:20)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

後來在官網中找到了這一段文字..

> Note that Internationalized Routing does not integrate with next export as next export does not leverage the Next.js routing layer.
> Hybrid Next.js applications that do not use next export are fully supported.
>
> [Next.js - Internationalized Routing](https://nextjs.org/docs/advanced-features/i18n-routing#limits-for-the-i18n-config)

好吧，看起來我想輸出靜態網站不支援這樣的設定，所以只好動點手腳讓系統支援他！

用靜態路由的設定來讓他可以支援多國語系

```tsx
export const getStaticPaths: GetStaticPaths = async (): Promise<any> => {
    return {
        paths: [
            { params: { lang: 'tw' } },
            { params: { lang: 'en' } },
        ],
        fallback: false,
    };
};
```
再次修改_app.tsx

使用路由取得語系，再去設定 `IntlProvider`載入的語系設定
```tsx
import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import React, { ReactElement } from 'react';
import { IntlProvider } from 'react-intl';
import { messages } from '~/locales';

const App: any = ({
                      Component,
                      pageProps,
                  }: AppProps) => {
    library.add(fas, fab);
    const router = useRouter();
    const {
        locale,
        defaultLocale,
    } = router;
    const { lang } = router.query;
    // @ts-ignore
    const message: any = messages[lang ?? 'tw'];

    return <IntlProvider locale={ locale ?? 'tw' } defaultLocale={ 'tw' } messages={ message }>
        <Component { ...pageProps } />
    </IntlProvider>;
};

export default App;
```

最後移除next.config.js中的設定
```js
    i18n: {
        locales: ['en', 'tw'],
        defaultLocale: 'tw',
    },
```

這樣就可以在靜態網站中擁有多國語系囉！

### 參考資料

[Next.js - Internationalized Routing](https://nextjs.org/docs/advanced-features/i18n-routing#limits-for-the-i18n-config)

[Internationalizing Next.js app with react-intl by Iskren Lalov](https://www.laloov.com/posts/internationalizing-next-js-app-with-react-intl)


多國語系在許多網站已經是不可或缺的一個功能，在自己的研究中想做這事件情很久了，在公司的日常開發中也有許多這樣的功能，但前人已經設定好了，沒有從頭來過的感覺 剛好這兩天終於有一個契機與必要實作的需求出現了。於是就把自己實作的步驟記錄下來！

Next.JS 靜態網站 + React-Intl 的 i18n