Open4
Next.js (App Router) メモ
keisuke-333Dynamic Routes
- パスパラメーター：
props.paramsで取得 - クエリパラメーター：
searchParamsを定義しそこから取得
page.tsx
// リンク先が /categories/[categoryName] の場合
type Props = {
params: { categoryName: string }
searchParams: { [key: string]: string | string[] | undefined }
}
export default function Page({ params, searchParams }: Props) {
const page = typeof searchParams.page === "string" ? searchParams.page : "1"
return (
<>
<p>カテゴリー：{params.categoryName}</p>
<p>ページ番号：{page}</p>
</>
)
}
上記の場合、/categories/cat へのアクセスの場合↓
カテゴリー：cat
ページ番号：1
/categories/dog へのアクセスの場合↓
カテゴリー：dog
ページ番号：1
/categories/cat?page=2へのアクセスの場合↓
カテゴリー：cat
ページ番号：2
参考
ドキュメント
keisuke-333typedRoutes
ルーティングに型をつける
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
+ experimental: {
+ typedRoutes: true,
+ }
}
module.exports = nextConfig
参考
ドキュメント
keisuke-333View Transitions API
View Transition API とは↓
外部パッケージのnext-view-transitions を使用して実装する方法
ViewTransitionsコンポーネントでラップして、
Layout.tsx
import { ViewTransitions } from "next-view-transitions"
export default function Layout({ children }) {
return (
<ViewTransitions>
<html lang='ja'>
<body>
{children}
</body>
</html>
</ViewTransitions>
)
}
next-view-transitions の Linkコンポーネントを使用。
import { Link } from "next-view-transitions"
export const Component = () => {
return (
<>
<Link href='/about'>About</Link>
</>
)
}
参考
ドキュメント
keisuke-333データを並列で取得する
直列のデータ取得になる場合はレンダリングまでの時間が余計にかかってしまう可能性がある。
直列のデータ取得
export default async function Page({ params, searchParams }: Props) {
const category = await getCategory(params.categoryName)
const photos = await getPhotos()
// ------ 省略 ------
}
Promise.all を使って並列でデータを取得することで、改善できる可能性がある。
可能であれば並列でデータ取得するようにする。
並列のデータ取得
export default async function Page({ params, searchParams }: Props) {
const [category, photos] = await Promise.all([
getCategory(params.categoryName),
getPhotos(),
])
// ------ 省略 ------
}
参考