Next.jsのAppRouterでクライアントコンポーネントからslugを取得する 💻

nextjs.org

PageRouter

const { useRouter } = require('next/router');

export function DetailPageTemplate() {
  const router = useRouter();
  
  return (
    <div>
      <p>{ router.query.slug }</p>
    </div>
  );
}

と、PageRouterの時はuseRouterで取得できていた、slugなのですが、AppRouterの場合は、

AppRouter

'use client';

const { useParams } = require('next/navigation');

export function DetailPageTemplate() {
  const params = useParams();
  
  return (
    <div>
      <p>{ params.slug }</p>
    </div>
  );
}

という感じで、useParamsを使うべしということを書き残しておきます。

nextjs.org