Open6
Next.js (App Router) メモ
kei3devDynamic 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
参考
ドキュメント
kei3devtypedRoutes
ルーティングに型をつける
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
+ experimental: {
+ typedRoutes: true,
+ }
}
module.exports = nextConfig
参考
ドキュメント
kei3devView 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>
</>
)
}
参考
ドキュメント
kei3devデータを並列で取得する
直列のデータ取得になる場合はレンダリングまでの時間が余計にかかってしまう可能性がある。
直列のデータ取得
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(),
])
// ------ 省略 ------
}
参考
kei3devuseSearchParams 使用時のビルドエラー
エラーメッセージ
useSearchParams() should be wrapped in a suspense boundary…
→ Suspense でラップで解決
参考
kei3devRHF Server Actions