Next13 URLパラメータの取り方(フロント/サーバー)まとめ

Next13でURLのパラメーターを取得する方法まとめ

Next13でURLのパラメータを取得する方法を毎回忘れて検索している気がするのでここにまとめておく。

フロント

https://domain.com/page-id-001

その1

export default function Home() {
  const params = useParams();
  const id = params.id;
  console.log(id) // page-id-001
}

その2

export default function Home({ params }: { params: { id: string } }) {
  const id = params.id;
  console.log(id) // page-id-001
}

フロント

https://domain.com?id=page-id-001

その1

export default function Home() {
  const searchParams = useSearchParams();
  const id = searchParams.get("id");
  console.log(id) // page-id-001
}

サーバー(API)

https://domain.com/page-id-001

その１

export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  const id = params.id;
  console.log(id) // page-id-001
}

サーバー(API)

https://domain.com?id=page-id-001

その１

export async function GET(
  request: Request,
) {
  const { searchParams } = new URL(request.url);
  const id = searchParams.get("id");
  console.log(id) // page-id-001
}