Next.jsで<Link>要素へのスタイル適用が変更になった

以前は<Link>コンポーネントで<a>要素を囲んでいましたが、Next.js の最新バージョンでは、サーバーエラーが起こるようになりました。それによりスタイルの適用方法が変更になったので紹介します。

js ファイル

今まではこのように記述していました。

import Link from 'next/link';
import classes from './Header.module.css';

export function Header() {
	return (
		<header className={classes.header}>
			<Link href="/">
				<a className={classes.anchor}>Index</a>
			</Link>
			<Link href="/about">
				<a className={classes.anchor}>Index</a>
			</Link>
		</header>
	);
}

Link コンポーネント内に a タグを用意し、a タグにスタイルを適用していました。
しかし、最新ではこのように Link タグだけでシンプルに書くことができるようになりました。

import Link from 'next/link';
import classes from './Header.module.css';

export function Header() {
	return (
		<header className={classes.header}>
			// Linkタグだけのシンプルば記述
			<Link href="/" className={classes.anchor}>
				Index{' '}
			</Link>
			<Link href="/about" className={classes.anchor}>
				About{' '}
			</Link>
		</header>
	);
}

css ファイル

.header {
	width: 100%;
	height: 100px;
	border-bottom: 1px solid #eaeaea;
	display: flex;
	justify-content: center;
	align-items: center;
}

.anchor {
	display: inline-block;
	padding: 8px 24px;
	font-size: 1.2rem;
}

まとめ

<Link>コンポーネントのみ記載することで、ページの遷移からスタイル適用まで可能になった。