【Next.js】URLにクエリパラメータを付ける方法。
2022/6/9
2022/6/9
作りたいもの
こういうクエリパラメータを含むURLに飛べるリンクを作りたい。
https://example.com/posts?title=砂糖⑴ Linkにクエリパラメータを指定する
import Link from "next/link";
...
<Link href={{ pathname: "/posts", query: {title: "砂糖"} }}>
<a>タイトルに"砂糖"を含む投稿を見る</a>
</Link>
...⑵「useRouter」を使う
import { useRouter } from 'next/router'
export default function Top() {
const router = useRouter();
// aタグがクリックされるとリダイレクト
const handleClick = (keyword) => {
router.push({
pathname: "posts",
query: { title: keyword },
});
};
return(
<div>
<a onClick={() => handleClick('砂糖')}>タイトルに"砂糖"を含む投稿を見る</a>
<a onClick={() => handleClick('塩')}>タイトルに"塩"を含む投稿を見る</a>
</div>
)
};クエリパラメータを複数設定したい場合
「Link」の場合も「router.push」の場合も、queryの中にパラメータを追加すると付与されます。
パラメータ一つの場合
query: {
title: "砂糖"
}
// https://example.com/posts?title=砂糖パラメータ複数の場合
query: {
title: "砂糖",
sort: "asc",
...,
},
// https://example.com/posts?title=砂糖&sort=asc
最近の記事
音楽生成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