今週やったこと(1/8～1/14)

今週やったこと

・演習問題を解く
・Next.jsのTodoアプリの作成

アプリの作成

今回はトップページからToDoのページへの遷移を作成しました。
ルーティングの設定のしかたについては複数方法あるので軽くメモ
公式で紹介されているの方法は2種類ありました。

①Linkを使用した方法
Linkコンポーネントの場合、aタグを拡張した機能となっていて、href=""で指定する。ルート間のプリフェッチを提供する。
※公式ドキュメントの推奨はLinkコンポーネントのほう

import Link from 'next/link';

export default function Home() {
  return (
    <main>
      <p>遷移先ページ一覧</p>
      <p>
        <Link href='/todo'>Todo</Link>
      </p>
    </main>
  );
}

プリフェッチってなんだ？
→ユーザーがページに訪れる前に事前にバックグラウンドでページを事前取得しておく機能とのこと。
ユーザーにページ遷移のロードとかを待たせないで表示するためのユーザー体験を向上させるための機能と覚えておく。

②フックを使用した方法
router.pushを使用してページ遷移
例

// useRouter
import { useRouter } from 'next/navigation'
 
const router = useRouter()
 
router.push('/dashboard', { scroll: false })

こっちの場合はLinkの時と違いプリフェッチがされないためLinkが推奨となっている。
router.prefetch()が用意されているのでpushで使用する場合はこの関数を使用して別途プリフェッチするコードを書く必要がある。

今回はここまで次回コンポーネントの作成からおこなっていく。