Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

nextjs

Next.js14の開発環境構築手順 step04 lint-stagedとhuskyを設定する

lint-stagedとhuskyをインストールする 以下のコマンドを実行します。 npm install --save-dev lint-staged husky huskyをセットアップする 「Get started | Husky」に倣って、以下の通り実行しました。 npx husky init このとき、package.jsonのscriptsに以…

Next.js14の開発環境構築手順 step03 CSS Modules + Sassとstylelintを設定する

はじめに Next.js14の開発環境構築手順 step03 をやっていこうと思います。 以前 Next.js 13 でやったものを再検討しながらメモしていきます。 参考: Next.js13の開発環境構築手順 step03 css-in-jsとstylelintを設定する - Motomichi Works Blog Zero-runti…

Next.js14の開発環境構築手順 step02 eslintとprettierを設定する

はじめに Next.js14の開発環境構築手順 step02 をやっていこうと思います。 以前 Next.js 13 でやったものを再検討しながらメモしていきます。 参考: Next.js13の開発環境構築手順 step01 yarn create next-app --typescript - Motomichi Works Blog Next.js…

Next.js14の開発環境構築手順 step01 create-next-app

はじめに 2024年7月時点での自分のためのメモとして、Next.jsの環境構築手順をまとめてみます。 かなり長くなるのでいくつかのstepに分けて書いていきます。 以前 Next.js 13 でやった内容を再検討しながらメモしていきます。 参考: Next.js13の開発環境構築…

Next.jsのアプリケーションにnice-modal-reactを導入してみる

参照したページ GitHub - eBay/nice-modal-react: A modal state manager for React. 今日の環境 ebay/nice-modal-react: 1.2.10 next: 13.4.4 はじめに Next.jsのアプリケーションにnice-modal-reactを使って、実用的なモーダルを実装していきます。 Next.j…

React.memoで子コンポーネントの再描画を抑制する

関数コンポーネントの再描画とは 関数が実行されて、HTML文書構造をreturnすることで、対象のDOMが再描画されます。 関数コンポーネントが再描画(再実行)されるタイミング 以下のようなときに再描画(再実行)されます。 stateが変化した時 propsが変化した時 …

Reactで使えるUIライブラリについてちょっと調べる

参照したページ まとめ記事 UIライブラリの「機能」は欲しいけど「見た目」はカスタマイズしたいを叶えるRadix UI | microCMSブログ コンポーネントベース Primitives – Radix UI Overview - Base UI Headless UI - Unstyled, fully accessible UI component…

Next.js13の開発環境構築手順 step04 lint-stagedとhuskyを設定する

lint-stagedとhuskyをインストールする 以下のコマンドを実行します。 yarn add --dev lint-staged husky huskyをセットアップする 「 husky | husky」に倣って、以下の通り実行しました。 npx husky-init && yarn このとき、package.jsonとyarn.lockが更新…

Next.js13の開発環境構築手順 step03 css-in-jsとstylelintを設定する

はじめに Next.js13の開発環境構築手順 step03 をやっていこうと思います。 emotionやlinariaもCSS in JSのパッケージとして候補でしたが、Next.jsに組み込まれているstyled-jsxを使うことにしました。 以下のようなことを前提としてCSS周りの技術選定をして…

Next.js13の開発環境構築手順 step02 eslintとprettierを設定する

はじめに Next.js13の開発環境構築手順 step02 をやっていこうと思います。 Next.jsのベーシックな設定を確認する Next.jsのベーシックなESLintの設定を確認するために、まずは以下のドキュメントを読みました。 Configuring: ESLint | Next.js eslint-confi…

lint-stagedとhuskyを使ってgit commitする前にeslint、stylelint、prettierを実行する

参考にさせていただいたページ Husky - Git hooks Basic Features: ESLint | Next.js lint-staged + husky でコミットするファイルだけ cspell を走らせる Next 12 で ESLint, Prettier, husky, lint-staged の環境構築 ++ Gaji-Laboブログ はじめに lint-st…

VSCodeでstyled-jsxの入力補完をする

参照したページ シンタックスハイライト identifier: blanu.vscode-styled-jsx 参考リンク: styled-jsx - Visual Studio Marketplace 入力補完 identifier: Divlo.vscode-styled-jsx-languageserver 参考リンク: styled-jsx Language Server - Visual Studio…

Next.js13の開発環境構築手順 step01 yarn create next-app --typescript

はじめに 2023年3月時点での自分のためのメモとして、Next.jsの環境構築手順をまとめてみます。 かなり長くなるのでいくつかのstepに分けて書いていきます。 環境 主に以下のような環境でNext.js 13の環境構築を行なっていきます。 CSSを書くにあたってNext.…

create next-app で自動生成されたtsconfig.jsonの設定項目を見てみる | Next.js その0005

参考にさせていただいたページ TypeScript: TSConfig リファレンス - すべてのTSConfigのオプションのドキュメント tsconfig.jsonのよく使いそうなオプションを理解する はじめに yarn create next-app --typescript でアプリケーションを作成しました。 生…

Next.jsの開発環境構築手順2022年12月版 | Next.js

はじめに yarnを使わずにnpmを使ってやります。 個人的に手順をまとめているだけなので、一般的にはイケてないかもしれません。 nodenv インストール可能なバージョンを確認します。 % nodenv install -l 最新をインストールします。 % nodenv install 19.4.…

もう一度Next.jsのlearn courseをやりながら要点をまとめる | Next.js 12.x その0004

Navigate Between Pages (ページ間を移動する) について ページ遷移にnext/linkコンポーネントを使う import Link from 'next/link'; Assets, Metadata, and CSS (アセット、メタデータ、CSS) について 画像の表示にnext/imageコンポーネントを使う import I…

create-next-appするときに色々オプションなどがあるので調べる | Next.js 12.x その0003

参考にさせていただいたページ Create Next App | Next.js TypeScript 公式ページに書いてありました。 npxとyarnとでハイフンがあったり無かったりします。 npx create-next-app@latest --ts # or yarn create next-app --typescript # or pnpm create next…

Next.jsのlearn courseをやってみる | Next.js 12.x その0002

参考にさせていただいたページ Setup - Create a Next.js App | Learn Next.js Create a Next.js App (Next.jsアプリを作成する) 以下のコマンドでcreateしました。 npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-l…

Next.jsをTypeScriptで始めてみる | Next.js 12.x その0001

参考にさせていただいたページ Getting Started | Next.js create next-appする 作業ディレクトリを作成します。 mkdir next-js-sample 公式の「Getting Started」の「Automatic Setup」の通りに以下のコマンドを実行してみます。 yarn create next-app --ty…

Next.js 11.x + TypeScript 4.x その0001 Next.jsをTypeScriptで始めてみる

参考にさせていただいたページ Create Next App | Next.js コマンド yarn create next-app --typescript 覚書 yarn create next-app --typescriptでプロジェクトを作成しました。 Next.jsはcreate-react-appしたときや、create nuxt-appしたときと違って、プ…