Vercel に Next.js プロジェクトをデプロイします。
公式で色々なフレームワーク向けの紹介をしているのでバニラ状態からやるのは簡単そうですが、色々と弄った後なので難しいんじゃないかと危惧してました。
実際に使ってみると「なんでもっと早く使わなかったんだ」って思うほど便利だったので、一連の流れを覚書きしておきます。
カテゴリー: React
Next.jsでマークダウンを使ってコンテンツを分離する
Next.js + Material UI でコンテンツ部分にマークダウンを使うことを考えます。
メタデータ（Front-matter）を含むやつは今回は対象外です。
【React Native】ボタンなどのUIにこだわる
React Native でボタンなどのユーザインターフェースを作るときは正方形か角丸、
円形くらいだったのですが、スライダーのつまみにひし形を使った時にもっといろんな形を採用してもいいんじゃないかと思いました。
ちょっと好きな形を作る練習してみましょう。
【React Native】margin等の上書きと優先順位
React Native でライブラリを使っていて style の上書きがうまくできないことがあります。配列によるスタイル指定が機能しなかったり。
今回は margin の上書きが出来なかったことから色々試してみたという内容です。
バニラで書いてると気づきやすいですが、フレームワーク＋ライブラリの状態だとハマりやすいので気を付けましょう。
【CMS】Contentfulでコンテンツ管理
「GatsbyJSとNetlify CMSでブログを作る」で静的ファイルとHeadless CMSで情報管理できないかと考えましたが、さらにホスティングとコンテンツを分離を考える。
Contentfulでコンテンツ管理をしてみます。
GatsbyJSとNetlify CMSでブログを作る
GatsbyはReact用の非常に人気の高い静的サイトジェネレータです。
Next.js(SSR寄り)を使っているとどうしてもGatsbyも試してみたくなります。
スター数ではNext.jsの方が多いですがUsed byで見るとGatsbyの方が倍以上使われてるんですよね。
WordPressの代替を探していることもあり、GatsbyとNetlify CMSで管理するブログを試してみます。
用語・略語：CMS：コンテンツマネジメントシステムSSG：静的サイトジェネレータ
GLSLファイルをimportする
Next.jsでgl-reactを使ってGLSLを使っていますが、文字列直書きなのが気になり始めたので.fragや.vertなどのGLSLファイルに分けて管理しようと思います。
具体的にはwebpackのローダーを追加して読み込めるようにした覚書き。
他のモジュールバンドラでも文字列読み込みはあると思いますが、大体の環境ではBabelでトランスパイルしてwebpackでバンドルしてると思います（主観）。
【React】Nextでace.jsを使ってエディタ表示する
ReactでGoogle Mapを埋め込む
前回のTwitter埋め込みのようにGoogle MapをReactで埋め込む方法を考えます。
同じようにhttps://maps.googleapis.com/maps/api/js?key=XXXXXを読み込むことでAPI(google.maps.XXXなど)が使えるようになります。
ただし今回はかなりDOMをいじる必要があるので１から作るのはかなり面倒です。
ReactでTwitterのタイムラインなどを埋め込む
React(Next.js)でTwitterの埋め込みを行いたい。
主にタイムラインが対象ですが、一応何でも埋め込めるようにしておきます。
ライブラリを使ったり使わなかったり。