Next.jsのデプロイをXserverでやったら禿げた件について

はじめに

初めまして。私は、2023年４月からエンジニアになりました「たくちゃん」と申します。そんな駆け出しエンジニアが実際にNext.jsを触って陥った体験談を今回の記事で話させていただければと思います！

絶望への階段「１段目」

私は、正式にエンジニアになる前までは、独学でNext.jsを学習しておりました。その経験からとある案件で、ホームページを作成することとなりました。その時の開発環境は下記のとおりです。

開発環境

Next.js(フロントエンド) + WordPress（バックエンド）+ Xserver(デプロイ先)

・・・・・・！？！？！？！？！？！？！？！？！？！？！？！？！？！？！？！？！？！？

察しの良い方ならもうお気づきですよね。Vercelはどこいったん？ってなりますよね。。。

そうです。これがまず絶望への階段「１段目」です。
あ！APIは GraphQLで行ってます！！！

絶望への階段「2段目」

無知な私は何もしらず、「１段目」で記述した開発環境で突き進んでおりました。そんな私が最初にぶち当たった壁は、テスト環境への反映です。Vercelを使う場合は、GitHubと連携させてデプロイボタンをポチっとするだけで良いのですが、Xserverにデプロイはそうもいきません。とんだじゃじゃ馬だったのです。ChatGPTや様々な記事を参考にすることで何とかテスト環境へ反映させることができました。

手順

1.package.jsonを編集

 "build": "next build && next export",

buildとexport２回コマンド打つのめんどくさいので、変えます笑

2.yarn buildを実行すると、outディレクトリが作成される。

3. outディレクトリの中に.htaccessファイルを作成

