[備忘録]Next.js13の動的ルーティングのパラメーター取得

きっかけ

Next.js12からNext.js13で変わったAppRouterで動的ルーティングも変わっていたので

どう変化したのか

Next.js 12(ディレクトリ構造)

|--page
   |-- _app.tsx
   |-- [id].tsx

Next.js 13(ディレクトリ構造)

|--app
   |-- layout.tsx
   |-- page.tsx
   |-- [id]
        |-- page.tsx

Next.js 12(パラメーター取得)

import { useRouter } from 'next/router';

export default function Index() {
    const router = useRouter();
    const { id } = router.query;
}

Next.js 13(パラメーター取得)

export default function Index(props) {
    const id = props.params
}

感想

Next.js 13で動的ルーティングについて調べても情報が少ないと感じました。12と13を比較すると見た目の通り、楽になりました。