Next.jsのexport機能でSSG（Static Site Generation）して、Firebaseでホスティングします。
思い付きをサクッと見れる状態に持っていけるので便利です。
用途的にはGatsbyの方が向いていますが、慣れの問題からNext.jsを使います。
また静的ファイルの配信を目的にしているのでFirebaseを使いますが、Next.jsだと普通は Vercel を使うのが楽でいいと思います。
カテゴリー: Next
Next.js＋Vercelでsitemap.xmlを用意する
前回 sitemap.xml を作成しましたが、Vercel（旧 Zeit / now）でうまく動かなかったので原因と解決方法を追記しておきます。
自サーバーで動かす分には問題ないです。
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でバンドルしてると思います（主観）。
