Zenn
Open8

AppRouter入門

にっしーにっしー

AppRouterの本を読んだので実際に使っていく

Linkとは

Linkコンポーネントを使うと、クライアント再度でナビゲーションができる

プリフェッチと、キャッシュする
ユーザーが新しいルートに移動しても、ブラウザはページを再読み込みせず、変更されたルートセグメントのみが再レンダリングされます。

aタグの代わりに使えばok
childrenとしてタイトルなどを渡せば良い

generateStaticParamsとは

generateStaticParams 関数を動的なルートセグメントと組み合わせて使うことで、リクエスト時にオンデマンドでルートを生成するのではなく、ビルド時に静的にルートを生成することができます。

つまり、ビルド時にすでにDynamicRouteをすべて生成しておく！新しくAPIに追加しても意味がない

https://nextjs.org/docs/app/api-reference/functions/generate-static-

以下3パターンが可能

Example Route generateStaticParams Return Type
/product/[id] { id: string }[]
/products/[category]/[product] { category: string, product: string }[]
/products/[...slug] { slug: string[] }[]

じゃあ、コンテンツが追加された時はどうすればいいんだろう
=> まだわからぬ

にっしーにっしー

useRouter

pathname はルートパスのみ（クエリパラメータなし）を取得するのに対して、asPath はクエリパラメータやハッシュを含む完全なパスを取得。
特定のルートに基づいて条件分岐をしたい場合は pathname を使い、ユーザーがアクセスしている正確なURLを取得したい場合は asPath を使うと良い

ただし、DynamicRouteの場合は以下のようになる
URL: https://example.com/blog/123

pathname: /blog/[id]
asPath: /blog/123

/pages
  └─ /blog
      └─ [id].js

補足
/posts/123?id=456
gsspのctx.queryでは
/posts/123?id=456
となる

router.push()

にっしーにっしー

Dynamic Routingの実装がまだ怪しい
https://zenn.dev/sc30gsw/articles/64240c11d7dbf9

Next.jsではルート間を移動する方法が4つあります。

  • Linkコンポーネント
  • useRouterフック（クライアントコンポーネントでのみ使用可能）
  • redirect（サーバーコンポーネントでのみ使用可能）
  • History API
にっしーにっしー

勘違いしていたDynamic Route

// `app/blog/[slug]/page.js`

// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
  const posts = await fetch("https://.../posts").then((res) => res.json());

  return posts.map((post) => ({
    slug: post.slug,
  }));
}

// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
export default function Page({ params }) {
  const { slug } = params;
  // ...
}

動的ルートセグメント名[slug]や[xxx]のこのxxxの部分が、paramsに入るようになっているのに気づかなかった
[id]としながらslugに代入しようとしてて詰まった

にっしーにっしー

そもそもなんで
generateStaticParams()関数を使うのか？

generateStaticParams 関数を動的なルートセグメントと組み合わせて使うことで、リクエスト時にオンデマンドでルートを生成するのではなく、ビルド時に静的にルートを生成することができます。

つまりビルド時に静的ルートを作ることで

  • パフォーマンスの向上
    事前生成: generateStaticParams()を使用することで、ビルド時に静的なページを事前に生成する。これにより、ユーザーがページをリクエストしたときにサーバーでの処理が不要になる！
にっしーにっしー

generateStaticParams:

この関数は、静的に生成されるページに必要なパラメータを提供するために使用されます。
この関数が返すのは、動的ルートに対応するパスのリスト（配列）で、各要素はオブジェクトです。
params:

paramsは、Next.jsが特定の動的ルートにアクセスされたときに、そのルートに関連するパラメータを表す単一のオブジェクトです。
[slug]/page.tsxの場合、
たとえば、/blog/post-1にアクセスした場合、paramsには次のような内容が含まれます