Reactアプリの続きです。前回はアスペクト比ジェネレーターを作りました。 今回もデザイン系のアプリで配色ジェネレーターを作りました！HSBモードでメインカラー、アクセントカラー、ベースカラーの3色を割り出せる配色ジェネレーターです。そのソースコー…

Reactアプリの続きです。前回までは「ジャンプ率ジェネレーター」をNext.jsで作り直していました。今回は「アスペクト比ジェネレーター」に取り組みます。以前こちらでまとめた主要なアスペクト比による画像サイズのCSS数値を調べられるツールにります。それ…

ジャンプ率ジェネレーターの続きです。以前、React環境でいったん完成しましたが、この時実現できなかったページごとのOGP設定を実現すべく、前回作成したNextスターターキットで再度作り直しました。これによってReact環境とNext環境ではCSS in JS(Styled-c…

Nextの続きです。前回はNextスターターキットのコンポーネント&モジュールについてまとめました。今回は最終回、ページファイル編になります。Next.jsの複数ページ設定（/pagesフォルダ）を使った内容になります。それではいきましょう！

Nextの続きです。前回はNextスターターキットの全体設定編でした。今回はコンポーネントやモジュールの設定をまとめていきます。Reactアプリ作成でよく使う基本的な機能を組み入れました。それではいきましょう！

Nextの続きです。前回はCreate Next App + TypeScript + CSS in JS環境を作りました。今回は以前作ったReactスターターキットをNext.jsで作り直し、挫折していたOGP問題を解決しました！今回は全体にわたる環境設定編です。それではいきましょう！

Next.jsの続きです。前回はNext.jsのリンク設定（Link）、共通コンポーネント化、headタグ設定(Head）を行いました。今回はNext.jsが用意しているパッケージCreate Next Appを使ってみます。さらにTypeScriptとCSS in JS（styled-components）もインストール…

Next.jsの続きです。前回はNext.jsアプリをVercelにデプロイしました。今回はLinkによるリンク設定、ヘッダー・フッターなどの共通部分のコンポーネント化、Headコンポーネントによるheadタグ設定をそれではいきましょう！

Next.jsの続きです。前回はNext.jsを事始めでインストール、ページ設定、表示まで行いました。今回はクラウド上にデプロイします。Reactと同じくGitHub Pagesにデプロイしたかったのですが検討の結果、Vercelがシンプルに設定できました。それではいきましょ…

Reactの続きです。前回はReactのSPA環境で動的OGPを設定したがうまくいかず、Topページのみに静的OGPを設定しました。それで気になったのがNext.js。SSRだとサーバ上にNode環境が必要だがSSGならローカル環境で完結するかもしれない。それではいきましょう！