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 とビルドスクリプトは以下の通りだった。

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

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

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

i18n対応後

Next.jsでi18n対応すると、next export が行えなくなるため、まず package.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 は以下のように修正する必要がある。

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

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

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