Next.js とvercelでサイト作ってみた。
Electron,ExtensionとかれこれずっとReactで開発してきたのでそろそろNext.jsでサイトでも作ってみたいなと思ったところだったので簡単なサイトを作ってみました。勿論おおよそ普段のReactと同じような感じで開発できたのですが少し戸惑った部分もあったので備忘録としてまとめました。本当にメモ書き程度の内容です。サイトはこちら。
Next.jsの導入
チュートリアル的なものが書かれたサイトで他にもっと詳しいサイトがあるのでここでは簡単にしか書きません。まずはインストールです。
これだけでベースとなるパッケージがインストールされます。ただし今回これに加えてtypescriptとstyled-componentsの環境も構築します。styled-componentsに関してはstyled-componentsと@types/styled-componentsの型データをインストールするだけで使えました。しかし問題はtypescriptそのものです。tsconfigの設定等当初よくわかりませんでしたが結論から言うと簡単できました。プロジェクトフォルダーに空のts.config.jsonを作って以下のパッケージをインストール。
その後にnpm run devでビルド。すると以下のような設定が自動的にts.config.jsonに書き込まれます。
参考 https://zenn.dev/yukito0616/articles/fa41ea2d0cb308
ここまで順調に動いているように見えたのですがどうもProp className did not matchと出ている。おそらくcss,styled-components関係でエラーが出ているようである。公式のサンプルを見るとどうもbabelプラグインが別途必要なようなのでまずbabel-plugin-styled-components”をインストール。その後以下の内容を.babelrcに書き込む。
さらにsvgを取り込む時に型データがany型としか認識されなかったので修正。svgrのインストール。さらにnext.config.js に対して以下の内容を書き込む。
さらにindex.d.tsの中にsvgの型を記入。
しかしこれでも改善しないのでnode-modules/next/image-types/global.d.tsの中でsvgがデフォルトでany型でインポートされるようになっているのでこれを削除。
これでtypescript関係は問題なく動くようになりました。
参考 Next.js + TypeScriptでimportしたSVGの型がanyになってしまう
break point レスポンシブ対応
何気なくstyled-componentsを使用したレスポンシブ対応が初めてだったので悩みました。
悩んだ末にstyled-media-queryを使用することに。デフォルトでブレークポイントが設定されている（カスタマイズ可）、尚且つ簡単い使用できるのでとりあえず当分はこれを使おうかなと。
最後にvercelに登録、アップして完了です。Githubとの連携も簡単だったのでサーバーサイドの知識がなくてもSEOも意識したReactを使ったサイト構築が可能です。ただし今回はDBやAPIを使用したようなサイトではなく殆ど趣味的なレイアウトと装飾のサイトで完結しています。もっといろいろやってみたいですがドメインとか取得すると支出も発生するので何を作るかというのがそもそもの問題か。