![見出し画像](https://assets.st-note.com/production/uploads/images/117094787/rectangle_large_type_2_88199bc0190be14ebf3dc5454d822a32.png?width=1200)
Photo by
masondixon402
Next.js13 /test?id=123 みたいなURLで取得する場合
Next.js13のApp Routerを使用する場合は、useRouterのimportはnext/routerからnext/navigationに変わりました
import { useRouter } from "next/navigation"
その為、router.queryなどが使用できません
下記のようにカテゴリーをクリックしたら、そのURLに遷移する場合以前は、router.queryで取得できていました
<Link href="/category?name=カテゴリー">カテゴリー</Link>
// src/app/page.tsx
<li>
<Link href="/category?name=Technology">Technology</Link>
</li>
<li>
<Link href="/category?name=Game">Game</Link>
</li>
<li>
<Link href="/category?name=News">News</Link>
</li>
<li>
<Link href="/category?name=Sports">Sports</Link>
</li>
Next.js13以降でURLのクエリパラメーターを取得する方法は、useSearchParamsを使用します
https://qiita.com/someone7140/items/f45b38c0fe27ae0bac87
// searchParams.get("name")でURLのパラメーターを取得できました
const searchParams = useSearchParams();
const categoryName = searchParams.get("name");
パラメーターが取得できたので、supabaseからカテゴリー名が同じものだけ、eqメソッドで取り出します
// src/app/category/page.tsx
"use client";
import { supabase } from "@/utils/supabaseClient";
import { useSearchParams } from 'next/navigation';
const CategoryBlogPage = () => {
const [posts, setPosts] = useState<Article[]>([]);
// カテゴリーのURLパラメータを取得する /category?name=Technology
const searchParams = useSearchParams();
const categoryName = searchParams.get("name");
useEffect(() => {
const fetchArticlesByCategory = async () => {
const { data, error } = await supabase
.from("posts")
.select("*")
.order("createdAt", { ascending: false })
.eq("categories", categoryName);
if (data) {
setPosts(data);
}
if (error) {
console.log(error);
}
};
fetchArticlesByCategory();
}, [categoryName]);
// console.log(categoryName);
return (
<div>
<ArticleList articles={posts} />
</div>
);
};
export default CategoryBlogPage;
'searchParams' は 'null' の可能性があります。ts(18047) const searchParams: ReadonlyURLSearchParams | null ってエラー出るので
nullとオプショナルチェーンの ? 演算子を追加します
// カテゴリーのURLパラメータを取得する /category?name=Technology
const searchParams = useSearchParams() || null;
const categoryName = searchParams?.get("name");
🔹追伸
クライアントコンポーネントはuseSearchParams()、サーバーコンポーネントはpropsでparamsの値を取得できる
const CategoryBlogPage = (props: any) => {
console.log(props) // { params: {}, searchParams: { name: 'Technology' } }
}
const CategoryBlogPage = ({
searchParams: { name }
}: {
searchParams: { name: string | null };
}) => {
console.log(name); // Technology
}
export default CategoryBlogPage;
appフォルダーのroute.tsにAPIを記述
route.tsへの書き方は下記動画が参考になります
この記事が気に入ったらサポートをしてみませんか?