basyura's blog

あしたになったらほんきだす。

Next.js 入門 1

ファイル構成が好みだったのでチュートリアルを進めていたのだけど、Vercel 以外にデプロイする方法がよく分からなくて手が止まってしまったので調査。なるべく golang を使って動かしたいのでその路線で調べてみる。

ポイント

  • next export を使うと html に出力される
  • リクエストパスのファイルがない場合は .html でファイルを探し直して返す。

embed を使うパターンがいくつかヒットしたけど、単純にファイルを読んで返すパターンでやりたかったので上記サイトを参考にさせて頂きつつ自作。

$ npx create-next-app helloworld
$ cd helloworld
$ npm i
$ npm run build
$ npx next export
$ mv out ../public
$ go run main_nextjs_server.go 

Image タグを使っていると

Error: Image Optimization using Next.js' default loader is not compatible with `next export`.

と出て失敗するので、build の前に削除するか通常の html タグに書き換えるかで対応する。next チュートリアルのブログサンプルは動いたけど特に url パラメータから web の API にリクエストを投げて描画するパターンが動くのかがポイントなので継続して調査する。

※ 久しぶりに iPad に logicool のハードウェアキーボードをさして記事を書いてみたけど発狂するレベルで効率悪い。iPhone でフリック入力使う方がはかどるんじゃないかと思ってしまう。英数キーで IME をオフにしたいのだけどちょうどいいところに space キーがあって毎回誤爆してしまう。ここの誤爆を抑えられるだけでだいぶ違うと思う。ctrl+space での切り替えに慣れた方がいいのか。