# Internationalization

`@alifd/next` The current default language is Chinese. If you need to use other languages, you can see to the following guide:

## ConfigProvider

Currently support Simplified Chinese, Traditional Chinese, English and Japanese:

``` js
import { ConfigProvider, DatePicker } from '@alifd/next';
import enUS from '@alifd/next/lib/locale/en-us';
// import zhCN from '@alifd/next/lib/locale/zh-cn';
// import zhHK from '@alifd/next/lib/locale/zh-hk';
// import zhTW from '@alifd/next/lib/locale/zh-tw';
// import jaJP from '@alifd/next/lib/locale/ja-jp';

// If the application directly import the next-with-locales.js file on cdn
// Need to import language file as follows:
// const { ConfigProvider, DatePicker, locales } = window.Next;
// const enUS = locales['en-us'];


class App extends React.Component {
    render() {
        return (
            <ConfigProvider locale={enUS}>
                <DatePicker />
            </ConfigProvider>
        );
    }
}
```

## Moment

`@alifd/next` use [moment](https://github.com/moment/moment) library to implement date-time related component, and it has internationalization-related capabilities. We use it as peerDependencies, so users need to import the cdn file moment-with-locales.js or install locally in your application. For the latter, because of importing the locale file, there is such code in moment: `require('./locale/' + name)`, if it is built with webpack, it will be packaged into all locale files, increasing the size of the file after packing. At present, there are two main solutions of the community:


``` js
const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    // package the specified language file
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn|ja/)
    // only the language files that have been referenced are packaged, and the application needs to be added as follows: `import 'moment/locale/zh-cn';`
    // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
};
```