このサイトを初めて作ってから2年。

Reactjs×Laravelでずっと運用してきましたが、表示スピードが遅いことが気になっていました。

日本ではそこまで気になっていませんでしたがルワンダにいるとその遅さは顕著でした。キャシュありで20秒くらい、なしだと1分くらいかかります。

Nextjsは早いと聞くのでそろそろNextjsも視野にいれようかなあと思っていましたが、腰が重くなかなか。

そんなときひょっこり現れたルワンダの授業でNetxjsを教えるという仕事。

Nextjsの理解を深めていくうちに、素晴らしさを知り腰を上げてみることに。何より今は時間がいっぱいあります。

ReactjsはJavaScriptのフレームワークではないらしいが、Reactjsだけやっていたときはあまりフレームワークとライブラリの違いはわかっていませんでした。しかしNextjsを知るとよくわかって気がします。

例えば、ローディング時の表示をしたい、API通信をしたい、画像やフォントを最適化したいときに、Reactでは大体追加でモジュールをインストールしないといけません。

Nextjsではすでに組み込まれているので簡単に上記の実装をすることができます。

そんなこんなで授業で教えていくうちに理解を深めたNextjsを実際にアウトプットしたい＋速度改善という理由で今回大幅リニューアルを行いました。

技術構成の概要

フロント：Next.js 14.2.10
バックエンド：Laravel 12
認証
- Laravel Breeze
連携
- laravel/breeze-next
ホスティング
- Laravel → ConoHa WING（API専用サブドメイン）
- Next.js → Vercel（メインドメイン）
ドメイン構成：
- junsan.info → Vercelに向けてNext.jsを表示
- api.junsan.info → ConoHa WINGでLaravel APIを提供

NextjsをGit push からの自動デプロイがシムーレスに行われるとのことなのでNextjsのデプロイはVercelを用いて, Laravelは今まで通りCohonaWingのサブドメインへ。

今までは全てConohaのWebサーバへFTPを用いて上げていたのでそれも楽になり一石二鳥。

api.junsan.infoに直接デプロイするとセキュリティ的に問題があるようなので, laravleディレクトリを作成しその配下へデプロイしシンボリックリンクを貼る。

実装上のポイント・詰まったところ

Laravelはhttp://localhost:8000、Nextjsはhttp://localhost:3000のクロスオリジン環境で動くので、データの受け渡しを上手にする必要があります。

コントローラのエラーも相まってエラーの特定にすごい時間がかかりました。

フロントのNextjsでデータをLaravelへ渡すときに、credentialをつけないといけないところや、bootstrap/app.phpにてverifiedCsrfTokenを設定しないとなどいろいろありました。

全てローカルファイルが完成してからWEBサーバへ上げるのも一苦労でした。

はじめはLaravelもNextjsも同じドメインにアップロードしてしまい迷子になっていました。

今回はhttp://localhost:8000とhttp://localhost:3000で別ドメインを使用しており、本番環境でも別ドメインを使用したほうが無難らしい。（同じだとプロキシがどうだとか）

ああそのためにVercelがあるのかと。ネットワーク周り知識がなさすぎて苦労しました。

あとは他にWYSIWYGエディターのCKEditorの表示などに手こずり、合計150時間ほどでリニューアル出来たと思います。

時間があるルワンダにいるからこそ出来ることではあります。

自分のサイトがアップグレードされると妙にやる気が出るのは私だけでしょうか笑

大きいやりたいことはほぼ終わりましたが、細かいUIの調整や多言語化対応など少しあるので、ちまちま3学期の間に更新していこうと思います。