<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<p data-line="2" class="code-line">こんにちは、<a href="https://x.com/gangan_nikki" target="_blank" rel="nofollow noopener noreferrer">がんがん</a>です。<br>
2024 年 8 月 22 日に<strong>Nuxt v3.13</strong>がリリースされました(11 月 17 日現在の最新バージョンは<strong>3.14.159</strong>)。</p>
<p data-line="5" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__34bc80baf98cc" src="https://embed.zenn.studio/card#zenn-embedded__34bc80baf98cc" data-content="https%3A%2F%2Fnuxt.com%2Fblog%2Fv3-13" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://nuxt.com/blog/v3-13" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://nuxt.com/blog/v3-13</a></p>
<p data-line="7" class="code-line">Nuxt v3.13 では <strong>Route Groups</strong> という注目機能が追加されました。<br>
本記事では実際に Route Groups を触ってみたいと思います。</p>
<h2 id="route-groups-%E3%81%A8%E3%81%AF" data-line="10" class="code-line">
<a class="header-anchor-link" href="#route-groups-%E3%81%A8%E3%81%AF" aria-hidden="true"></a> Route Groups とは</h2>
<p data-line="12" class="code-line">公式ブログの説明文を引用します。</p>
<blockquote data-line="14" class="code-line">
<p data-line="14" class="code-line">We now support naming directories with parentheses/brackets to organise your routes without affecting the path.</p>
<div class="code-block-container"><pre><code class="code-line" data-line="16">-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue
</code></pre></div>
<p data-line="24" class="code-line">This will produce <code>/</code>, <code>/about</code> and <code>/contact</code> pages in your app. The marketing group is ignored for purposes of your URL structure.</p>
</blockquote>
<p data-line="26" class="code-line">従来の Nuxt では <code>pages/</code> 直下のディレクトリはそのままパスとして反映されていました。<br>
上記の場合 <code>{domain}/marketing/contact</code> という形になっていました。</p>
<p data-line="29" class="code-line">しかし本機能が追加されたことで <code>pages/</code> 直下のディレクトリ整理が容易に行えるようになりました。</p>
<p data-line="31" class="code-line"><br></p>
<p data-line="33" class="code-line">人によってはこの機能に見覚えがあると思います。<br>
タイトルで <strong>Nuxt にも Route Groups が追加</strong> と書いている通り、Route Groups 機能は Next.js に存在する機能です。<br>
この機能は便利だったので Nuxt にも追加されて嬉しいです。</p>
<p data-line="37" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__37e7b280f0b4e" src="https://embed.zenn.studio/card#zenn-embedded__37e7b280f0b4e" data-content="https%3A%2F%2Fnextjs.org%2Fdocs%2Fapp%2Fbuilding-your-application%2Frouting%2Froute-groups" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://nextjs.org/docs/app/building-your-application/routing/route-groups" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://nextjs.org/docs/app/building-your-application/routing/route-groups</a></p>
<p data-line="39" class="code-line"><br></p>
<p data-line="41" class="code-line">Nuxt でも Route Groups が追加されたことで以下のようなディレクトリ構成も可能になります。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="43">-| pages/
---| index.vue
---| (auth)/
-----| login.vue
---| (feature1)/
-----| user.vue
-----| admin.vue
---| (feature2)/
-----| user.vue
-----| admin.vue
---| (marketing)/
-----| contact.vue
-----| landing.vue
-| app.vue
</code></pre></div><h2 id="%E5%AE%9F%E9%A8%93%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" data-line="60" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E9%A8%93%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> 実験してみる</h2>
<p data-line="62" class="code-line">説明よりも試してみた方が早いです。以下の環境で実験してみます。</p>
<ul data-line="64" class="code-line">
<li data-line="64" class="code-line"><strong>Nuxt : v3.14.159</strong></li>
<li data-line="65" class="code-line"><strong>Nuxt UI : v2.19.2</strong></li>
</ul>
<h3 id="%E3%81%A8%E3%82%8A%E3%81%82%E3%81%88%E3%81%9A%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F%E3%81%84%E4%BA%BA%E5%90%91%E3%81%91%E3%81%AE-stackblitz" data-line="67" class="code-line">
<a class="header-anchor-link" href="#%E3%81%A8%E3%82%8A%E3%81%82%E3%81%88%E3%81%9A%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F%E3%81%84%E4%BA%BA%E5%90%91%E3%81%91%E3%81%AE-stackblitz" aria-hidden="true"></a> とりあえず試してみたい人向けの StackBlitz</h3>
<p data-line="69" class="code-line">実際に触った方が分かりやすいということで Nuxt UI ベースの StackBlitz を置いています。</p>
<span class="embed-block embed-stackblitz"><iframe src="https://stackblitz.com/edit/gangan-nuxt-route-groups-exp?embed=1&amp;file=README.md&amp;view=preview" scrolling="no" frameborder="no" loading="lazy"></iframe></span>
<p data-line="73" class="code-line">リポジトリはこちらです。</p>
<p data-line="75" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a3033f40b019b" src="https://embed.zenn.studio/card#zenn-embedded__a3033f40b019b" data-content="https%3A%2F%2Fgithub.com%2FshinGangan%2Fexp-nuxt-route-groups" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/shinGangan/exp-nuxt-route-groups" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/shinGangan/exp-nuxt-route-groups</a></p>
<h3 id="%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E6%A7%8B%E6%88%90" data-line="77" class="code-line">
<a class="header-anchor-link" href="#%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E6%A7%8B%E6%88%90" aria-hidden="true"></a> ディレクトリ構成</h3>
<p data-line="79" class="code-line">よくあるユースケースを想定し以下のようなディレクトリ構成を組んでみました。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="81">-| pages/
---| index.vue
---| (auth)/
-----| login.vue
---| user/
-----| [id].vue
-| app.vue
</code></pre></div><h3 id="%2Fauth%2Flogin-%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" data-line="91" class="code-line">
<a class="header-anchor-link" href="#%2Fauth%2Flogin-%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> /auth/login にアクセスしてみる</h3>
<p data-line="93" class="code-line">まずはディレクトリ通りに<code>/auth/login</code>にアクセスしてみます。すると、404 エラーが返ってきます。</p>
<p data-line="95" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--IkQHuaYp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/385abd770f506aeee0de07f9.png%3Fsha%3D84ffe10a13524c803ed2f26a73d8c9a7dbbdcdae" loading="lazy" class="md-img"></p>
<h3 id="%2Flogin-%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" data-line="97" class="code-line">
<a class="header-anchor-link" href="#%2Flogin-%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> /login にアクセスしてみる</h3>
<p data-line="99" class="code-line">続いて<code>/login</code>にアクセスしてみます。Route Groups 機能がきちんと作用しているためログインページが表示されました。</p>
<p data-line="101" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--Ey4OIpma--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/17d0416c5ef32437a0f9657e.png%3Fsha%3De332462fed08bc2b15e775847de3fee8dc0b974c" alt="想定通りログインページが表示されていますね" loading="lazy" class="md-img"></p>
<h3 id="%E3%82%82%E3%81%A1%E3%82%8D%E3%82%93%E5%8B%95%E7%9A%84%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%82%E4%BD%BF%E3%81%88%E3%81%BE%E3%81%99" data-line="103" class="code-line">
<a class="header-anchor-link" href="#%E3%82%82%E3%81%A1%E3%82%8D%E3%82%93%E5%8B%95%E7%9A%84%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%82%E4%BD%BF%E3%81%88%E3%81%BE%E3%81%99" aria-hidden="true"></a> もちろん動的ルーティングも使えます</h3>
<p data-line="105" class="code-line">Nuxt には以前から動的ルーティングの機能がありました。Route Groups 機能追加後も従来通り利用することが可能です。</p>
<p data-line="107" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a620906588aff" src="https://embed.zenn.studio/card#zenn-embedded__a620906588aff" data-content="https%3A%2F%2Fnuxt.com%2Fdocs%2Fguide%2Fdirectory-structure%2Fpages%23dynamic-routes" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://nuxt.com/docs/guide/directory-structure/pages#dynamic-routes" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://nuxt.com/docs/guide/directory-structure/pages#dynamic-routes</a></p>
<p data-line="109" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--HkBNcnpM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/69c8a03f21f97738047022b4.png%3Fsha%3D47b1cc0744858789590787dd082a5491daf3bf81" alt="動的ルーティングも従来通り機能します" loading="lazy" class="md-img"></p>
<h2 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" data-line="111" class="code-line">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h2>
<p data-line="113" class="code-line">今回は Nuxt v3.13 で追加された <strong>Route Groups</strong> 機能を試してみました。<br>
11 月現在のバージョンは V3.14.159 であり日々進化が止まりません。リリースブログで気になったものは是非とも触ってみてください。</p>


【Nuxt】 Nuxt にも Route Groups が追加されました

とりあえず試してみたい人向けの StackBlitz

もちろん動的ルーティングも使えます

Discussion