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

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

参照したページ 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…

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

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

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

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

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

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

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

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

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

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

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

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

参考にさせていただいたページ 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…

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

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