AstroでURLの末尾にはスラッシュありに決めた理由とその方法

公開日：2025.01.20

URL末尾のスラッシュ有無。

どちらかで統一されていることが重要だと思いますが、この度私は「スラッシュあり」で統一することにしました。

本記事ではその理由と、必要な設定方法についてまとめました。

URL末尾のスラッシュをありにした理由

それでは理由をまとめていきます。

公開環境と開発環境を合わせることで、公開したときに意図しないリンクの不具合を防げます。

私はホスティングサービス（＝サーバーのようなもの）にCloudflareを使っており、CloudflareではURLの末尾にスラッシュがありになります。

これは設定でスラッシュなしにもできるのかもしれませんが、私が調べた限りでスラッシュなしにする方法はないようでした。

スラッシュありでも問題ないので、この時点で「スラッシュあり」を基準に進めることとしました。

以下の様なaタグを考えます。

<a href="news">ニュース一覧を見る</a>

この時、相対パスで指示したいときは上記の様に記載しますが、

この様に元のURLのスラッシュ有無によってパスの機能の仕方が変わってきます。

つまり元のURLにスラッシュがないと、相対パスとして機能させれないことになってしまいます。

元のURLの末尾にスラッシュありにすると、絶対パスと相対パスの使い分けは以下のように記述し実現することができます。

<!-- 相対パス -->
<a href="news/">ニュース一覧を見る</a>
<!-- 絶対パス -->
<a href="/news/">ニュース一覧を見る</a>

実際に設定する内容はastro.config.mjsにtrailingSlash: "always"を追加するだけです。

astro.config.mjs

export default defineConfig({
  trailingSlash: "always", // コレ。末尾のスラッシュを追加する
  // その他の設定
  sassOptions: {
    implementation: sass,
  },
});

そして実際にaタグで記載するときも余分なリダイレクトを避ける為に末尾にスラッシュを付けて記載します。

<!-- 相対パス -->
<a href="news/">ニュース一覧を見る</a>
<!-- 絶対パス -->
<a href="/news/">ニュース一覧を見る</a>

Cloudflareでの設定は特に不要です。

これで開発環境と公開環境を同じ条件にすることができます。

本記事ではURLの末尾にスラッシュを付けることを基準とした理由と方法について解説しました。

最も重要なのでは統一されていること、だと思います。

それぞれのプロジェクトで最適な方を選択すればいいと思っています。

もしこの記事が役に立ったと感じていただけた方は、ぜひX（旧Twitter）やブログなどでシェアしていただけると嬉しいです。

最後までお読みいただき、ありがとうございました！