RewriteEngine On
RewriteBase /hoge/
# /hoge/から始まるURLに対する特別なルール
RewriteRule ^hoge/(.*)$ $1 [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ $1.html [L,QSA]

詳細：

1. RewriteEngine On（多分いらないかも）

   RewriteEngine Onという指令は、URLリライト機能を有効にするためのもので、.htaccessファイルまたはhttpd.confファイルに追加することで、URLリライトのルール（RewriteRuleやRewriteCond）を適用することが可能になります。

   逆にRewriteEngine Offと指定すれば、URLリライト機能を無効にします。

2. RewriteBase /hoge/
   RewriteBaseはリライトのURLベース（根本となるパス）を設定します。ここでは、リライトするURLが/hoge/から始まることを定義しています。

3. RewriteRule ^hoge/(.*)$ $1 [L]
   /hoge/"を表示しないという指示です。例えば、サイトの「demo」ページのURLが"/hoge/demo"だとしたら、この設定によりユーザーには"/demo"とだけ表示されます。

4. RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

   これらの行はリライトの条件（RewriteCond）を設定します。ここでは2つの条件が設定されています。"%{REQUEST_FILENAME} !-f"はリクエストされたファイルが実際に存在しない場合、"%{REQUEST_FILENAME} !-d"はリクエストされたディレクトリが実際に存在しない場合に条件がマッチします。

5. RewriteRule ^(.*)$ $1.html [L,QSA]

   最後のルールは、任意のパス(.*)に.html拡張子を追加します。 [L]フラグは、他のルールが処理される前にリライトプロセスを停止することを指示します。それにより、無限ループを防ぎます。[QSA]フラグ(Query String Append)は、既存のクエリストリングを新しいURLに追加することを指示します。

4.next.configに下記を追加

const nextConfig={}の中に下記をぶっこんじゃってください！！！！

assetPrefix: process.env.NODE_ENV === "production" ? "/hoge/" : "",

説明：

• assetPrefix: process.env.NODE_ENV === "production" ? "/hoge/" : "",

  assetPrefixは、プロジェクトがCDNを使用したり、ドキュメントルート以外のパスから静的リソースを配信する場合に使用される。（簡単に言うとパスを合わせる）
  process.env.NODE_ENV === "production" ? "/hoge/" : ""の部分は、アプリケーションがproductionモードで実行されている場合（制作環境でのビルドが行われている場合）、assetPrefixを/hoge/にする。開発環境または他の場合では、assetPrefixは空の文字列に設定されます。

まあ、パスが合わないから合わせるためのコードっていう感じです！！！

5.outディレクトリの中身をXserverのテスト用ディレクトリ直下に入れる。

next.configの中が編集できたら、最後に公開用ディレクトリにぶっ込んで完了です！！！！！

以上がXserverにデプロイの流れとなります！

絶望への階段「３段目」

私は、前述した「手順」を乗り越えて気分はとても爽快でした。気分はウハウハです。APIでデータも取れて、表示も出来て完成までもう少しでした！
しかし、完成を目の前にして大きな壁が存在しました。それは「SEO対策」です。SEO対策が何なのかは、最後の引用部分にURLを貼ります。
この時の僕の気持ちは、気になる女子に優しくされて、脈あり！！！！！って思った矢先に他の男の人へ連絡を取るための手段とされたような感覚です。。。過去の経験と同じ気持ちでした。
おっと、この話はここまでにしておきます。話を戻すと。。。。

そもそも今回の案件の大まかな詳細は下記のとおりです。

1.WordPressの管理画面からお知らせ等を自由に投稿したい。
2.SEO対策を行い、検索エンジンに最新の情報で引っ掛かるようにしたい。
3.保守はなく完全売り切り
4.サーバーはXserverのみ

元々は、 getServerSidePropsやgetStaticPropsを使用してSSR・SSGを検討しておりましたが、「保守はなく完全売り切り」「サーバーはXserverのみ」という条件からgetServerSideProps・getStaticPropsを使うのは難しいと感じました。（現時点では、Xserverでこれらを解決できる方法が分かりませんでした。もしあればご教授お願いしたいです。。。。。）
　また、上記が難しいとなった今、管理画面から情報を更新するとなると、ユーザーがページ遷移をしたタイミングでWordPressから情報をAPIで取得するためのjavaScriptの処理が走るためCSRとなります。
CSRでは、実際のコンテンツがHTMLに含まれていないため、クローラーが空のページを見ることになります。javaScriptが実行されてコンテンツが動的に生成されますが、検索エンジンのクローラーは待たずにページを去ることがあるため、コンテンツが適切に見られない可能性があります。SEO情報を動的に変更するとなると、GitHubActionsを使うしか方法がないと感じました。（他にもあるかも。。。）
しかし、ここまでくるとNext.jsを使う旨みがなくなってしまいます。Next.jsを使うにはVercelと
基本セットになるかなというところでございます。一応CSRやSSG等に関する情報は、引用欄に記載しておりますので、是非見てみてください。

最後に

結果として、WordPress一本で開発することとなりました。案件でNext.jsを使うこととなった背景としては、元々はWordPressで行う予定でしたが、様々な要因がありNext.jsで開発する流れとなりました。私は今回の案件を通して、まず最初にNext.jsの特徴であったりだとか技術選定および調査等をしっかり行うべきだと強く実感いたしました。Next.jsはVercelが作ったフレームワークであり、そりゃあ使用上Next.jsとVercelが強く紐づきますよね。勿論サーバーをVercel以外で実現するのは可能ではあります。しかし、Next.jsの強みを一番活かせるのは現状Vercelが断トツだと思います。もし私と同じような境遇にいる方は、Vercelを検討してみてください！

しかし今回学んだことで、私は一つ強くなりました！「絶望」への階段を上ったことで、「成功」への階段を登ることが出来た気がします！！！

また、記事は書いていきたいと思いますので、今後ともよろしくお願いします！
記事を読んでいただいた方ありがとうございました！

引用

https://www.willgate.co.jp/promonista/seo-how-to-start-it/
https://zenn.dev/akino/articles/78479998efef55
https://dev-harry-next.com/seo/nextjs-ssr-ssg