前回 sitemap.xml
を作成しましたが、Vercel
(旧 Zeit / now
)でうまく動かなかったので原因と解決方法を追記しておきます。
自サーバーで動かす分には問題ないです。
前回 sitemap.xml
を作成しましたが、Vercel
(旧 Zeit / now
)でうまく動かなかったので原因と解決方法を追記しておきます。
自サーバーで動かす分には問題ないです。
Next.js
でサイトマップを作る方法を探してみたけど、情報が全然出てこなかったので見つけた情報をつなぎ合わせてサイトマップを自動作成します。
sitemap.xml
(サイトマップ)は検索エンジンにサイト内のクロールするWebページを教えるためのファイルです。なくても検索結果に出ないわけではないですが、現在だとあるに越したことはないくらいの印象。
Gatsby
だと時折見かける gray-matter
ですが、Next.js
でも非常に役立つので使い方と利点を書いておきます。
マークダウンでコンテンツを分けることを合わせて pages/
の負担を減らせます。
Reactで使えるドラッグドロップのライブラリが非常に良かったのでメモ。
シンプルに使える上にできることが多い。
フレームワークとして Next.js
と Material UI
を使っています。
サンプルコードを少し変えつつ動かしてみます。
Vercel
に Next.js
プロジェクトをデプロイします。
公式で色々なフレームワーク向けの紹介をしているのでバニラ状態からやるのは簡単そうですが、色々と弄った後なので難しいんじゃないかと危惧してました。
実際に使ってみると「なんでもっと早く使わなかったんだ」って思うほど便利だったので、一連の流れを覚書きしておきます。
Next.js
+ Material UI
でコンテンツ部分にマークダウンを使うことを考えます。
メタデータ(Front-matter)を含むやつは今回は対象外です。
Next.js
でgl-react
を使ってGLSL
を使っていますが、文字列直書きなのが気になり始めたので.frag
や.vert
などのGLSL
ファイルに分けて管理しようと思います。
具体的にはwebpack
のローダーを追加して読み込めるようにした覚書き。
他のモジュールバンドラでも文字列読み込みはあると思いますが、大体の環境ではBabel
でトランスパイルしてwebpack
でバンドルしてると思います(主観)。
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