Next.jsで作ったアプリを公開、SSL対応、永続化するためのメモ。
nowじゃなくて普通に自前のLinuxサーバーに載せることを考えます。
気持ち的にはNext.jsプロジェクトの初期設定の続きです。
カテゴリー: Next
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()前に処理したいので、ドキュメントにない方法で使ってみます。
Next.jsのライフサイクルと外部APIのタイミング
簡単にReactを使ったSSRができるNext.jsを使っていて外部APIをfetchするときに色々戸惑ったので覚書き。
公式ドキュメントが結構偏っているのと日本語情報も少ないのでわりと手探りでどうすればいいか考えていきます。
next 9.1.7 react 16.12.0