Next.js とは JavaScript のライブラリである React のフレームワークです。
SSR(Server Side Rendering)やSSG(Static Site Generator)にも対応しています。
ReactにFont Awesomeを組み込む方法
ReactにFont Awesomeを組み込んで表示させるにはreact-fontawesome を使います。react-fontawesomeはnpmコマンドなどでインストールし利用します。
Next.jsでnext.config.jsを使って環境変数をあつかう方法
Next.jsにはシステム内で利用できる環境変数の設定をnext.config.jsというファイルを使って行えます。next.config.js内ではNext.jsが起動されたモード(phase)を知ることができるので、デバッグ時、本番環境時などで環境変数を切り替えることもできます。
Material UIコンポーネントのStyleをオーバライドし活用する方法
Material UIコンポーネントのStyle をオーバライドするにはcreateMuiThemeを使ってオーバライドし、そのStyleを適応するにはMuiThemeProviderを使うと簡単に共通化したStyleの Material UI コンポーネントを作成することができます。
ReactコンポーネントのPropsにデフォルト値を設定するdefaultPropsの使い方
defaultPropsを使えばロードされる側のReactコンポーネントでデフォルト値を設定できるので、万が一渡されなかった場合でも描画を正常に行うことができます。
Next.jsで呼び出されたURLパスを取得する方法(Functionコンポーネント編)
Next.jsで呼び出されたURLパスを取得するにはuseRouterオブジェクトを使います。
Reactで1つのコンポーネントから複数のDOM要素を返す方法
Reactの1 つのコンポネントから複数のDOM要素を返したい時はReact.Fragmentタグを使えば警告の出ず、かつ余分なdivタグなどを使うこと無いJSXを書くことができます。
Next.jsにMaterial UIを組み込んでReactで使う方法
Googleが提唱するマテリアルデザインをベースに開発された、コンポーネントライブラリMaterial-UIを使えば簡単にサイトをマテリアルデザインに対応することができます。React の相性も良く、普通のHTMLタグのようにMaterial-UIコンポーネントを呼び出すだけで使うことができます。
Next.jsでReactを使った開発環境を作成する方法
Reactを利用してアプリケーションを作成する環境を作るには「npx create-react-app」もしくは「npx create-next-app 」コマンドを実行するだけで簡単に準備することができます。
Next.jsで静的HTMLを出力(build)する方法
Next.jsでSSR(Server Side Rendering)するファイルを静的なHTMLに変換して出力する方法です。静的HTMLを出力するにはNext.jsのbuild コマンドを実行します。
Next.jsのポート番号を変更する方法
Next.jsでは起動時のポート番号が3000に設定されています。これを他のポート番号に変更するには-pオプションを付加して起動します。
Next.jsでReactをSSR(Server Side Rendering)する
Next.jsを使ってReactのコンポーネントをSSR(Server Side Rendering)して表示してみます。