Next.js + Vercelで作ったサイトを大幅に新しくした。
前回の記事でNext + Vercelでサイトを作ったという記事を書きましたがちょっとあまりにも良くなかったので今回大幅に作り直しました。新しいサイトでも主にAdobeScript関係のまとまった情報を載せてゆく予定ですが単発の記事、新しい情報は今まで通りブログとTwitterで更新してゆく予定です。特に目新しいことはやってないのですがどんな風に開発したかの記事です。
ちなみに該当のサイトはこちらになります。
導入した技術
前回同様今回もTypeScript + React + Styled-componentで作成したのですがそれ以外にもコンタクトフォームの作成のためにGoogle reCAPTCHA v3の導入とサイト解析のためのGoogle Analyticsの導入も行いました。ちなみに今回ブログっぽい構成の記事のサイトがありますがブログのようにデータベースで管理しているわけではありません。ただのブログのような構成の記事のサイトです。
問い合わせフォーム
今回問い合わせフォームを作成するためにサーバーサイドからメールを飛ばす必要がありました。ただこの辺の処理はNode.jsのNodemailerで簡単に処理できました。（PHPではなくサーバーサイドもJavaScriptで完結できるので本当に楽）ただメールアカウントのパスワードやUser情報等は環境変数化しています。envファイルに書き込んでそれをローカル上でテストするときにNext.js側から読み込み。Vercel上で動かすときはVercelから環境変数の設定を行います。公式サイトを参考。サイトの仕組みはフォームに入力した値をサーバーサイドに飛ばしてそこからNodemailerでメールを送信するだけなのですがここでスパム対策を行う必要が出てきます。そのためのGoogle reCAPTCHA v3の導入をしたのですがNext.js(React)で導入する場合特定のページのheadタグ内にscriptタグを追加する等少し慣れない処理が必要だったのと初見でイマイチ仕組みがわからなかったのでこちらの reCAPTCHA v3をReact Hooksで実装するの記事を参考にしました。ちなみにreCAPTCHAがtokenを取得するのに時間が少しかかるのでローディング画面の表示は必須です。
Google Analytics
Google analyticsもGoogle reCAPTCHA もそうですが外部スクリプトを読み込ませる必要があり、普段あまりReact上で行わないので少し戸惑いました。HTMLとvanilla jsの一般的な？サイトだったらコードをコピーすればそれで終わりですがNext.jsだとjsx内に全て書き込まないといけません。analytics導入に関してはこちらの記事Next.jsでGoogle Analyticsを使えるようにするを参考にしました。
記事のページ
ブログのような記事のページを今回作成したのですがブログのようにデータベースから読み込んで生成する、ではなく後々CSSやHTMLの
構造を自由にカスタマイズできるようにタグやタイトル等のデータのみJSONで管理して記事の本文の部分は記事毎にStyled-componentsで構成しています。
今後の予定
自分で開発したscriptの紹介ページは現状ブログの紹介ページにリンクしているだけですがその内専用のページを用意したいと思います。記事のページは現状UXPばかりですがCEPとかももう少し入れていきたいです。一応サイト自体Scriptの情報サイトを目指しているのでリンクも充実させたいです。