【Next.js】URLのクエリパラメータの取得方法。

関連:【Next.js】URLにクエリパラメータを付ける方法。

やりたいこと

https://example.com/post?post_id=100のURLの場合に、100を取得したい。

https://example.com/post?post_id=100

「getServerSideProps」内で取得する

export async function getServerSideProps({query}) {
    console.log(query.post_id);
}

// 100

「useRouter」で取得する

import { useRouter } from 'next/router'

...

const router = useRouter();
const post_id = router.query.post_id;
console.log(post_id);

...

// 100

「router.query」が空(undefined)になる場合

useRouter()で取得したrouter.queryが空(undefined)になってしまう場合があるようです。

対処法は、useEffect()とrouter.isReadyを組み合わせることで、パラメータが取得できたタイミングで処理を進められるようにできます。

import { useRouter } from 'next/router'

...

const router = useRouter();
const query = router.query;

useEffect(() => {
    if(router.isReady) {
        console.log(query.post_id);
    };
},[query, router]);

...

isReady: boolean – Whether the router fields are updated client-side and ready for use. Should only be used inside of useEffect methods and not for conditionally rendering on the server. See related docs for use case with automatically statically optimized pages

参照:next/router | Next.js

「getStaticProps」内では取得できない

export async function getStaticProps({params}) {
    console.log(query.post_id);
}

// undefined

コメントを残す

*