この記事はwamoが覚えている範囲内で非常に雑に書いた記事です。
温かい目で見てやってください。（重箱の隅をつつくのはやめてください）
目次
公式サイトができるまで
2022年01月08日 12:00
せや、新しいVCbornの公式サイト作ったろ
あとNext.js久しぶりに触りたいからNext.js使ってやるわ
2022年01月08日 15:00
あらかたできた
2022年01月09日 12:30
あとは参加フォームのバリデーションとメール送信の機能追加して…
2022年01月09日 17:30
クリエイターページのカードをjsonで生成するようにして…
2022年01月10日 17:50
ローディング画面作って…
2022年01月12日 20:00
せっかくだしGhostで管理できるようにするか…
後は404ページ作って…
よしゃ、完成や！
は？
そうですね、説明不足です。
まず、以前のサイトと比べて良くなった点を紹介します。
- ページ遷移が速くなった
- 画像が自動で最適化されるようになった
- ダークモードに対応した
- ニュースをGhostで管理できるようになった
- クリエイター一覧をjsonで管理できるようになった
- ドロワーができた
- Sentryでエラー追跡がしやすくなった
悪くなった点としては、
- 読み込みが遅くなった
- Node.jsサーバーを用意しないといけなくなった（後述）
などがあげられます。
使った物
Next.js
Reactベースのフロントエンドフレームワークです。
Reactの環境構築で面倒な所を大体やってくれるので非常に楽です。
Tailwind CSS ( + Headless UI )
Tailwind CSSはこちらの記事で詳しく紹介しています。
Headless UIはそれを使ったサンプルがあったので使いました。
react-hook-form
フォームのバリデーションに使用しました。
正規表現を簡単にバリデーションに使えるので非常に便利です。
Typescript
Microsoftが開発しているJavascriptに型付けを追加したような言語です。
エラーをある程度未然に防ぐことができ、またコードの読みやすさが向上するのでおすすめです。
Ghost
オープンソースのCMSです。
今回はHeadless CMSとして使用しています。
Sentry
フロント/バックエンドでエラーが発生したときに自動で通知してくれるサービスです。
Appzi
フィードバック管理を楽にできるサービスです。
日本語に対応していないのが難点。
開発中の問題
i18nをexportできなかった
Next.jsのi18n-routingはnext exportをサポートしていないため、静的サイトとしての出力ができませんでした。
他のライブラリを使えばいけないことはないのですが、面倒だったのでOCIでサーバーを新しく立てました。
カウントダウン機能がうまく動かなかった
これに関しては今も原因は良く分かっていないのですが、なぜかカウントダウンタイマー用のdivがカウントダウン終了後も残ってしまい、そのままページに適用されてしまいました。
カウントダウンタイマーのdivをmainにしたらなぜか直りました。
問題なければ全てヨシ！
HTMLコメント
面白い要素を入れたかったのでHTMLコメントでアスキーアートを作ったのですが、JSXではコメントが出力されません。
しょうがないのでdangerouslySetInnerHTMLでコメントを出力するようにしました。
（404ページのコーヒーマシンもライセンスをコメントで出力しています）
翻訳
この記事を参考にしました。
https://zenn.dev/steelydylan/articles/nextjs-with-i18n
利用規約などの長文を翻訳する方法に悩みましたが、私は馬鹿なのでこのようなやり方をしました。
二度とやりたくありません。
終わりに
新しい公式サイトはこちらからご覧いただけます。
もし改善案等ありましたら、右下のフィードバックボタンからご意見をお寄せください。
