Nextjsでの初期プロジェクト導入時の個人的なメモ。

Nextjsでプロジェクト作成するときの、

各種初期導入のYes/Noがなんだったっけ、

となってしまうことがあるので、

現時点のバージョンでの、

初期導入時のメモ。

あくまで個人的なメモなので、

推奨設定ではない点が注意。

公式サイトの情報

公式サイト

まずは、公式サイトで確認

自分が確認した時点で、

npx create-next-app@latest

が初期導入コマンドとなっていました。

リンクをメモしておきます。

https://nextjs.org/docs/app/getting-started/installation

Installationメモ

Terminal Command

実行コマンドはこちら

npx create-next-app@latest

What is your project named? my-app

これはプロジェクト名。

任意のものを設定。

Would you like to use TypeScript? No / Yes

TypeScript導入するか。

導入するので、Yes。

Would you like to use ESLint? No / Yes

ESLintを導入するか。

導入するので、Yes。

Would you like to use Tailwind CSS? No / Yes

Tailwindを導入するか。

レイアウト作成で使うのでYes。

Would you like your code inside a `src/` directory? No / Yes

プロジェクト構造整理用のsrc/ディレクトリ配置選択。

src配置がデフォルトになってきているようなのでYes。

Would you like to use App Router? (recommended) No / Yes

これはNext.jsの新ルーティング仕様。

Yesが公式推奨で、将来の標準の認識なのでYes。

Would you like to use Turbopack for `next dev`? No / Yes

開発速度優先ならYes、安定重視ならNoっぽいかなと。

今回は、プロトタイプなのでYes。

Would you like to customize the import alias (`@/*` by default)? No / Yes

パスのエイリアス。

@/を使うと

import MyComp from "@/components/MyComp"

みたいなこと。

自分は楽なのでYes。

導入後も変えれるはずなので、心配ならNo。

What import alias would you like configured? @/*

@/*はプロジェクトのsrc/直下を指すエイリアスで、

@/components/Button → src/components/Button と解決されます。

デフォルトのままが良いかと思うので、

そのままの設定。

ビルドのエラーは調整済み

ビルドについてもエラーになったが、

以下の対応をやって、

問題なくビルドは完了している。

Next.jsのnext-auth使用してビルドしたらエラーになった件

Initializing project

実行したら、

Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- @tailwindcss/postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc

added 336 packages, and audited 337 packages in 41s

137 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Success! Created portfolio-ui-nextjs

という形でうまくインストールが完了。