はじめに

S3 + CloudFront + Route 53 + Next.jsでブログを作ったのですが、
作っている途中で詰まったことをまとめました。

Next.js関連

・App routerではnpm run exportが不要らしい。ChatGPTがやたらとこのコマンドを進めてきて混乱した。頑張って実行しようとしたのに……

・リンクで日本語を扱う場合はエンコードが必要。404エラーで焦るぞ。

・mdxで作った記事ページの改行コードをいちいちLFにしないとビルド通らないのが地味にめんどくさい。

・Next.js のバージョンによりLinkタグの中に直接文字列を書くとエラーになるっぽい。

・内部リンクするときは末尾に/を付けないとgoogle search consoleのインデックス登録で重複ページ扱いになる。ブラウザで確認すると、/なしのページに飛ぼうとすると勝手に/ありのページにリダイレクトされてた。（なんで？）

・タグページとか、記事一覧のページは頻繁に更新されるため、これをインデックス登録されると、検索で出た説明とちょっと違う内容のページを出すことになって検索から入ってきた人が混乱する。そのためタグページとか、記事一覧のページはインデックス登録されないように

<meta name="robots" content="noindex, follow">

をつけると無難な気がする。ｼﾗﾝｹﾄﾞ

・サブドメインwwwありのURLからサブドメイン無しのURLにリダイレクトしたほうがSEO的にはいいらしい。ただAWSの設定がめっちゃめんどくさかった。（何がめんどくさかったかは忘れました。許してちょんまげ）

・将来的にドメインを取得する場合、S3のバケット名はドメイン名と同じにしておく。あんまり考えてなくて作り直してめんどくさかった。

・ap-northeast-3（大阪）で最初S3の静的ホスティングでブログを立ち上げようとしたが、大阪のサーバーはバックアップとか特殊な用途向けのサーバーらしく、ここでブログを作ろうとしたのに機能制限されてて、結局ap-northeast-1に移す羽目になった。

・Certificate Managerで証明書を発行するときにRoute 53でレコードを作成をやっておかないと「保留中の検証」からずっと変わらない。処理してんのかな？と思って一日放置しても変わってなくて悩んだ。

・Certificate Managerで証明書を取得するときに、us-east-1（米国バージニア北部）を選んで取得しないと、CloudFrontでカスタム証明書を設定しようとしたときに選択できなくて焦る。罠やん

・CloudFrontのキャッシュを削除しないと、サーバーに変更したコードをあげてもすぐに反映されない。

・Google search consoleで設定するTXTレコードはRoute 53で登録しないといけないらしい。最初お名前ドットコムで設定してたらいつまでも設定完了せず悩んだ。

・お名前ドットコムでDNS設定してたらダークパターンのGUIで勝手に有料オプション課金されて憤慨！すぐさまお問い合わせしてごねたら返金してもらえた。

色々と詰まったことはありましたが、
AWSは安くて助かるし、
WordPressで作るよりも自作したほうがカスタマイズ性あって個人的には楽しかったです。

作ったブログはこちらになります。
https://bamba-news.com/