Next.jsをvercelにデプロイする

VercelNext.js プロジェクトをデプロイします。

公式で色々なフレームワーク向けの紹介をしているのでバニラ状態からやるのは簡単そうですが、色々と弄った後なので難しいんじゃないかと危惧してました。

実際に使ってみると「なんでもっと早く使わなかったんだ」って思うほど便利だったので、一連の流れを覚書きしておきます。

続きを読む Next.jsをvercelにデプロイする

Next.jsでマークダウンを使ってコンテンツを分離する

Next.js + Material UI でコンテンツ部分にマークダウンを使うことを考えます。

メタデータ(Front-matter)を含むやつは今回は対象外です。

続きを読む Next.jsでマークダウンを使ってコンテンツを分離する

GLSLファイルをimportする

Next.jsgl-reactを使ってGLSLを使っていますが、文字列直書きなのが気になり始めたので.frag.vertなどのGLSLファイルに分けて管理しようと思います。

 

具体的にはwebpackのローダーを追加して読み込めるようにした覚書き。

他のモジュールバンドラでも文字列読み込みはあると思いますが、大体の環境ではBabelでトランスパイルしてwebpackでバンドルしてると思います(主観)。

続きを読む GLSLファイルをimportする

【React】Nextでace.jsを使ってエディタ表示する

gl-reactを使ってGLSLでリアルタイムな画像処理がしたい。

ace.jsという有名なコードエディタがあるので使いたいですが、Reactでそのまま使うとなると難しそう。

バージョンは最新ではないもののReactコンポーネント化したreact-aceというものがあったので、その使い方とnext.jsで使う時の注意を覚書き。

続きを読む 【React】Nextでace.jsを使ってエディタ表示する

Next.js with Material-UIでスタイルが崩れる

Next.jsMaterial-UIの組み合わせでビルドすると予期せぬ表示ずれがあった。

現象としてはnext.jsのPHASE_PRODUCTION_BUILDgetInitialProps()のあるページで初回読み込みをするとmakeStylesによるスタイルが崩れる。

ErrorやWarningはないし上記以外のアクセスではスタイル崩れもない。

結構複雑な問題だったので要点をまとめながら解決を図ります。

環境:next: 9.1.7material-ui: 4.8.3react: 16.12.0カスタムサーバー express: ^4.17.1

続きを読む Next.js with Material-UIでスタイルが崩れる

Next.jsプロジェクトの公開手順

Next.jsで作ったアプリを公開、SSL対応、永続化するためのメモ。

nowじゃなくて普通に自前のLinuxサーバーに載せることを考えます。

気持ち的にはNext.jsプロジェクトの初期設定の続きです。

続きを読む Next.jsプロジェクトの公開手順

Next.jsプロジェクトの初期設定

next.jsはnowと合わせると秒単位でWEBアプリを公開できるような超速フレームワークですが、それなりの規模のものを作ろうと思うと色々設定が必要です。

大分慣れてきたので振り返りもかねてプロジェクト初期設定の備忘録。

プロジェクト作成からGit設定、各種コンフィグ類の設定、必須ライブラリの導入とカスタムページの用意まで。

続きを読む Next.jsプロジェクトの初期設定

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で外部ライブラリのスタイルシート適応

Next.jsのポート番号設定

Next.jsは基本ポート:3000で起動します。

これを定義1つで起動ポートから、プログラムからの参照(自身のAPIアクセスなどで)までするためのメモ。

続きを読む Next.jsのポート番号設定

【React】constructor内でContext APIを使用する

Next.jsを使っていてgetInitialProps()内でContext APIを使いたかったけど、Reactライフサイクル内にないため使えなかった。

じゃあpropsを経由してconstructor()内でコンテクストに入れようとしたら中身にアクセスできなかった。

componentDidMount()でも悪くはないけどrender()前に処理したいので、ドキュメントにない方法で使ってみます。

続きを読む 【React】constructor内でContext APIを使用する