Next.jsでURLのパラメーターを取得したいっ！
使ってるNext.jsのバージョンは14系(App Router)です。 やりたいことの内容としては下記のようなURLの場合の?nanika=1の値を取りたいって話ですね。 https://example.com/user?nanika=1 ちょいとググってみた感じだとuseSearchParams…
JavaScript
Next.jsの「Error: Event handlers cannot be passed to Client Component props.」を解決したいっ！
使用バージョンはNext.js(v14系)です。 実際のコードとは違いますが、create-next-appで生成されたpage.tsxにonClickを追加しただけなのにタイトルのエラーになりました。 export default function Home() { return ( <bu…
Nextjsの「Do not add stylesheets using next/head」を直したいっ！
表示されたWarningは以下。 Do not add stylesheets using next/head (see <link rel="stylesheet"> tag with href="/css/main.css"). Use Doc…
Nextjsでwindowオブジェクトを使いたいっ！
Nextjsで普通に window.** って書いてもコード的にはエラーにはならないんですが、実行するとエラーになるっていう。。 ReferenceError: window is not defined そもそもサーバー側(nodejs)でwindowオブジェクトは使えないので、このエラーが出たっ…
Nextjsで「Module parse failed: Unexpected token」が出たのでなんとかしたいっ！
実際に表示されたエラーは以下。 Module parse failed: Unexpected token You may need an appropriate loader to handle this file type, currently no loaders are configured…
react-test-renderer + react-lazyloadでjestのsnapshotテストをしたいっ！
タイトルにテストをしたい！と書きましたが、実際は元々React17では動いていたんですが、React18にしたら動かなくなったので動かしたいっ！です。 React18はreact-lazyloadを使わなくても、React.lazy() / Suspenseで、似たようなことはできるんですが書き換え…
Next.jsのportを変更したいっ！
変更前 default(何も指定しない場合)は、3000ポートで起動 { "scripts": { "dev": "next dev" } } 変更後 -pでポートを指定 { "scripts": { "dev…
Next.jsで最初のページを表示したいっ！
create TypeScriptで書きたいのでオプションを追加。 yarn create next-app --typescript プロジェクト名を入力 > hogehoge What is your project named? › hogehoge Would you like to use…
Node.jsのバージョン管理をVoltaでしたいっ！
別に何でバージョン管理をしてもいいんですが、Voltaが早いらしいので。 ローカルのOSはAlmaLinux 9.1です。 インストール curl https://get.volta.sh | bash 確認 volta -v > 1.1.1 Node.jsインストール バージョン指定(18.…
react-router-domでURLに含まれるidを取得したいっ！
Routerあんまり触ってなかったんですが、pathで指定した値(/archives/11111みたいなやつ)が取れるんですね😀 <Routes> <Route path="/archives/:id" element={<Archive />} /…
Reactでdefault exportではないコンポーネントをlazy importしたいっ！
タイトルの通りですが、 export default function Hoge() { return ( <h1>ほげほげ</h1> ); } 上記のようなコンポーネントを普通にimportすれば import Hoge from './hoge'; で、lazyを使ったと…
ESLintのno-constant-conditionを直したいっ！
no-constant-condition 条件文が固定値だと怒られる。 if (false) { console.log('ERROR!!'); } これデバッグ中にやりがち、、…
ApolloClientのuseLazyQueryでonCompletedが毎回動くようにしたいっ！
useLazyQueryを使うと任意のタイミングで、バシバシQueryを呼び出すことができるようになりますが、以下↓のように書いても思ったように動かなかったのでメモ。 const GET_USER = gql` query GetUser($id: Int!) { user(id: $id) { n…
useReducerでコンポーネントに渡すpropsをすっきりさせたいっ！[React/typescript]
機能追加を続けるとuseStateが乱立というかどんどん増えて行ってしまうので、useReducerでまとめて処理したいと思います。 useState import { useState } from 'react'; const = useState<number>(1); const…
連続して発火するイベントの処理を減らしたいっ！(React)
例えばscrollの位置を保存するような処理を書こうとすると、連続してイベントが発生してしまって処理が無駄に行われる場合があります。 const = useState(0); // heightが変更された時 useEffect(() => { // 保存する save(height); },…