Category: React

Next.jsでどうしてもReact Helmetを使いたい場合の覚書

Next.jsでOGPなどのmetaタグを取り扱う場合、next/headを使うのが基本です。が、別のアプリからマイグレした場合などで、どうしてもReact helmetからの移行が難しいケースもあります。 そんな場合の […]

shopify-app-nodeで作ったNext.jsアプリから`getInitialProps`を取り除く

Shopify App CLIおよびshopify-app-nodeを使うことで、Next.jsでのShopifyアプリ開発をスムーズにはじめることができます。ただし、Next.jsが推奨する書き方よりも少し古い場合があ […]

ShopifyのUIフレームワークPolarisをReactで扱う

Shopifyのアプリ開発などで使うUI FrameworkであるPolarisですが、意外と単体で動かす方法を紹介しているものが少ない気がしたのでまとめました。 ただのUIフレームワークとして動かす方法ですので、Sho […]

Next.jsのSource MapをSentryにおくる

Next.js以外でもWebpackを扱えるものなら大体いけるはずです。 目次 @sentry/webpack-pluginAPIキーの取得環境変数をセットするビルドを実行するファイルの確認は”Setting […]

@aws-amplify/ui-reactでSignUpフォームをカスタマイズする

@aws-amplify/ui-reactを使っている場合、AmplifyAuthenticatorやAmplifySignUpコンポーネントを使うことでアカウント作成(SignUp)の実装はほぼ片付きます。 が、独自の […]

Next.jsでGoogle Adsenseを使った広告配信

妙にハマりまくったので、とりあえず現状について覚書 目次 参考pages/_document.tsx@types/window.d.tsで型を拡張コンポーネントを作成pages/_app.tsxでイベント発火ページ毎にu […]

Ionic ReactでAWS Amplifyを利用する

環境情報 目次 セットアップAmplify CLIでセットアップAmplify ConsoleでIonic Reactアプリを公開するAuth機能を追加する セットアップ セットアップはIonicから行います。Ampli […]

Next.jsアプリにLogRocketを追加する。そしてSentry連携も

LogRocketを使うことで、「どういう操作でバグが発生したのか」を画面録画でチェックできるようになります。 これをNext.jsのアプリに組み込んだ時の覚書です。 目次 必要なものライブラリのインストール.babel […]

Algolia Instantsearchで、検索結果クリック時にキーワードをリセットする

Algolia Instantsearchをヘッダーなどレイアウト部分に配置している場合、「リンクをクリックしてページ遷移した後は、検索結果を表示しない」動作を実装したくなります。 connectSearchBoxとHi […]

react-instantsearch-dom + search-insightsでAlgoliaの検索結果をトラッキングする

Algoliaには「検索結果をクリックされた・カートに追加された」などをトラッキングするAnalytics機能が用意されています。これをReact Instantsearchで導入したアプリに追加したので、その時の方法を […]