【04】Next.js app routerのチュートリアルやってみる(レイアウトとページの作成)

はじめに

Next.js app routerのチュートリアルの第４章のアウトプットします。

前の記事

【01】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/af58da3d20cbc790e767

【02】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/edf450b3ee135e83d1e8

【03】Next.js app routerのチュートリアルやってみる
https://qiita.com/naoyuki2/items/612221eac233aa9cbb74

第４章 レイアウトとページの作成

この章では下記を学習しました。

• ファイルシステムルーティングを使用する。
• 新しいルートセグメントを作成するときのフォルダーとファイルの役割を理解する。
• 複数のページで共有されるレイアウトを作成する。
• 部分レンダリングとは何かを理解する。

ファイルシステムルーティング

Next.jsではファイルシステムルーティングというシステムを採用しています。

下の画像のようにフォルダ名がそのままURLになっています。

ですが、ただフォルダを作ればルートができるというわけでもありません。

下の画像のようにフォルダの中にpage.tsxという名前のファイルを作成することでルートが作成されます。

ちなみにapp/page.tsxだけは、フォルダ名ではなく、/だけでアクセスできます。

layout.tsx

layout.tsxは第2章で勉強したように、アプリケーション全体に共有されるものです。

ですが、下の画像のようにdashboardフォルダ直下に、layout.tsxを追加すると、

• /dashboard/page.tsx
• /dashboard/customers/page.tsx
• /dashboard/invoices/page.tsx

の3つのファイルすべてに共有されます。

逆に言えば、dashboardフォルダ外のpage.tsxには共有されません。

/app/dashboard/layout.tsx

import SideNav from '@/app/ui/dashboard/sidenav'

export default function Layout({ children }: { children: React.ReactNode }) {
    return (
        <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
            <div className="w-full flex-none md:w-64">
                <SideNav />
            </div>
            <div className="flex-grow p-6 md:overflow-y-auto md:p-12">
                {children}
            </div>
        </div>
    )
}

• /dashboard
• /dashboard/customers
• /dashboard/invoices

この3つのページでは、サイドバーを共通して表示したいので、layout.tsxに<SideNav />という記述をしています。

また、{children}の中にそれぞれのページのレイアウトが入るといった感じです。

分かりづらいですが、下の画像のように、ページは違えど、サイドバーは共通して表示されていることが分かりますね。

そして、layout.tsxを使う利点はもう一つあります。

それは、page.tsxが更新されても、再レンダリングが起こらないことです。

これを部分レンダリングといいます。

下の画像のように、dashboard/settingから/dashboard/analyticsに移動しても、dashboard/layout.jsは共通であるため、layout.jsに対しては再レンダリングが起こりません。

おわりに

なかなか面白くなってきましたね。

次の記事