前回 sitemap.xml を作成しましたが、Vercel（旧 Zeit / now）でうまく動かなかったので原因と解決方法を追記しておきます。
自サーバーで動かす分には問題ないです。
カテゴリー: Next
Next.jsでsitemap.xmlを用意する
Next.js でサイトマップを作る方法を探してみたけど、情報が全然出てこなかったので見つけた情報をつなぎ合わせてサイトマップを自動作成します。
sitemap.xml（サイトマップ）は検索エンジンにサイト内のクロールするWebページを教えるためのファイルです。なくても検索結果に出ないわけではないですが、現在だとあるに越したことはないくらいの印象。
Next.js＋gray-matterのススメ
Gatsby だと時折見かける gray-matter ですが、Next.js でも非常に役立つので使い方と利点を書いておきます。
マークダウンでコンテンツを分けることを合わせて pages/ の負担を減らせます。
Next.jsで外部APIを叩く３つのパターン
react-dropzoneの紹介と実装サンプル
Reactで使えるドラッグドロップのライブラリが非常に良かったのでメモ。
シンプルに使える上にできることが多い。
フレームワークとして Next.js と Material UI を使っています。
サンプルコードを少し変えつつ動かしてみます。
Next.jsをvercelにデプロイする
Vercel に Next.js プロジェクトをデプロイします。
公式で色々なフレームワーク向けの紹介をしているのでバニラ状態からやるのは簡単そうですが、色々と弄った後なので難しいんじゃないかと危惧してました。
実際に使ってみると「なんでもっと早く使わなかったんだ」って思うほど便利だったので、一連の流れを覚書きしておきます。
Next.jsでマークダウンを使ってコンテンツを分離する
Next.js + Material UI でコンテンツ部分にマークダウンを使うことを考えます。
メタデータ（Front-matter）を含むやつは今回は対象外です。
GLSLファイルをimportする
Next.jsでgl-reactを使ってGLSLを使っていますが、文字列直書きなのが気になり始めたので.fragや.vertなどのGLSLファイルに分けて管理しようと思います。
具体的にはwebpackのローダーを追加して読み込めるようにした覚書き。
他のモジュールバンドラでも文字列読み込みはあると思いますが、大体の環境ではBabelでトランスパイルしてwebpackでバンドルしてると思います（主観）。
【React】Nextでace.jsを使ってエディタ表示する
Next.js with Material-UIでスタイルが崩れる
Next.jsとMaterial-UIの組み合わせでビルドすると予期せぬ表示ずれがあった。
現象としてはnext.jsのPHASE_PRODUCTION_BUILDでgetInitialProps()のあるページで初回読み込みをするとmakeStylesによるスタイルが崩れる。
ErrorやWarningはないし上記以外のアクセスではスタイル崩れもない。
結構複雑な問題だったので要点をまとめながら解決を図ります。
環境：next: 9.1.7material-ui: 4.8.3react: 16.12.0カスタムサーバー express: ^4.17.1