Category: Next.js

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が推奨する書き方よりも少し古い場合があ […]

Next.js (with TypeScript)のサーバーをKoaで起動する

基本的にKoaやExpressなどを使う必要はないのですが、Shopify Appなどでお世話になりそうなので勉強がてら車輪の再開発してました。 目次 進め方セットアップライブラリインストールサーバー向けtsconfig […]

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

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

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

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

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

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

AWS Amplify CLI / SDK + AWS FargateでNext.jsのSSRに対応する

dev.toのポストで、Amplifyを使ってNext.jsをSSRという記事があがっていました。ざっと読んだところ、「Amplify CLIでAWS Fargateに対してデプロイするようにすればいける」とのことでした […]

Magicを使ってNext.jsアプリにパスワードレス認証を追加する

Magicというサービスを使うことで、簡単にパスワードレス / WebAuthn またはソーシャルログイン機能を実装することができます。 今回はNext.jsをベースに作ってみました。 目次 Step1: Magicアカ […]

pwa-installをReact(Nextjs)で使う

pwa-installというWeb Componentを使うことで、manifest.jsonのデータを元にアプリのインストール画面を作ることができます。 これをReactアプリ、特にNext.jsやGatsbyなどのS […]

Next.jsでAlgolia Instantsearchを利用する

Next.js Advent Calendar 2020とAlgolia Advent Calendar 2020の17日目記事です。 AlgoliaのInstantsearch.jsをNext.jsのアプリに組み込んだ […]