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 への理解を深めるために始めた、(なるべく)毎日投稿の自分用備忘録的記事シリーズである。 執筆の時間も含めて毎日「１時間」という制約を設けて、ドキュメントを読みながら実際に手を動かしながら執筆していく予定。 …