vue.js

Nuxt.jsでURLの最後に”/”スラッシュを自動で付ける方法解説【トレイリングスラッシュを付ける】

LinuxをPCで操作している

こんにちは、フルスタックエンジニアのryuです。

今回の記事では、Nuxt.jsでURLの最後に”/”スラッシュを自動で付ける方法を解説します。URLの末尾のスラッシュをトレイリングスラッシュと言います。トレイリングスラッシュを自動で付与するには、Nuxt.jsの設定を変更するだけです。

Nuxt.jsでURLの最後に”/”スラッシュを自動で付ける方法解説

どうやって文末に”/”スラッシュを付けるの?

今回の記事では、Nuxt.jsでURLの最後に”/”スラッシュを自動で付ける方法解説します。

トレイリングスラッシュとは、URLの文末に付くスラッシュのことです。

トレイリングスラッシュ

Nuxt.jsでトレイリングスラッシュを付ける方法は以下の通りです

  • トレイリングスラッシュを有効にする
  • スラッシュ無しでアクセスした場合リダイレクトする

では、詳しく解説します。

Nuxt.jsの設定ファイルで有効にする

まず、Nuxt.jsの設定ファイルでトレイリングスラッシュを有効にします。Nuxt.jsの設定ファイルは、nuxt.config.jsです。以下のように設定を加えましょう。

export default {
 ・・・

  router: {
    trailingSlash: true
  }
}

この設定値は、v2.10から利用できるようになりました。”true”もしくは”false”のBoolean型で設定します。

trueに設定した場合、URLの末尾にスラッシュが追加されるようになります。

詳しくは、こちらのドキュメントを参考にしてください。

router プロパティ – NuxtJS

スラッシュ無しにアクセスした場合は、ページが表示されなくなるので、リダイレクトの設定も忘れずに行いましょう。

スラッシュなしでアクセスされた場合にリダイレクトを設定する

先ほど、トレイリングスラッシュを有効にしました。有効にすると、URLの文末に”/”スラッシュが付きます。しかし、スラッシュが無いURLにアクセスすると、エラーが表示されます。

スラッシュが無しのURLにアクセスされた場合、スラッシュ有りのURLにリダイレクトする設定を追加しましょう。

リダイレクトモジュールのインストール

まず、リダイレクトするためのモジュールをインストールします。

npm install @nuxtjs/redirect-module

モジュールを読み込む

モジュールのインストールが完了したら、nuxt.config.jsファイルにモジュールを読み込みます。

export default {
 ・・・ 
 modules: [
    '@nuxtjs/redirect-module'
]
}

リダイレクトの条件を指定する

先ほどと同じ設定ファイルにリダイレクトの条件を指定します。正規表現を用いて、ステータスコード301でリダイレクトを実施します。

export default {
 ・・・   
redirect: [
    {
      from: '^(\\/[^\\?]*[^\\/])(\\?.*)?$',
      to: '$1/$2',
      statusCode: 301
    }
  ],
}

これで完了です。“https://~.com”にアクセスした場合、”https://~.com/”にリダイレクトされます。

リダイレクトモジュールの詳しい使い方は、こちらを参考にしてください。

nuxt-community/redirect-module: No more cumbersome redirects! (github.com)

Nuxt.jsでURLの最後に”/”スラッシュを自動で付ける方法まとめ

最後にまとめです。今回の記事では、Nuxt.jsでURLの最後に”/”スラッシュを自動で付ける方法を解説しました。まとめると以下のようになります。

  • トレイリングスラッシュを有効にする
  • スラッシュ無しでアクセスした場合リダイレクトする

Nuxt.jsでSEO対策などを実施するときに使う技術なので覚えておきましょう。

当ブログでは、Nuxt.jsやVue.jsに関する記事を発信しています。興味ある方は是非ご覧ください。

vue.js | インフラエンジニアになりたくて。 (engineer-ninaritai.com)

さらに詳しく勉強したい方はこちらの参考書がオススメです。

About me
大手メーカのIT部門→上場ベンチャーでフルスタックエンジニアやってます。エンジニア歴は8年目。 サーバ、ネットワーク、セキュリティ、クラウドについて投稿します。 AI、ARも勉強中です! youtubeでも技術ネタを発信していきます。↓のアイコンよりご覧ください!

UdemyでIT講座をチェック!

  • セールだと1500円前後!
  • 無料サンプル講義動画・無料講義動画あり!
  • 気に入らなければ30日間返金保証!