blog.mitsuto.com Open in urlscan Pro
2001:e42:102:1706:160:16:140:35  Public Scan

Form analysis
1 forms found in the DOM

GET https://blog.mitsuto.com/

<form role="search" method="get" class="search_form" action="https://blog.mitsuto.com/"> <input type="search" id="search-form-65d9fbc68a342" class="search_field" placeholder="検索" value="" name="s"> <button type="submit"
    class="search_submit"><i class="fa fa-search serch_icon" aria-hidden="true"></i></button></form>

Text Content

コンテンツへスキップ


AS USUAL


 * ホーム
 * 旅
 * LIVE
 * 祭
 * ライオンズ
 * 廃墟

 1. ホーム
    »
 2. JavaScript
    »
 3. Next.js
    »
 4. Next.jsでURLのパラメーターを取得したいっ！


NEXT.JSでURLのパラメーターを取得したいっ！

2024年1月5日

使ってるNext.jsのバージョンは14系(App Router)です。

やりたいことの内容としては下記のようなURLの場合の?nanika=1の値を取りたいって話ですね。

https://example.com/user?nanika=1

ちょいとググってみた感じだとuseSearchParamsで取れるらしい。


USESEARCHPARAMS

app/user/page.tsx
"use client";
import { useSearchParams } from "next/navigation";
 
export default function User() {
  const searchParams = useSearchParams();
  const nanika = searchParams.get("nanika");
 
  return (
    <p>{nanika}</p>
  );
}

ってな感じで、取得できました


参考

【App Router】Next.js13でURLのクエリパラメーターを取得する方法
【React】Next.js13以降でURLのクエリパラメーターを取得する方法 #React – Qiita

FacebookHatenaLineXThreads共有


