Next.js で Web サイトに見た目の統一感を持たせるには、Layout コンポーネントを作成して、全てのページのベースレイアウトとして使用するようにします。
Next.js の仕組みというより、React コンポーネントを作成するときの慣例のようなもので、コンポーネントに Layout という名前を付けるのも多くの人がその名前を使っているだけです。
Layout コンポーネントを定義する
Layout コンポーネントを定義するために、次のようなファイルをプロジェクト内に作成します。
{children} の部分には、Layout 要素以下に配置した子要素が展開されることになります。
import { ReactNode } from 'react'
type Props = {
children: ReactNode;
}
export function Layout({ children, ...props }: Props) {
return <div {...props}>{children}</div>
}この Layout コンポーネントを使用するには、各ページのコンポーネント実装において、ルート要素として配置します。
import Head from 'next/head'
import Link from 'next/link'
import { Layout } from '../components/Layout'
export default () => (
<Layout>
<Head>
<title>About me</title>
</Head>
<h1>About me</h1>
<Link href="/">
<a>Back to home</a>
</Link>
</Layout>
)Layout コンポーネントに CSS を適用する
styled-jsx で直接スタイルを埋め込む方法
styled-jsx の仕組み を使って、コンポーネントの定義内に直接 CSS を埋め込んでしまう方法です。
import { ReactNode } from 'react'
type Props = {
children: ReactNode;
}
export function Layout({ children, ...props }: Props) {
return <>
<style jsx>{`
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
background: #eee;
}
`}</style>
<div className="container" {...props}>
{children}
</div>
</>
}CSS Modules の仕組みで別ファイルにスタイル定義する方法
CSS Modules の仕組み で、Layout コンポーネント用の CSS ファイルを作成してインポートする方法です。
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
background: #eee;
}import { ReactNode } from 'react'
import styles from './Layout.module.css'
type Props = {
children: ReactNode;
}
export function Layout({ children, ...props }: Props) {
return (
<div className={styles.container} {...props}>
{children}
</div>
)
}グローバルな CSS でスタイル定義する方法
サイト全体に CSS ファイルを適用して、その中で定義した CSS クラスを Layout コンポーネント内で参照するという方法もあります。