Next.js 新バージョンの変更点まとめ
本当は書かないほうが冗長性を排除でき、すっきりとした文章になるにもかかわらずそんな思いとは裏腹に書かれた導入
オシャンでデザインセンスのあるサイトを作りたいと、ふと思いNext.jsとTailwind CSSの組み合わせを勉強しているタケトロの中の人です。
過去の情報をもとにコーディングしていると、「ﾌﾞｧｴ！ｺﾉ書き方できないの！ﾏﾁﾞ無理！」という事象が多々発生しています。
皆さんにはそんな辛い思いをして欲しくないと思い、この記事を執筆しています。
どうぞご覧ください！
1. fetchのネイティブサポート
変更点
Next.js 15以降では、fetchがネイティブでサポートされるようになりました。これにより、Node.js環境でもブラウザと同じようにfetchを使用できます。
過去のバージョン
過去のバージョンでは、node-fetchなどの外部パッケージをインポートして使用する必要がありました。
修正前（旧バージョン）
import fetch from 'node-fetch';
export async function getData() {
const response = await fetch('https://api.example.com');
const data = await response.json();
return data;
}修正後（新バージョン）
export async function getData() {
const response = await fetch('https://api.example.com');
const data = await response.json();
return data;
}ポイント
node-fetchのインストールが不要になり、コードが簡潔になります。
fetchは、ブラウザとNode.js環境の両方で動作します。
2. Linkコンポーネントの使用方法変更
変更点
新しいバージョンでは、Linkコンポーネントの内部に<a>タグを使う必要がなくなりました。Linkに直接classNameなどの属性を付与できます。
過去のバージョン
過去のバージョンでは、Linkコンポーネントの中に<a>タグを入れて、href属性を指定する必要がありました。
修正前（旧バージョン）
import Link from 'next/link';
<Link href="/about">
<a className="text-blue-500">About</a>
</Link>修正後（新バージョン）
import Link from 'next/link';
<Link href="/about" className="text-blue-500">
About
</Link>ポイント
<a>タグが不要になり、コードがシンプルになります。
classNameなどの属性をLinkに直接付与可能。
3. App Routerの導入
変更点
Next.js 13以降で導入されたApp Routerが、今後の標準ルーティング方法として推奨されています。従来のpagesディレクトリを使用したルーティングは非推奨になりつつあります。
過去のバージョン
pagesディレクトリにファイルを配置することで、自動的にルーティングが設定されていました。
修正前（旧バージョン）
/pages
└── index.js
└── about.js修正後（新バージョン）
/app
└── page.js
└── about
└── page.jsポイント
App Routerは、より柔軟なルーティングが可能です。
LayoutコンポーネントやServer Componentsが活用できます。
4. 新しい画像コンポーネント（next/image）
変更点
Next.jsの新しいバージョンでは、画像コンポーネントnext/imageが最適化されています。
過去のバージョン
以前はnext/imageを使う際に、画像サイズを明示的に指定する必要がありました。
修正前（旧バージョン）
import Image from 'next/image';
<Image
src="/example.jpg"
width={500}
height={300}
alt="Example"
/>修正後（新バージョン）
import Image from 'next/image';
<Image
src="/example.jpg"
fill
alt="Example"
/>ポイント
fillプロパティで、画像が親要素に対して自動的にサイズ調整されます。
画像のパフォーマンス最適化が強化されています。
5. まとめ
Next.jsの新しいバージョンでは、開発体験が向上し、コードの簡潔化やパフォーマンスの最適化が進んでいます。しかし、過去のバージョンからアップグレードする際には、いくつかの互換性の問題が発生することがあります。新しい機能を活用し、最新のベストプラクティスに従うことで、より効率的な開発が可能になります！
タケトロの一言
「バージョンアップは、最初は戸惑うことも多いけど、慣れてくると開発がもっと楽しくなるトロ！」