基本コンポーネント
Head
|
1 |
import Head from 'next/head'; |
以下のように使います。タイトルが表示されます。
|
1 2 3 |
<Head> <title>タイトル</title> </Head> |
App Router環境
Headはmetadataに置き換わっています。
Link
ページ遷移を実現できるコンポーネントです。prefetchと呼ばれる仕組みを用いて事前にリンク先のページ情報を取得しておくことによりページ遷移を高速化できるコンポーネントです。
|
1 |
import Link from "next/link"; |
以下のように使います。
|
1 2 3 4 5 |
<Link href="/"> <a className="link"> Home </a> </Link> |
Image
画像の圧縮を最適化してくれるコンポーネントです。表示したいサイズに自動でリサイズした上での配信や遅延読み込みを実現できるためWebページのパフォーマンスが向上します。
|
1 |
import Image from "next/image"; |
以下のように使います。
|
1 2 3 4 5 6 |
<Image src="/image.jpg" width={60} height={60} alt="image" /> |
ちなみに、毎回違う画像を生成するとすぐVercelの枚数の上限に達するので注意すること。（Proでも上限3000枚になっている。）
Next.jsのpublicフォルダにローカル画像はNext.jsが最適化を行ってくれますが、別のCDNも指定は可能です。その場合は、loarderプロパティを使います。以下対応しているCDNごとの埋め込み方法が記載されています。ちなみに、cloudfrontは対応していなさそうなので最適化は行えない。（なので、Vercelをデプロイ先を指定しない限りは特に最適化を行う必要もない。）
https://nextjs.org/docs/app/api-reference/next-config-js/images#example-loader-configuration
→もし、導入しないなら別途lazyloadは検討する必要がある。
キャッシュ
ローカル画像→ハッシュ値が付与されて画像を差し替えた場合でも更新してくれる。
CDNなどのリモート画像→ハッシュ値を計算できないので、cacheの時間を短めに設定することが推奨されているが、基本的に静的コンテンツは長めにした方が良いだろう。
ページ遷移方法
リンク形式でページ遷移をさせたい場合
NextJsのLinkコンポーネントを使う。
ページ遷移を実現できるコンポーネントです。
|
1 |
import Link from "next/link"; |
以下のように使います。
|
1 2 3 4 5 |
<Link href="/"> <a className="link"> Home </a> </Link> |
関数の中からページ遷移をさせたい場合
userRouterを使います。
|
1 2 3 4 5 6 7 |
import { useRouter } from 'next/router'; const router = useRouter(); const kansu = () => { router.push('/遷移先URL'); } |
App Router環境
「next/router」は「next/navigation」に置き換わっています。
pageのテスト
インストール
Next.jsのpageのコンポーネントは普通のReactに比べて少し特殊なので、テストするには「next-page-tester」というパッケージをインストールしておきます。
|
1 |
npm i next-page-tester |
実装
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { getPage, initTestHelpers } from 'next-page-tester' initTestHelpers() describe('テストコード', () => { it('テストケース1', async () => { const { page } = await getPage({ route: '取得したいページのパス', }) render(page) userEvent.click(screen.getByTestId('xxx')) expect(await screen.findByText('yyy')).toBeInTheDocument() } } |
initTestHelpers
ページヘルパーの初期化です。
テストケース
「next-page-tester」を使用する場合は、ページの取得が非同期処理になるので関数をasyncにしておく必要があります。
この記事へのコメントはありません。