bunchan blog

bunchan blog

next.jsで作り変えたblogをfirebase hostingでいろいろつまった

このエントリーをはてなブックマークに追加

今ままでgo langのhugoを使って静的サイトを生成していたけど
next.jsを使って作り変えてみようと思って挑戦して詰まったことメモ

ブログを作る

公式サイトのチュートリアル
基本的には公式サイトのチュートリアルをやってブログを作っていきました
そして最終的にはfirebaseのhostingを使って公開するところまでやりました

静的なファイルを生成する

package.jsonにexportを追加しました

"scripts": {
   "dev": "next dev",
   "build": "next build",
   "start": "next start",
   "export": "next export"
 },

next exportを使うことでoutディレクトリに静的なページが生成されます
ところどころ端折っていますがだいたいこんな感じになります posts以下にあるのがmarkdownで書いたものをhtmlに変換されたものですね

out
├── 404.html
├── index.html
├── posts
│   ├── app-image.html
│   ├── chromium-2020-01-19.html
│   ├── draw-pic-2020-01-19.html
│   ├── ethereum-phishing-2020-02-11.html
│   ├── git-hub-actions.html
│   ├── gostnote-2020-02-26.html
│   ├── guitar-2020-05-21.html
│   ├── half-close-2020-01-30.html
│   ├── health-check-2019-12-30.html
│   ├── k8s-2020-01-03.html
│   ├── kimetsu-2020-03-01.html
│   ├── kube-config.html
│   ├── kube-contexts.html
│   ├── s3-2020-01-06.html
│   └── video-2020-03-01.html
└── vercel.svg

このあとfirebase deployしてoutをhostingしたのですが 各postのリンクをクリックすると404になってしまいました 拡張子として.htmlをつけないとアクセスできないようになってしまいました

これだとlocalで実行したときと乖離してしまってやりづらいのでなんかいい方法があるのかと思って next.jsのコードをいじくり回してましたが

firebase.jsonでhtml拡張子を制御できるみたいでした

.html拡張牛を制御する

{
 "hosting": {
   "public": "out",
   "ignore": [
     "firebase.json",
     "**/.*",
     "**/node_modules/**"
   ],
   "cleanUrls": true, 
   "trailingSlash": true
 }
}

こうすることでuploadしたファイルのURLから.html拡張子を自動的に削除してくれます
"cleanUrls": trueの部分が該当箇所です

Solving “/_next/static/…/pages/***.js 404 Not Found”

一旦html拡張子の件は開発したのですがconsoleに大量のerrorが出ているのを発見しました
Solving “/_next/static/…/pages/***.js 404 Not Found”という感じのerrorがたくさん出ています LoudNoises このサイトを参考にpostのページのlink部分を以下のように書き換えると解決することができました。

<Link href={`/posts/[id]?uri=${id}`} as={`/posts/${id}`}>