この記事はwamoが覚えている範囲内で非常に雑に書いた記事です。
温かい目で見てやってください。(重箱の隅をつつくのはやめてください)

目次
    1. 公式サイトができるまで
    2. は?
    3. 使った物
      1. Next.js
      2. Tailwind CSS ( + Headless UI )
      3. react-hook-form
      4. Typescript
      5. Ghost
      6. Sentry
      7. Appzi
    4. 開発中の問題
      1. i18nをexportできなかった
      2. カウントダウン機能がうまく動かなかった
      3. HTMLコメント
      4. 翻訳
    5. 終わりに

公式サイトができるまで

2022年01月08日 12:00

wamo

せや、新しいVCbornの公式サイト作ったろ

あとNext.js久しぶりに触りたいからNext.js使ってやるわ

2022年01月08日 15:00

wamo

あらかたできた

2022年01月09日 12:30

wamo

あとは参加フォームのバリデーションとメール送信の機能追加して…

2022年01月09日 17:30

wamo

クリエイターページのカードをjsonで生成するようにして…

2022年01月10日 17:50

wamo

ローディング画面作って…

2022年01月12日 20:00

wamo

せっかくだしGhostで管理できるようにするか…

wamo

後は404ページ作って…

wamo

よしゃ、完成や!

は?

そうですね、説明不足です。

まず、以前のサイトと比べて良くなった点を紹介します。

  • ページ遷移が速くなった
  • 画像が自動で最適化されるようになった
  • ダークモードに対応した
  • ニュースをGhostで管理できるようになった
  • クリエイター一覧をjsonで管理できるようになった
  • ドロワーができた
  • Sentryでエラー追跡がしやすくなった

悪くなった点としては、

  • 読み込みが遅くなった
  • Node.jsサーバーを用意しないといけなくなった(後述)

などがあげられます。

使った物

Next.js

https://nextjs.org/

Reactベースのフロントエンドフレームワークです。

Reactの環境構築で面倒な所を大体やってくれるので非常に楽です。

Tailwind CSS ( + Headless UI )

Tailwind CSSはこちらの記事で詳しく紹介しています。

Headless UIはそれを使ったサンプルがあったので使いました。

react-hook-form

フォームのバリデーションに使用しました。

正規表現を簡単にバリデーションに使えるので非常に便利です。

Typescript

Microsoftが開発しているJavascriptに型付けを追加したような言語です。

エラーをある程度未然に防ぐことができ、またコードの読みやすさが向上するのでおすすめです。

Ghost

https://ghost.org/

オープンソースのCMSです。

今回はHeadless CMSとして使用しています。

Sentry

https://sentry.io/welcome/

フロント/バックエンドでエラーが発生したときに自動で通知してくれるサービスです。

Appzi

https://www.appzi.com/

フィードバック管理を楽にできるサービスです。

日本語に対応していないのが難点。

開発中の問題

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

利用規約などの長文を翻訳する方法に悩みましたが、私は馬鹿なのでこのようなやり方をしました。

二度とやりたくありません。

終わりに

新しい公式サイトはこちらからご覧いただけます。

https://vcborn.com

もし改善案等ありましたら、右下のフィードバックボタンからご意見をお寄せください。