Next.JS でカスタム レイアウトを作成する方法
Next.js は、高性能な React アプリケーションを構築するための強力なフレームワークです。その機能の 1 つは、ページのカスタム レイアウトを作成する機能です。これにより、アプリケーション全体で簡単に維持および更新できる一貫したデザインを作成できます。
Next.JS でカスタム レイアウト コンポーネントを作成する
Next.js プロジェクトのcomponentsという名前のフォルダーで、 Layout.jsxを作成し、次のコードを追加してレイアウト コンポーネントを作成します。
import Head from 'next/head'
import Header from './Header.jsx'
import Footer from './Footer.jsx'
const Layout = (children) => (
<div>
<Head>
<title>My App</title>
<link rel="stylesheet" href="/static/css/style.css" />
</Head>
<Header />
{children}
<Footer />
</div>
)
export default Layout
このコンポーネントは、Header コンポーネントと Footer コンポーネントをインポートし、子を props として受け入れます。ヘッダー コンポーネントとフッター コンポーネントの間に子をレンダリングします。このレイアウトでページを折り返すと、ヘッダーとフッターが上下に表示されます。
レイアウト コンポーネントの使用
レイアウト コンポーネントを使用するには、ページ コンポーネントにインポートして、以下のように使用します。
import Layout from '../components/Layout'
const Page = () => (
<Layout>
<h1>Home</h1>
</Layout>
)
export default Page
このページにレイアウトが適用されます。レイアウトを適用するすべてのページにこのプロセスを繰り返すことができます。
アプリケーション内のすべてのページで一度にレイアウトを使用するには、レイアウト コンポーネントを/page/_app.jsファイルにインポートし、次のように使用します。
import Layout from "../components/layout";
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
これまでに示した例では、Next.js の 12 ページ フォルダーを使用しています。Next.js 13 では、app フォルダーにレイアウトを作成します (執筆時点ではベータ版です)。
アプリ フォルダーにカスタム レイアウトを作成する
Next.js 13 の app フォルダーでは、そのベースにルート レイアウトを作成する必要があります。これは、Next.js がアプリケーションのすべてのページに適用するレイアウトです。
デモを行うために、 layout.jsxという名前のファイルを作成し、次のコードを追加します。
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
ルート レイアウト コンポーネントは、子を受け入れてレンダリングします。以下は、ルート レイアウトについて知っておくべきことの一部です。
- アプリ フォルダーに含める必要があります。
- Next.js 12 のページ フォルダー内の_app.jsと_document.jsを置き換えます。
- HTML と body タグを明示的に含める必要があります。
- デフォルトではサーバー コンポーネントです。
前述のように、ルート レイアウトはすべてのページに適用されます。では、ルート セグメントごとにカスタム レイアウトを作成するにはどうすればよいでしょうか。
アプリ フォルダーでは、ルート セグメントごとにフォルダーを作成してルートを定義できます。たとえば、articlesというフォルダーを作成すると、URL パスapp/articlesにマップされます。さらにルート セグメントを追加するには、メイン ルート フォルダー内にサブフォルダーを作成します。たとえば、articlesフォルダー内にtrendingというフォルダーを追加すると、URL パスapp/articles/trendingにマップされます。
layout.jsxコンポーネントをルート フォルダーに追加すると、そのルート セグメントとそのサブフォルダー内のすべてのページに適用されます。たとえば、articlesフォルダーにレイアウト コンポーネントを追加すると、articles ルートのすべてのページ ( trendingサブフォルダー内のページを含む) に適用されます。トレンドフォルダにレイアウト コンポーネントも追加すると、記事フォルダのレイアウトがその中にネストされます。
レイアウトを使用する利点
Next.js を使用すると、さまざまなページで再利用できるレイアウト コンポーネントを作成できます。これにより、複数のページでコードを複製することなく、Web サイト全体で一貫した外観を実現できます。さらに、レイアウトを使用すると、各ページを変更する必要がないため、変更をすばやく実装できます。
コメントを残す