Nuxt.jsでURL末尾にスラッシュ(trailing slash)を付ける方法

トレイリングスラッシュ（trailing slash）とは？

トレイリングスラッシュについてご存知でしょうか？URL末尾に付く/ (スラッシュ)のことです。このURL末尾のスラッシュは有っても無くても何の問題もありません。

例えば、/postのような末尾スラッシュなしの場合はpostファイルをリクエストしたものとして扱われるのですが、postファイルが存在しない場合（＝実際はサブディレクトリの場合）自動的にスラッシュが付与されたURLへリダイレクトされます。そのためページアクセスの点で言えばスラッシュありなしどちらでも問題はなく、また通常特に気にする必要はないです。

トレイリングスラッシュの混在はよくない

前述の通り、末尾スラッシュの有無で挙動に問題が発生するわけではないですが、スラッシュの有無が混在したURLがあるのはSEO的によくありません。リダイレクトされる分の時間もかかります（微々たるものですが）

アプリケーションとしてはトレイリングスラッシュ有りか無しどちらにするにしても、どちらかに統一させるべきです。

Nuxt.jsでトレイリングスラッシュを付与する

Nuxt.jsでトレイリングスラッシュを付与する場合は独自に処理を書いて実現することも可能ですが、Nuxt 2.10.1からトレイリングスラッシュを強制的に付けることができる設定が追加されました。

nuxt.config.js

export default {
  // 省略
  router: {
    trailingSlash: true
  }
}

この設定を有効にすることでURL末尾に強制的にスラッシュが付与されます。

ただし、上記のNuxt公式ページの注意事項にもありますがこのオプションを有効にすると、トレイリングスラッシュが付いていないURLについては無効となってしまいます。

つまりexample.com/abc/が有効となり、example.com/abcは機能しなくなります。nuxt-linkで名前付きルートを使っている場合は問題ありませんが、直接パスを指定かつ末尾にスラッシュを付けていなかった場合はそれらのリンクが機能しなくなる（404エラー）ので注意が必要です。

また、トレイリングスラッシュ付きのURLへリダイレクトもされないので上記のようなコードがある場合はすべて修正が必要となります。

リダイレクト処理を追加する

何かのタイミングでトレイリングスラッシュ無しのURLにアクセスされた時に404エラーとなってしまうのはよろしくないので、トレイリングスラッシュ有りのURLへリダイレクトさせる処理を追加します。

全てのルートに対してトレイリングスラッシュ有無の判定を行う必要があるので、そういう時はNuxtのミドルウェアを使って実装すると便利です。

Nuxt ミドルウェア

作成したミドルウェアは下記で定義できます。

nuxt.config.js
マッチしたレイアウト
マッチしたページ

レイアウト・ページに定義することでそれらのルートにマッチした時のみミドルウェアが実行されます。今回は全ルートに対して処理を行いたいのでnuxt.config.jsへ定義します。

ミドルウェアはmiddlewareディレクトリ配下へ作成します。処理自体は単純で、コンテキストとしてrouteを受け取れるので遷移先のパスを判定して、末尾にスラッシュがなければスラッシュを付与してリダイレクトさせています。

redirect.js

export default function({ route, redirect }) {
  if (route.path.slice(-1) !== "/") {
    redirect(301, route.path + "/");
  }
}

あとはnuxt.config.jsで上記のミドルウェアを定義してあげればOKです。

nuxt.config.js

export default {
  // 省略
  router: {
    trailingSlash: true,
    middleware: "redirect"
  }
}

おわりに

これでトレイリングスラッシュ付きのみの一貫したURLへ統一することができました。trailingSlashオプションを有効にするだけで簡単に実現できますが、適切なリダイレクトや既存ルートのテストなどちゃんと行う必要があることは注意してください。