【Next.js】URLのクエリパラメータの取得方法。
2022/6/9
2022/6/10
関連：【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
最近の記事
音楽生成AI「Suno」の使い方まとめ！作詞作曲が簡単にできる？
簡単に曲が作れるAIということでよく聞く「Suno（Chirp）」についてまとめました。
目次「Suno」とはテキストからさまざまな音声を生成する「Bark」歌詞から曲を生成する「Chirp」...
2023/11/24
2023/11/24
【Open AI】APIの料金まとめ｜GPT・DALL·E・Whisperなど
Open AIのAPI（一部）の料金をまとめました。
参考のために日本円は「1ドル150円」で換算をしています。
目次Text generation: テキスト生成Assistants ...
2023/11/22
2023/11/22
【Next.js】Assistants APIの基本的なコードまとめ。
Open AIの「Assistants API」をNext.jsで使用する時の基本的なコードをまとめました。
目次Open AIのAPIセットアップ基本の使い方Threads: スレッドを作る...
2023/11/21
2023/11/21
【Next.js】Open AIのAPIでファイルをアップロードする方法。
今回は、Next.jsサイトからOpen AIのAPI（Upload file）で、ファイルをアップロードする方法を実装するのに時間がかかったのでその過程と最終コードをまとめます。（Vercelにデ...
2023/11/21
2023/11/22
「生成系AIのWEBプロダクトTOP50」をまとめてみる。
Andreessen Horowitzが出している記事で紹介されている「AIプロダクトの月間訪問者数ランキングTOP50」のサービスをまとめました。
目次ChatGPTcharacter.ai...
2023/10/3
2023/10/3
【Next.js 13】NextAuth+FireStoreにユーザー情報を保存する。
今回は、以下の3つをNext.js 13で実装するためのメモです。
Googleアカウントでログインできる
アカウント、セッション情報をFirestoreに保存する
サーバーサイ...
2023/7/12
2023/7/12