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

qiita

---

// 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;