Next.jsセットアップ

今回はNext.jsのセットアップ(初期設定)の方法を自分用にまとめてみました！！
(2023/05/28)

・公式ドキュメントのDocsからInstallationツールバーに移動.

▼ Next.jsの公式ドキュメント

・Automatic Installaitonの指示に従い、以下をターミナルで実行.

ターミナル

# npm
npx create-next-app@latest

・ Projectのファイル名を聞かれるので作成する.

ターミナル

# プロジェクト名は何にしますか？
✔ What is your project named? … プロジェクト名

・以下の質問にYes/Noで回答する.

ターミナル

✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use Tailwind CSS with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Use App Router (recommended)? … No / Yes
✔ Would you like to customize the default import alias? … No / Yes

この時点ではまだ ".next" フォルダは存在していない.

・ターミナルから先ほど作成したファイルに移動し、エディタを立ち上げる.

ターミナル

# 作成したフォルダに移動
cd プロジェクト名
# エディタを開く
code . 

・開発環境で開くと".next"フォルダが作成され、同時にローカルサーバが指定のパスで立ち上がる.

ターミナル

# 開発環境で作成
npm run dev

開発を始める前の初期設定

・srcディレクトリを作成する.

・jsconfigに以下のを設定することで、jsconfig.jsonを基点として絶対パスを指定できるようになる.

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

・また、同時にVSCodeのWorkspaceに対して、絶対パス指定の補完を設定することで開発が楽になるよ!

1. command+ ,でVSCodeの設定ファイルを開く.
2. Workspaceを選択し、以下の欄をnon-relativeに変更.
   

以上になります！！