# i18n対応
昨日このブログをi18n (internationalization) 対応させた。i18n対応はNext.jsが公式にサポートしており、`next.config.js` に適当な設定を書くだけで済む。これについてはネット上にたくさん情報があるのでこの記事では省略する。この記事ではi18n対応にあたり、sitemap生成で必要になった修正について記録しておく。なお、以下の話はアプリをVercelにデプロイすることを前提としている。執筆時点のNext.jsのバージョンは `12.0.1` である。

# sitemap生成

## i18n対応前
このブログのsitemap生成には以下のライブラリを使用している。

https://www.npmjs.com/package/next-sitemap

このライブラリを使えば、あとは `sitemap.config.js` を定義してビルドスクリプトに少し手を加えればsitemap.xmlの生成を行うことができる。これについてもネット上にたくさん情報がある。i18n対応前のこのブログの `sitemap.config.js` とビルドスクリプトは以下の通りだった。

```javascript:sitemap.config.js
module.exports = {
  siteUrl: 'https://silurus.dev',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  outDir: './out'
};
```

```json:package.json
"scripts": {
  "build": "next build && next export && next-sitemap --config sitemap.config.js",
},
```

上記の設定で、sitemapには [https://silurus.dev/sitemap.xml](https://silurus.dev/sitemap.xml) でアクセスできた。

## i18n対応後
Next.jsでi18n対応すると、`next export` が行えなくなるため、まず `package.json` のビルドスクリプトを以下のように修正する必要がある。

```json:package.json
"scripts": {
  "build": "next build && next-sitemap --config sitemap.config.js",
},
```

すると、芋づる式に `sitemap.config.js` で `outDir: './out'` と書いているところが不整合になる。`out` ディレクトリは `next export` の結果生成されるディレクトリなので、`next build` だけではディレクトリが存在しない。このままだとデプロイしても静的リソースにsitemap.xmlが含まれず、もとのURLではアクセスできなくなる。

というわけで、`sitemap.config.js` は以下のように修正する必要がある。

```javascript:sitemap.config.js
module.exports = {
  siteUrl: 'https://silurus.dev',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  outDir: './public'
};
```

`public` フォルダに置いているものはビルド後 `ベースパス/ファイル名` でアクセスできるので、これで引き続き同一のアドレスでアクセスできるようになる。

このサイトであれば、当初の[https://silurus.dev/sitemap.xml](https://silurus.dev/sitemap.xml) のままアクセスできる。

# i18n support
Yesterday, I added i18n (internationalization) setting to this blog. i18n is officially supported by Next.js, and all you have to do is write the appropriate settings in `next.config.js`. There is a lot of information about this on the internet, so I won't go into it in this article. In this article, I'd like to write about modifications required for sitemap generation to support i18n. The following story assumes that the application is deployed to Vercel. The version of Next.js at the time of writing is `12.0.1`.

# Sitemap generation

## Before i18n support
The following library is used to generate sitemap for this blog.

https://www.npmjs.com/package/next-sitemap

If you use this library, you can generate sitemap.xml by defining `sitemap.config.js` and modifying the build script a little. Before i18n support, this blog's `sitemap.config.js` and build script was as follows.

```javascript:sitemap.config.js
module.exports = {
  siteUrl: 'https://silurus.dev',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  outDir: '. /out'
};
````json:package.json

```json:package.json
"scripts": {
  "build": "next build && next export && next-sitemap --config sitemap.config.js",
},
```

With the above configuration, sitemap could be accessed with [https://silurus.dev/sitemap.xml](https://silurus.dev/sitemap.xml).

## After i18n support
After adding i18n settings in Next.js project, `next export` is not available, so you need to modify the build script of `package.json` as follows.

```json:package.json
"scripts": {
  "build": "next build && next-sitemap --config sitemap.config.js",
},
```

Then, in `sitemap.config.js`, `outDir: '. /out'` is inconsistent. The `out` directory is a directory created as a result of `next export`, so the directory does not exist in `next build` alone. If this is the case, sitemap.xml will not be included in static resources after deployment on Vercel, and it will not be accessible with the original URL.

So, you need to modify `sitemap.config.js` as follows.

```javascript:sitemap.config.js
module.exports = {
  siteUrl: 'https://silurus.dev',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  outDir: '. /public'; }
};
```

If you put it in the `public` folder, you can access it with the `base path/file name` after the build, so you can continue to access it with the same address.

In the case of this site, you can access to sitemap with the original address: [https://silurus.dev/sitemap.xml](https://silurus.dev/sitemap.xml)

Articles

Generating sitemap.xml with i18n support in Next.js