Vercel に Next.js プロジェクトをデプロイします。
公式で色々なフレームワーク向けの紹介をしているのでバニラ状態からやるのは簡単そうですが、色々と弄った後なので難しいんじゃないかと危惧してました。
実際に使ってみると「なんでもっと早く使わなかったんだ」って思うほど便利だったので、一連の流れを覚書きしておきます。
カテゴリー: Next
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
Next.jsプロジェクトの公開手順
Next.jsで作ったアプリを公開、SSL対応、永続化するためのメモ。
nowじゃなくて普通に自前のLinuxサーバーに載せることを考えます。
気持ち的にはNext.jsプロジェクトの初期設定の続きです。
Next.jsプロジェクトの初期設定
next.jsはnowと合わせると秒単位でWEBアプリを公開できるような超速フレームワークですが、それなりの規模のものを作ろうと思うと色々設定が必要です。
大分慣れてきたので振り返りもかねてプロジェクト初期設定の備忘録。
プロジェクト作成からGit設定、各種コンフィグ類の設定、必須ライブラリの導入とカスタムページの用意まで。
Next.jsで外部ライブラリのスタイルシート適応
ReactでUIコンポーネントを使う時にMaterial-UIは一番有力な選択肢だと思います。
Next.jsでも同じように使いたいところですが、サーバーサイドレンダリング(SSR)時にcss modulesによるクラス名付与が合わなくなる問題が起きました。
index.js:1 Warning: Prop className did not match. Server: “MuiBox-root…これによって一部スタイルが崩れてしまう。
devでの再コンパイルや内部遷移によって直ることもあるがproductionでも問題が起きるので使い物にならない状態なので対策します。
Next.jsのポート番号設定
【React】constructor内でContext APIを使用する
Next.jsを使っていてgetInitialProps()内でContext APIを使いたかったけど、Reactライフサイクル内にないため使えなかった。
じゃあpropsを経由してconstructor()内でコンテクストに入れようとしたら中身にアクセスできなかった。
componentDidMount()でも悪くはないけどrender()前に処理したいので、ドキュメントにない方法で使ってみます。