はじめに
こんにちは、がんがんです。
2024 年 8 月 22 日にNuxt v3.13がリリースされました(11 月 17 日現在の最新バージョンは3.14.159)。
Nuxt v3.13 では Route Groups という注目機能が追加されました。
本記事では実際に Route Groups を触ってみたいと思います。
Route Groups とは
公式ブログの説明文を引用します。
We now support naming directories with parentheses/brackets to organise your routes without affecting the path.
-| pages/ ---| index.vue ---| (marketing)/ -----| about.vue -----| contact.vueThis will produce
/,/aboutand/contactpages in your app. The marketing group is ignored for purposes of your URL structure.
従来の Nuxt では pages/ 直下のディレクトリはそのままパスとして反映されていました。
上記の場合 {domain}/marketing/contact という形になっていました。
しかし本機能が追加されたことで pages/ 直下のディレクトリ整理が容易に行えるようになりました。
人によってはこの機能に見覚えがあると思います。
タイトルで Nuxt にも Route Groups が追加 と書いている通り、Route Groups 機能は Next.js に存在する機能です。
この機能は便利だったので Nuxt にも追加されて嬉しいです。
Nuxt でも Route Groups が追加されたことで以下のようなディレクトリ構成も可能になります。
-| pages/
---| index.vue
---| (auth)/
-----| login.vue
---| (feature1)/
-----| user.vue
-----| admin.vue
---| (feature2)/
-----| user.vue
-----| admin.vue
---| (marketing)/
-----| contact.vue
-----| landing.vue
-| app.vue
実験してみる
説明よりも試してみた方が早いです。以下の環境で実験してみます。
- Nuxt : v3.14.159
- Nuxt UI : v2.19.2
とりあえず試してみたい人向けの StackBlitz
実際に触った方が分かりやすいということで Nuxt UI ベースの StackBlitz を置いています。
リポジトリはこちらです。
ディレクトリ構成
よくあるユースケースを想定し以下のようなディレクトリ構成を組んでみました。
-| pages/
---| index.vue
---| (auth)/
-----| login.vue
---| user/
-----| [id].vue
-| app.vue
/auth/login にアクセスしてみる
まずはディレクトリ通りに/auth/loginにアクセスしてみます。すると、404 エラーが返ってきます。
/login にアクセスしてみる
続いて/loginにアクセスしてみます。Route Groups 機能がきちんと作用しているためログインページが表示されました。
もちろん動的ルーティングも使えます
Nuxt には以前から動的ルーティングの機能がありました。Route Groups 機能追加後も従来通り利用することが可能です。
おわりに
今回は Nuxt v3.13 で追加された Route Groups 機能を試してみました。
11 月現在のバージョンは V3.14.159 であり日々進化が止まりません。リリースブログで気になったものは是非とも触ってみてください。
Discussion