はじめに
今回は、Next.jsのバージョン14にアップデートされた際、layout.tsxの使い方について新たに学んだことを解説します。初歩的な使い方から、応用的な活用法までを具体例を交えて説明していきます。
目次
- layout.tsxって？
- 応用したlayout.tsxの活用法
layout.tsxって？
Next.jsで新しいプロジェクトを作成すると、src/appディレクトリ内にlayout.tsxというファイルが生成されます。このファイルは、同じ階層以下の全てのページに適用されるレイアウトを定義するためのファイルです。
例えば、全ページに共通するヘッダーを表示したい場合、以下のようにlayout.tsx内にHeaderコンポーネントを記述することで簡単に実現できます。Headerコンポーネントは別階層で作成していますが、今回は省略しています。
import type { Metadata } from "next";
import "./globals.css";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<Header/>
{children}
<ToastContainer />
</body>
</html>
);
}
私はここまでの使い方しか知らず、「単一のlayout.tsxで全ページ共通のレイアウトを定義する」ものだと思っていました。
応用したlayout.tsxの活用法
layout.tsxは単に全ページ共通のレイアウトを設定するだけでなく、特定のグループに限定したレイアウトを適用することも可能です。これにより、異なるページグループごとにレイアウトを分けられます。
例えば、以下のようなケースを考えます。
①ログインページとサインアップページで共通のレイアウトを使用。
②その他のページでは別のレイアウトを使用。
この場合、ログインとサインアップページをグループ化し、それぞれのグループ内に専用のlayout.tsxを作成します。
以下のように作成することによって認証ページはその階層に作成されたlayout.tsxが適用されることになります。
src/
├── app/
│ ├── (auth)/
│ │ ├── layout.tsx
│ │ ├── sign_in/page.tsx
│ │ └── sign_up/page.tsx
│ ├── layout.tsx
│ ├── page.tsx
app内に作成された(auth)ディレクトリについて説明します。
ディレクトリ名を()で囲むと、URLにはそのディレクトリ名が含まれません。
例: localhost:3000/auth/sign_in → localhost:3000/sign_in
特定のページグループ専用のlayout.tsxを定義できます。
つまり、今回のように、layout.tsxをそのグループ内で適用させるために、ディレクトリは作成したいが、URLいには含めたくない場合に()は便利です。
終わりに
今回は、layout.tsxの基本的な使い方から、ページごとにレイアウトを分ける応用例まで解説しました。また、()ディレクトリを活用することで、URL構造を簡潔に保ちながら柔軟なレイアウト管理ができるようになります。
Next.jsにはまだまだ便利な機能が多くあるので、これからも活用例を見つけ次第共有していきたいと思います！
ここまで読んでいただき、ありがとうございました。