はじめに
Next.jsをインストールする際、下記の参考ページから変化していたので、メモも兼ねて投稿しておきます。
色々忘れっぽい私にとっては、初期設定で必須のサイトです。
こちらのページをベースに書かせていただきます。
なお、メモ用途がメインなので、環境などはそこそこに、ページの最後に記載します。より詳しい情報が必要であれば、コメントにでも残してください。気が向いたら、新しくページを作ります。
聞かれてること
npx create-next-app@latest my-app上記を実行した際に表示される質問です。
なお、latestは最新版での構築を強制し、その後の「my-app」は、プロジェクト名です。
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for next dev? … No / Yes
✔ Would you like to customize the import alias (@/* by default)? … No / Yes現在（2024年11月13日時点）では、このようになっています。
「Would you like to use ○○?」は「○○を使いたいですか？」という意味なので、それ以外の部分をまとめ
TypeScript （No）：JSに型の機能を導入した言語
ESLint （Yes）：レビューおよび整形ツール
Tailwind CSS （No）：最近流行りのCSSフレームワーク
src/ directory（Yes）：プロジェクト直下に配置するまとめ用ディレクトリ
※ディレクトリを設置し、使うかどうかを訊かれてます
App Router （Yes）：2023年に出たルーティング機能らしい（よくわからん）
Turbopack （Yes No）：ローカル開発を高速化するためのフラグ（詳細後述）
costomize the import alias（No）：../../を減らすためのやつ
こんな感じでした。
Turbopackとは？
ローカルでの開発環境高速化用に使えるフラグ（ただし、devのみ使用可能）ということらしいです。
Web3関連を行うにあたって、テクニカルな内容を実行していると、バグの温床になりました。簡単なサイト以外、当面はNo推奨（VRやLive2Dを表示させようとしたら、むしろエンコが遅くなったんじゃぁ）
とりあえず、説明の原文は載せておきます。
原文：Turbopack can be used in Next.js in both the
pagesandappdirectories for faster local development. To enable Turbopack, use the--turbopackflag when running the Next.js development server.日訳：Turbopackは、Next.jsのpagesディレクトリとappディレクトリの両方で使用することができます。Turbopackを有効にするには、Next.js開発サーバーの実行時に、-turbopackフラグを指定してください。
https://nextjs.org/docs/architecture/turbopack
既存の環境でも、package.jsonに
{
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}と、「–turbopack」を追加してやれば、使えるらしい。
ほとんど設定が不要らしい（公式が言ってた）ので、とりあえずYesにして損はないはず。
環境など
適当なミニPCにUbuntu 22を入れサーバー化
ローカルに公開してWindowsで開発してます。