はてなブックマーク

概要 Next.jsへのMaterial UIの組み込みを行い、簡単に使ってみます。 前提 Next.jsの動作する環境は構築できているものとします。 また、Next.jsはTypeScriptが導入されていることを前提に記載します。 これから環境を作られる方（Windowsの方）は以下参考にしてください。 手順 Material UIとスタイリングエンジンのインストール プロジェクトフォルダ上でnpmかyarnコマンドを実行することで導入できます。 MaterialUIでは、スタイリングエンジンとして、デフォルトがEmotionとなっていますが、styled-componentsも選択できるようになっています。

概要 Next.jsに関する基礎知識を解説してみます。 Next.jsのメリット Server-side Rendering(SSR)のビルトイン 通常のReactアプリの場合、HTMLを表示すると<div id="root"></div>といったエントリポイントになるHTMLのみが表示されます。 Reactはクライアントサイドライブラリなので、全てのレンダリングはブラウザ上で行われるためです。 画面をリロードすると一瞬白いページが見えてちらつきが発生します。 また、SEOの観点では、検索エンジンは空のページのみを返してしまい検索エンジンに取り込まれない問題があります。 SSRを用いることで、サーバ側がそのURLの表示に対して生成されたHTMLをレスポンスすることができます。 Next.jsにはSSR機能が組み込まれています。 File-based Routing ReactではURLが切

この記事では Bundler (Ruby) や npm (JS)、Cargo (Rust)、vgo (Golang) 等のパッケージマネージャの依存関係解決における最大バージョン選択 (Maximal Version Selection) と最小バージョン選択 (Minimal Version Selection) [1] の違いについて説明します。また、それぞれの長所や短所、最大バージョン選択において現状発生している問題について書きます。 最大バージョン選択 (Maximal Version Selection) 最大バージョン選択は Bundler, npm 等をはじめとする多くのプログラミング言語のパッケージマネージャで採用されています。指定されたなかで最大の（＝最新の）バージョンを使います。 例） v1.0 以上のバージョンが指定されていて現在の最新バージョンが v1.1 の場合、