daisyUI 今回は、Next.js の公式ドキュメントを離れて、daisyui を導入する。 daisyui.com daisyUI とは daisyUI は、Tailwind CSS をベースにしたコンポーネントライブラリである。 GitHub の tailwind タグでスター数が３番目に多いライブラリになっている…
Linking and Navigating 画面遷移の方法 <Link> nextjs.org Next.js には、<a>タグを拡張した組み込みコンポーネントの<Link>がある。 基本的には<a>タグと同じように使ってあげれば良い。 import Link from 'next/link'; export default function Page() { return <Link href='/dashboard'>Dashboard</Link>; </a></link></a></link>…
Routing ページごとに page.tsx が必要 例えば、以下のようなディレクトリ構造だと、 app ├ layout.tsx └ page.tsx ├ about │ └ page.tsx └ user ├ page.tsx └ post └ page.tsx app/page.tsx -> / app/about/page.tsx -> /about app/user/page.tsx -> /user …
nextjs.org Next.js Routing の基本 Next.js 13 から App Router が導入された。 前までの Pages Router と大きく仕様が変わっているため、ググって出てくる情報にはバージョンの差異がないか注意が必要。 といっても基本原理は変わらない。 Next.js の Rout…
前回の記事で、eslint エラーメッセージが文字化け？してると書いたが、 [33m[STARTED][39m Preparing lint-staged... この、[33mの部分は、調べてみるとどうやらANSI Escape Sequencesらしい。 en.wikipedia.org qiita.com これをANSI Escape Sequencesをサ…
lint 自動実行の必要性 前回も説明した通り、nextjs で build するときは自動で lint も走るようである。 例えば以下のコード。 'use client'; import React, {useState} from 'react'; export default function Home() { const isTrue = Math.random() > 0.…
ESLint nextjs.org create-next-app をした時点で ESLint がすでにセッティングされている。 以下のコマンドで lint を走らせることができる。 npm run lint 色々カスタマイズ方法が公式ドキュメントに載っているが、ESLint にそこまで拘りはないので多くは…
インストール nextjs.org インストールは簡単 npx create-next-app@latest App Router は recommended。 Tailwind CSS がデフォルトでインストールされるのは非常に嬉しい。 とりあえず立ち上げてみる。 npm run dev create-next-app のサンプルにはこの単ペ…
今後書きたいことをメモ 論文執筆 組版システムの選択肢 pandocテンプレート vivliostyle マジミラプロコン 自分の作品紹介 textalive解説 textaliveテンプレート 過去作品の傾向 VSCode .vscode tasks.json snippets extension.json 拡張機能を作る 生成AI …
概要 「Everyday Next.js」は、Next.js への理解を深めるために始めた、(なるべく)毎日投稿の自分用備忘録的記事シリーズである。 執筆の時間も含めて毎日「１時間」という制約を設けて、ドキュメントを読みながら実際に手を動かしながら執筆していく予定。 …
概要 poetryでtensorflowをインストールしようとしたら手間取ったのでメモ。 環境 OS: windows11 python version: 3.10.5 結論 tensorflow-io-gcs-filesystemをバージョン0.31でインストールした後、tensorflowをバージョン2.10でインストール poetry add te…
概要 はてなブログを新しく使い始めることにしたので、 はてなブログ公式の使い方講座「はてなブログ アカデミー」とはてなブログヘルプを読み進める。 その中で、気になったところ・メモっておきたいところを本記事に記す。 hatenablog.com help.hatenablog…
注：未完記事 概要 png->jpgやらsvg->pngやら変換したいとき、どうやって変換したら良いかまとめる。 指針 ただし、できるだけ以下の順に変換方法がないか調査する。 windows標準機能・標準ソフトで変換 webアプリ自分で作ってブラウザ上で変換 pythonで変換…
結論 chrome拡張機能「Video Speed Controller」の影響。 拡張機能を削除したらWarningは出なくなった。 Warning内容 Next.js 13 (13.4.4) を使ってみたいと思い、 npx create-next-appで作成後、特にコードを弄らずそのままnpm run devしたところ、以下のエ…
概要 はてなブログを使っていくにあたって、使い方など知っておきたい・決めておきたいことなどを列挙して、随時更新していく。（自分用） 調査内容 どの記法が良いか 現状markdown書きたいと思っているが、はてな記法がどんなものなのか調べる。 markdown記…
ブログを書き始めることにした。 技術ブログと日記の中間くらいの心持ちで書いていくつもり。 Qiitaでも何個か記事を書いてはいるが、あちらはエンジニアのための情報共有サービスなので、 もっと気軽にアウトプットする場としてはてなブログを使っていこう…
