現在、とあるサイトを Next.js + microCMS で運用している。そして、インフラ環境は、CloudFront + Amazon S3 構成としている。今回、エンジニア以外の人がmicroCMSで記事を執筆して、プレビュー画面で見栄えも確認したいのに、気軽に確認できない。という問…

先日に引き続き、今回も GSAP で実装したアニメーションをご紹介。 今回は、タイプライター風アニメーションというのか、1 文字ずつ文字が表示されるアニメーションを実装した。 TextPlugin 使い方 React での実装例 まとめ 関連する記事 TextPlugin greenso…

スクロールアニメーションを実装するにあたり、GSAP の ScrollTrigger を使うことで簡単に実装できたので、今回はその実装方法を紹介する。 GSAP とは ScrollTrigger の特徴 React での実装例 インストール 使い方 参考例 まとめ GSAP とは GSAP（GreenSock …

GitHub Actions は、最高に便利である。 今回は、Next.js で作った HP を Firebase Hosting に自動デプロイする GitHub Actions を紹介する。 GitHub Actions の構成 workflowの新規作成 GCPの設定 Firebaseの設定 Slack Appの設定 処理実行 まとめ GitHub A…

最近、Next.js をよく使っている私だが、先日の案件で SPA で S3 などを用いた静的ウェブサイトとしてホスティングしたいという話になった。よし！今回も Next.js でいくぞ！と意気込んだが、検討した結果、通常の React で React Router を使って実装するこ…

今回は、SocketIO を用いた簡単なチャットアプリを作ってみたので、紹介する。 Next.js + Socket通信の実装 サーバーサイド フロントエンド Material-UI で簡単にUI構成 まとめ なお、実装したサンプルコードは GitHub に公開している。 Docker でコンテナを…

Next.js（SSR）のアプリケーションを作成して、AWS にデプロイしてみたので、備忘録として残しておく。 0. ECR にイメージリポジトリを作成する 1. アプリをコマンドで実行できることを確認する 2. docker imageを作成する 3. ECRにdocker imageをpushする 4…

Next.js のカンファレンス Next.js Conf。OGPのチケットがカッコ良すぎて、すごい盛り上がりのようだ。デザインセンスが良すぎる。私もチケット欲しさに、即座に登録した。オンライン開催とのことで、当日が楽しみだ。登録がまだの方は、是非、下記からどう…

Next.js で開発しているときに、getInitialProps・getStaticProps・getStaticPaths・getServerSideProps について、いつ、どのように使うべきか、きちんと整理できておらず、自分なりの整理をしてみた。 今回整理する API は、どれもページコンポーネントで…

Next.js で開発しているときに、Client Side Rendering（SPA）・SSR・SSG についてきちんと整理できておらず、自分なりの整理をしてみたので、備忘録として残しておく。（React ベースのフレームワークで SSG といえば、Next.js 。ただし、v9.3から SSG の機…

最近、Next.js に触れる機会があり、試行錯誤しながらコーディングを行っている。その中で、Next.js の中で Firebase Admin SDK をどのように実装すべきかという課題にぶち当たり、とりあえず実装はできたものの、最適解ではないと思っている。もし最善の策…

今回、Next.jsの勉強を始めようと思い、Dockerにて開発環境の構築を行った。 なお、実装したサンプルコードは GitHub に公開している。 github.com 本記事では、ポイントだけを抜粋して説明するため、実際にコード全体を確認する場合は GitHub を参照くださ…