2021-06-01から1ヶ月間の記事一覧
以前やらかしたことを、またやらかしてしまったので、 再度動作できるようにするまでのメモ。 thoames.hatenadiary.jp TL;DR opensslが1.1系に書き換わってる可能性大!!!! なので以下のことをすれば直った。 1) openssl1.0をインストール 2) /usr/local/…
何も考えずにNext.jsでMaterial UIを使おうとすると以下のエラーが出ます。 Warning: Prop 'className' did not match. Server ... Material UIではSSRへの対応方法が準備されており、以下がそのサンプルです。 material-ui/examples/ssr at master · mui-or…
GraphQL Code Generatorとは、GraphQLのスキーマからTypeScriptの型定義ファイルを作成することができるツール。テスト環境はNext.js + TypeScript + Apollo + GraphQL Code Generator + Hasuraの構成する。CSRでGraphQLリクエストはせず、SSRとSSG内でのみG…
下記のページを参考に設定 Guides: Visual Studio Code Setup | Hasura GraphQL Docs インストール まずはVSCodeにプラグインのインストール Apollo GraphQL - Visual Studio Marketplaceこのプラグインを入れるとGraphQLにシンタックスハイライトがつき、Gr…
Tl;dr ルートディレクトリに.vscodeフォルダを作り、launch.jsonを以下の内容で作成する。 $ mkdir .vscode && cd .vscode $ touch launch.json launch.json { "version": "0.2.0", "configurations": [ { "name": "Next: Node", "type": "node", "request":…
基本ルール 自己満足を排除し、読者に支持されるものを提供する プロフィール欄をきれいに簡潔に書くこと 興味を持てくれた人は、プロフィールを見てフォローするかを決めるので、 しっかり書いていく。 写真をまずは6〜7枚投稿してから、他のユーザにアプ…
目標1: Next.jsプロジェクト(プレレンダリング + SSG)をNetlifyで公開したい 目標2: Next.jsプロジェクト(SSR + SSG)をNetlifyで公開したい Netlifyアカウント作成 基本的には以下のサイトさんをみて設定 【5分で公開・簡単】Netlifyの使い方を解説する …
・コンポーネントはクラスコンポーネントではなく、関数コンポーネントを使用する。 ・Atomic Designをベースにコンポーネントを管理する 自分はとりあえずこの構成でやる。 - src - pages (only container: データ取得、APIアクセス、ロジック) - component…
CSS in JS。 コンポーネント内にCSSを記述できるのでスコープが明確になる。TypeScriptを使用するので、@types/styled-componentsをインストール。 TypeScript内のCSSの補完を行いたいので、typescript-styled-pluginもインストール インストール $ npm inst…
パッケージマネージャーはnpmを使用。 エディターはVSCode。VSCodeの設定とPrettierの設定は以前書いた。MacでVSCodeを使用してみた - とーますメモ 【VSCode】 フロントエンド開発の使う自分用のPrettier設定まとめ - とーますメモ Next.jsインストール $ n…
以下の記事さんがすごいまとまっていてよかった。 【Prettier】「なんとなく使う」から「分かって使う」へ【Visual Studio Code】 - AI can fly !!要はVSCodeで、Prettierを使うには以下の2つの方法がある。1)npmやyarm経由でインストールしたPrettierを…