🍆

【Next.js / App Router】ログインページだけヘッダーやフッターを表示しないを実現する【Route Groups】

2023/09/20に公開

タイトルの通り、ログインページだけヘッダーやフッターを表示したくないケースがあるかと思います。一見、面倒な記述が必要のように感じますが、Next.jsの「Route Groups」という機能を使えばとても簡単に実現できる要件です。

イメージ

例えば、Dribbbleのようなページ。

▼コンテンツページ

▼ログインページ

コンテンツページではヘッダーが表示されていますが、ログインページではヘッダーは表示されていません。登録やログインだけに集中させるよくあるUIですね。

これを Next.js の App Router の「Route Groups」を利用すれば簡単に実現できます。

詳しくは上記の公式ドキュメントをご覧頂きたいのですが、 ルーティングには影響を与えず にグループ毎に layout.tsx を適用することができます。

言葉で説明するのは難しいので例を見てみましょう。

📂app/
├─ 📂(main)/
│  ├─ layout.tsx
│  ├─ 📂posts/
│  │  ├─ page.tsx
├─📂 (auth)/
│  ├─ layout.tsx
│  ├─ 📂login/
│  │  ├─ page.tsx
├─ layout.tsx

上記の例では、 (main) と (auth) というグループを作りました。
※() の表記はグループとしてNext.jsに認識してもらうために必要な記述です。記事用の例としての装飾ではありません。詳しくはこちら

app/(main)/posts/page.tsx はブラウザ上では /posts/ を叩けば表示されます。
app/(auth)/login/page.tsx はブラウザ上では /login/ を叩けば表示されます。

(main) や (auth) がルーティングに影響を与えないとはこのことです。

※1～3の順にネストされていく。

※1～3の順にネストされていく。

コンテンツ系のページだけにヘッダーやフッターを表示したいのであれば、 app/(main)/layout.tsx にヘッダーやフッターを記述すればOKです。

Route Groupsを正しく使えば、ページ毎に全く違うレイアウトのサイトも作れるようになるかと思います。何気にけっこう使う機能だと思いますので、ぜひ覚えておきたいですね！