Next.jsでホームページを作ろうと思っている人に向けて

ご挨拶

まず初めに、この記事はホームページをフルコードで書いている人物が書いています。
まだ実践が浅く、勉強中の形へ向けての失敗共有談です。

html、css、javascriptでホームページを作っていたけど、次のステージを目指してReactでホームページを作り、SEO的に素のReactはよくないと知ったのでNext.js＋React＋tailwindcssで作ったという経緯ですが、いざ公開という段階に来ていろいろ失敗したことに気づいた事が多いので、今から挑戦という方が同じ失敗をしないよう、ここに残します。

何が失敗だったのか

簡潔に述べると、作ったホームページをロリポップで公開しようとしたのが失敗でした。

Next.jsはロリポップにそのままアップロードできません。
例えるならロリポップは真っ白なキャンバスです。
絵は描けるけど、描いた絵は動きません。

しかしNext.jsは電池の無いプラレールのようなものです。
このプラレールにはモーターは付いています。
これを動かすには、電力を供給できるレールが必要です。
この電力供給能力のあるサーバーにデプロイしないと動かないのです。

Reactの何がダメなのか

Reactは素晴らしいです。
htmlを直書きしている時、全てのページにnavbarやfooterをつけようと思うと同じコードをコピーしてすべてのページにペーストしていましたが、コンポーネントという概念から作ったパーツを呼び出せば良いので、ファイル一つ一つが非常にさっぱりします。
ただし、javascriptが動作して初めてページが生成されるため、googleの偵察部隊がクロージングする際、ページになにも表示されないということが起こり得ます。
つまりクローザーからすれば、何も書いてないページと見えるのです。
その為、SEO対策としては非常に弱くなってしまいます。

htmlじゃだめなの？

もちろん王道であり、今もcssの進化は続いています。
何もダメではありません。
でもコンポーネントでの製作は非常に快適であり、魅力的です。
tailwindの快適さを知ってしまうと、htmlファイルとcssファイルの行き来が少々煩わしく感じるのは、私だけではないでしょう。
クラス名だけ違う、繰り返し同じ内容のcssを書いてしまったときのなんとも言えない無駄をした感も味わう事がなくなります。

結論

Next.jsを使う人は、あらかじめ使うサーバーをvercelにする。ロリポップやxserverは使わないと決めてください。
使わないようにする、ではありません。検討すらしてはいけないのです。

１から作りなおす事になりますよ。