Next.js でブログを作ろうとした
2020/02/10 01:13:062020/05/18 23:27:26
ロゴがカッケー
結果から言うと挫折してNuxt.js + vue-tsx-support で書き直すこととなったのだが、忘れないうちに書いておきたい
Next.js のいいところ
- tsx サポートが標準
- 当たり前で、React ですこれは
- けど実際 Vue より体験いいと思っている 個人的には
Next.js の微妙なところ
- 新しく SSG のために策定中の概念で unstable_getStaticProps というのがある
- 不安定なので unstable_ とついています
- この issue で議論されています
- これがいままでの Next と違って、最初だけ SSR するんじゃなくて、ページによってはユーザーに渡るタイミングで全部データ渡しちゃえよというやつ
- いままでの: getInitialProps
- 初回アクセス分のみサーバサイドでレンダしちゃって、遷移後はクライアントサイドに処理を続行させる
- あたらしいの: getStaticProps
- これが存在するページはこれを用いて全部サーバサイドレンダリングする
- これらの解釈あってるかどうか心配、間違ってたら Twitter までご一報ください
- Nuxt.js でいう asyncData？
- 便利で、便利なんですが
- 受け取れる値は slug のみ（ページのパスのみ、querystring は受け取れない）
- 前は受け取れたらしいが、開発サーバのみで実際は受け取れないのでバグ扱いで開発サーバにおいても無効化されたらしい
- ページネーションに slug を用いる必要が出てきてだるい
- ここで 404 / 500 等異常系を throw / return できる概念がない
- これ調査甘い感じああるので
- と言うか全然情報が出てこない 2020/02/10 現在
- エラーが起きても props として null を返してレンダリング時に post === null とかで 404 ページをレンダリングするしかない
- こうやってレンダリングされたページは 200 で帰ってるので検索エンジン側のソフト404判定に期待するしかなく、ssr の旨味が薄れる
- また、now でサーブするときは slug でレンダリングするページを事前に明示しておく必要がある
- unstable_getStaticPath と言うのを使います
- これがないと now にデプロイした後 slug 生成部で 404 吐かれてアレーとなります
- notion-blog もなんですがおそらくデプロイ時に存在した記事しかレンダリング対象にならない
- glitch などにおけば yarn start の内容が走るので動的にレンダリングしてくれますが、相性が悪いです
- しばらく経ったら .next の内容も消されてエラーページになっちゃうんじゃないか
- また、今回は API 参照の都合で、記事名である日本語文がパスに含まれていたのですが、パス長すぎと fs に怒られて生成に失敗したので、この時点で nextjs を止める決意をしました
と、自分にとってはそこそこ手間暇かけた上に散々な結果だった開発だったのですが、実際開発体験はそう悪くなかったですし（後半除く）用途によっては全然ありだと思います
追記
- 2020/05/18: Next.jsがいろいろ成熟してきたらしいので、参考になればとソースコードを公開しました。
Generated from
Next.js でブログを作ろうとした
Caramelize - Made withCaramelizeand / Privacy