Next.js router.queryがundefinedになる問題

withRouterやuseRouterを使用するとファーストレンダリングでundefinedになる問題が発生する これは公式ドキュメントにも書いてます。 自動静的最適化によって静的に最適化されたページは、ルートパラメータが提供されないままハイドレーションされます。 ハイドレーションの後、Next.jsはアプリケーションの更新をトリガーにして、クエリオブジェクトにルートパラメータを提供します。 といった事象が起きているため、ファーストレンダリング時にundefinedが発生して2回目のレンダリングからクエリが取得ができるようになります。 以下のようにすれば2回目のレンダリングで取得することが可能です。 const router = useRouter()…

Recoilを使ってみよう

5月頃になりますが、Reduxの代わりになるRecoilというパッケージがfacebook社の方からリリースされました。現在シェア率も伸びていて、日本では知名度がありませんが、海外ではRecoilがReduxを上回ったようです。 今後日本でも流れが来そうですね。 自分自身まだ技術検証をしていなかったのでチュートリアルを消化するついでにReduxとの比較もしていこうと思います。 先にRecoilのGet Startedのチュートリアルをさらっとやってみます。 Recoilの実装 $ create-react-app app $…

Reactフレームワークはどれを選ぶべきか?

Reactが自分の今の仕事の主戦場となっています。そこで2年ほどやってきた自分がフレームワークの選び方を提案してみます。 Create React App create-react-app 公式がサポートしている。Reactのスターターパッケージ。 ESLintやJestなんかも最初から内包しているので、環境構築の手間が省ける。サクッとReactでアプリを作りたいときなんかに便利。 CSRでサイト構築が可能。CSRであるが故にSEOは弱い。 ブラウザベースのWEBアプリケーション向きで、逆にコーポレートサイトやLPには不向き。APIのレスポンスを待ってからDOMを描画する。そのため描画するのに待ち時間が発生してしまうのがネック。 また、Create…

ReactアプリをFTPサーバーにアップロードする

クラウドが主流になってはきていますが、作ったアプリを低コストのFTPで運用したい人に向けて記事を書きます。 ReactといえどただのJSなのでビルドしたらFTPサーバーにあげることも可能です。 React App package.jsonにアップロード先のURLを追加してビルド。 pacjage.json "homepage": "https://ryotarch.com/relativepath", // アップロード先のURL…

useImperativeHandleを使ってイベントを持たせてみよう

Imperativeの意味は命令という意味です。 なので操作を命令するという意味合いになりますね。 ただし、こちらのコードは公式でも「参照を使用した命令型コードは避けるべきです」と書いているように、極力使用を控え、小技として覚えておくと良いでしょう。 useImperativeHandle customizes the instance value that is…

Next.jsをi18nに対応させる

Next.jsで多言語化対応のためにやったことをまとめます。 まず、こちらのパッケージを使用していきます。 next-i18next 検証 $ git clone https://github.com/isaachinman/next-i18next.git $ cd…

Functional Componentで’missing display name’

ESLintででる Component definition is missing display name react/display-name デバッグのために、全てのコンポーネントに名前を付けることが推奨されるているため、無名関数だと怒られる。 回避方法はコンポーネントに対して名前をつけてあげることで解消される。…

GTMをNext.jsに埋め込む方法

react-gtmなどパッケージで済ませる方法もあるが、今回はパッケージを使用しないTips _document.jsはすべてのページのラッパーになっているため、_document.jsに貼り付ける。 ただし、通常のようにScriptタグをただただ貼り付けるとエラーがでるのでdangerouslySetInnerHTML を使用する。 以下、<noscript>タグも同様。 <Head> <script dangerouslySetInnerHTML={{ __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':…
1 2 3 4