章 タイトル 学習内容 1 Create a Next.js App Next.jsアプリの作成方法 2 Navigate Between Pages Next.jsにおけるページ遷移方法など React.jsを拡張したNext.jsの<Link />タグなどを使うことでレスポンス向上できるなど 3 Assets, Metadata, and Css 画像やCSSの</link>…

5-1. Dynamic Routes 個々のブログページのURLはブログのデータに依存するようにしたいので、動的なルートを使用する 任意のページのURLがデータに依存する場合は、dynamic routesを導入する 学べること getStaticPathsを使用してdynamic routesでページを静…

用語 Pre-rendering 日本語にすれば、プリレンダリング、事前レンダリングかな？ 事前にレンダリングする、つまり、前もってHTMLを生成しておくこと。 Data Fetching 文字のまま。データをフェッチするという意味。 つまり、データを取り込む、どこかからデ…

タイトルの通りです。 発生状況 Next.jsにMUIを導入し、ResponsiveAppBarのサンプルコードをベースとして、AppBarのボタンにページ遷移用リンクを付与しようとした時に発生した。 補足: 正確にはボタンというよりレスポンシブデザインで画面が小さい場合に左…

Node.js Dockerfile作成 FROM node:16.16.0-alpine WORKDIR /usr/src/app RUN apk update && apk add bash CMD ["/bin/bash"] ビルド: 上で作成したDockerfileからイメージを作成する $ docker image build -t node_img:latest . $ docker images REPOSITOR…

-tオプション -tオプションを利用すると、イメージ名とタグ名を指定できる イメージ名はREPOSITORY列、タグ名はTAG列に表示される名前のこと $ docker images REPOSITORY TAG IMAGE ID CREATED SIZE -tオプションを指定しない場合、次のようにイメージ名とタ…

少し前から思っているこんなのあったらどうかなってやつ。走り書きメモなので適当です。 自分の知っている分野の外側を知ることって難しいと思っている。 まだ知らないだけで、本当は自分の好奇心を揺さぶるようなことがあるかもしれない。 でもどうやったら…

Node.jsがインストールされていればReact環境を構築することができます。 docker-compose.ymlを次のように設定します。 version: '3' services: react: build: context: . dockerfile: src/Services/React/Dockerfile volumes: - ./reactapp:/usr/src/app co…