関連記事

 1. Reactでdefault exportではないコンポーネントをlazy importしたいっ！ タイトルの通りですが、 export default
    function Hoge() { return ( <h1>ほげほげ</h1> );...
 2. useReducerでコンポーネントに渡すpropsをすっきりさせたいっ！[React/typescript]
    機能追加を続けるとuseStateが乱立というかどんどん増えて行ってしまうので、useReducerでまとめて処理したいと思います。 useState
    import { useState } from 'react'; […]...
 3. React(TypeScript)でコンポーネントのtypeを別のコンポーネントで使いたいっ！[ComponentProps]
    とあるコンポーネントのPropsで指定しているtypeを使いまわしたい時にComponentPropsを使うのを忘れそうなのでメモ。 const
    Hoge: React.FC<{ id: number }> […]...
 4. react-i18nextのuseTranslationをTranslationコンポーネントに書き換えた話
    ドキュメントを上から読んでいって、まずは普通に useTranslation(); で実装しようとしました。
    (i18nextのinitは別のとこでやってるので省略) useTranslation(); まずは親になるM […]...

Next.jsReact
前の記事


FOJF2324＠SHIBUYA CYCLONE

次の記事


Epiphone 150th Anniversary Beyond＋@恵比寿LIQUIDROOM


アーカイブ

アーカイブ 月を選択 2024年2月  (2) 2024年1月  (5) 2023年12月  (5) 2023年11月  (9) 2023年10月  (5)
2023年9月  (8) 2023年8月  (10) 2023年7月  (8) 2023年6月  (3) 2023年5月  (4) 2023年4月  (4)
2023年3月  (11) 2023年2月  (5) 2023年1月  (4) 2022年12月  (3) 2022年11月  (5) 2022年10月
 (2) 2022年9月  (1) 2022年8月  (4) 2022年7月  (2) 2022年6月  (4) 2022年5月  (7) 2022年4月
 (1) 2022年3月  (3) 2022年2月  (2) 2022年1月  (7) 2021年12月  (2) 2021年11月  (3) 2021年10月
 (3) 2021年9月  (3) 2021年7月  (6) 2021年6月  (2) 2021年5月  (7) 2021年4月  (4) 2021年3月
 (4) 2021年2月  (5) 2021年1月  (11) 2020年12月  (2) 2020年11月  (5) 2020年10月  (3)
2020年9月  (1) 2020年8月  (2) 2020年7月  (2) 2020年6月  (3) 2020年5月  (2) 2020年4月  (1)
2020年3月  (3) 2020年2月  (3) 2020年1月  (3) 2019年12月  (5) 2019年11月  (5) 2019年10月  (9)
2019年9月  (4) 2019年8月  (7) 2019年7月  (8) 2019年6月  (5) 2019年5月  (9) 2019年4月  (7)
2019年3月  (7) 2019年2月  (4) 2019年1月  (3) 2018年12月  (3) 2018年11月  (3) 2018年10月  (9)
2018年9月  (8) 2018年8月  (9) 2018年7月  (5) 2018年6月  (6) 2018年5月  (8) 2018年4月  (5)
2018年3月  (5) 2018年2月  (9) 2018年1月  (7) 2017年12月  (1) 2017年11月  (5) 2017年10月  (4)
2017年9月  (1) 2017年8月  (3) 2017年7月  (6) 2017年6月  (3) 2017年5月  (11) 2017年4月  (7)
2017年3月  (9) 2017年2月  (5) 2017年1月  (17) 2016年12月  (2) 2016年11月  (4) 2016年10月
 (6) 2016年9月  (4) 2016年8月  (2) 2016年7月  (6) 2016年6月  (7) 2016年5月  (11) 2016年4月
 (6) 2016年3月  (7) 2016年2月  (9) 2016年1月  (11) 2015年12月  (7) 2015年11月  (8)
2015年10月  (8) 2015年9月  (12) 2015年8月  (13) 2015年7月  (11) 2015年6月  (7) 2015年5月
 (14) 2015年4月  (7) 2015年3月  (11) 2015年2月  (28) 2015年1月  (31) 2014年12月  (31)
2014年11月  (30) 2014年10月  (33) 2014年9月  (30) 2014年8月  (27) 2014年7月  (25) 2014年6月
 (30) 2014年5月  (31) 2014年4月  (29) 2014年3月  (31) 2014年2月  (26) 2014年1月  (31)
2013年12月  (31) 2013年11月  (31) 2013年10月  (30) 2013年9月  (29) 2013年8月  (31) 2013年7月
 (33) 2013年6月  (30) 2013年5月  (31) 2013年4月  (30) 2013年3月  (31) 2013年2月  (28)
2013年1月  (30) 2012年12月  (33) 2012年11月  (30) 2012年10月  (31) 2012年9月  (26) 2012年8月
 (23) 2012年7月  (25) 2012年6月  (23) 2012年5月  (17) 2012年4月  (19) 2012年3月  (15)
2012年2月  (10) 2012年1月  (19) 2011年12月  (12) 2011年11月  (16) 2011年10月  (12) 2011年9月
 (15) 2011年8月  (10) 2011年7月  (22) 2011年6月  (17) 2011年5月  (29) 2011年4月  (23)
2011年3月  (17) 2011年2月  (19) 2011年1月  (11) 2010年12月  (15) 2010年11月  (21) 2010年10月
 (14) 2010年9月  (20) 2010年8月  (12) 2010年7月  (16) 2010年6月  (20) 2010年5月  (16)
2010年4月  (8) 2010年3月  (7) 2010年2月  (17) 2010年1月  (24) 2009年12月  (10) 2009年11月
 (15) 2009年10月  (20) 2009年9月  (18) 2009年8月  (38) 2009年7月  (31) 2009年6月  (35)
2009年5月  (36) 2009年4月  (27) 2009年3月  (30) 2009年2月  (22) 2009年1月  (30) 2008年12月
 (32) 2008年11月  (18) 2008年10月  (23) 2008年9月  (30) 2008年8月  (66) 2008年7月  (59)
2008年6月  (48) 2008年5月  (49) 2008年4月  (16) 2008年3月  (28) 2008年2月  (9) 2008年1月
 (31) 2007年12月  (16) 2007年11月  (39) 2007年10月  (9) 2007年9月  (19) 2007年8月  (15)
2007年7月  (9) 2007年6月  (3) 2007年5月  (5) 2007年4月  (14) 2007年3月  (13) 2007年2月  (15)
2007年1月  (10) 2006年12月  (17) 2006年11月  (7) 2006年10月  (22) 2006年9月  (17) 2006年8月
 (19) 2006年7月  (22) 2006年6月  (36) 2006年5月  (15) 2006年4月  (19) 2006年3月  (19)
2006年2月  (18) 2006年1月  (18) 2005年12月  (12) 2005年11月  (19) 2005年10月  (26) 2005年9月
 (18) 2005年8月  (27) 2005年7月  (27) 2005年6月  (18) 2005年5月  (13) 2005年4月  (23)
2005年3月  (13) 2005年2月  (30) 2005年1月  (16) 2004年12月  (13) 2004年11月  (23) 2004年10月
 (13) 2004年9月  (31) 2004年8月  (20) 2004年7月  (26) 2004年6月  (30) 2004年5月  (21)
2004年4月  (15) 2004年3月  (12) 2004年2月  (21) 2004年1月  (10) 2003年12月  (14) 2003年11月
 (11) 2003年10月  (12) 2003年9月  (3) 2003年8月  (11) 2003年7月  (12) 2003年6月  (12)


ブログ内検索




プロフィール

みつと
自宅警備員。
旅行ついでに、ライブ行ったり、写真撮ったり、祭りに行ったり。最近は西武ドーム（ベルーナドーム）によく出没してます。

ブログトップ、記事へのリンクはご自由にどうぞ。
(画像の転載と直リンは禁止です)




ブログ内まとめページ

 * タイ旅行まとめ
 * ベトナム旅行まとめ
 * ラオス旅行まとめ
 * ロシア旅行まとめ
 * 台湾旅行まとめ
 * 香港旅行まとめ




カテゴリ別RSS

 * 旅
 * LIVE
 * 祭
 * ライオンズ
 * 廃墟
 * すべて


Powered by WordPress
Theme by Simple Days

©2024  As usual
FacebookHatenaLineXThreads共有
✓
共有ありがとうございます !
AddToAny
詳細…