nuxtでのリダイレクト設定について

nuxtでリダイレクトを実装する際の選択肢についてまとめます。
nuxt generateとしたとき、挙動が変わりそうです。ぜんぜんリダイレクトが効かなくて疲弊しました。

redirect-module

nuxtのライブラリ。
リダイレクト処理を書くのがかなり楽になる上に、カスタマイズもしやすい。
https://github.com/nuxt-community/redirect-module#gotchas
gotchasにある通り、nuxt generateでは使えない。

middlewareで実装する

動きとしてはredirect-moduleに近い。
middlewareなので、ページごとに呼ばれる。
redirect.jsを作成し、そこに処理を書き、middlewareで呼び出す。

src/middleware/redirect.js

export default function ({ route, redirect }) {
  if (route.path.slice(-1) !== '/') {
    const search = route.fullPath.match(/\?.*$/)
    // クエリパラメータがあるとき、消さないようにリダイレクトさせる
    if (search) {
      const redirectUrl = route.path + '/' + search[0]
      return redirect(301, redirectUrl)
    } else {
      const redirectUrl = route.path + '/'
      return redirect(301, redirectUrl)
    }
  }
}

src/nuxt.config.js

router: {
    middleware: 'redirect'
}

nuxt generateした際、middlewareは読まれているが上記コードだと動かない。
client側の動きではないため、windowなどの変数が読めていない。
ただredirectするだけであればよいが、色々条件をつけるのであれば動かないこともある。

trailingSlash設定

カスタマイズは不可能だが、スラッシュあり・なしのリダイレクト設定だけならこれで完結する。
ただし、スラッシュありで設定した場合、スラッシュなしでのアクセスがエラーになるので、避けるためには他のリダイレクト設定と合わせて使う必要がある。

src/nuxt.config.js

router: {
    trailingSlash: 'true'
}

htaccess

apacheを使っている場合、.htaccessの設置でリダイレクト設定ができる。
/src/static/.htaccessに設置する。

plugin

pluginにリダイレクト処理を書くことも可能。
pluginであれば、clientに来てからの処理になるのでprocess.clientでチェックすればwindowあたりも使える。

例はIEのときリダイレクトさせる処理。

src/plugins/redirect.js

export default ({ route, redirect }) => {
  if (process.client) {
    const ieAvailableRouteNames = [
      'redirect-message'
    ]
    window.onNuxtReady(() => {
      if ((navigator.userAgent.match(/MSIE/) || !!navigator.userAgent.match(/Trident.*rv:11\./)) && !ieAvailableRouteNames.includes(route.name)) {
        redirect('/redirect-message/')
      }
    })
  }
}

nuxt generateで使う場合、ssrはfalseに設定する。

src/nuxt.config.js

plugins: [
  { src: '~plugins/ie-redirect', ssr: false }
]

一瞬リダイレクト前の画面が映るが、一応これでgenerateしても動作する。