Next.jsでプロジェクトを始める

今回は、create-next-appを使用してNext.jsのプロジェクトを作成し、ローカル環境で起動するところまで進めます。

なお、今回はTypeScriptを使用します。

GitとNode.jsは、あらかじめインストールされている前提です。

実行環境

今回使用した環境は以下のとおりです。

node --version
npm --version
git --version

実行結果です。

v24.3.0
11.4.2
git version 2.50.0.windows.1

Next.jsプロジェクトを作成する

次のコマンドを実行します。

npx create-next-app@latest プロジェクト名

今回は、例としてsampleという名前で作成します。

npx create-next-app@latest sample

初回実行時は、create-next-appをインストールするか確認される場合があります。

Need to install the following packages:
create-next-app@16.2.10
Ok to proceed? (y)

yを入力してEnterキーを押します。

Would you like to use the recommended Next.js defaults?
❯ Yes, use recommended defaults
  No, reuse previous settings
  No, customize settings

今回は推奨設定を使用するため、そのままEnterキーを押します。

推奨設定では、主に以下が有効になります。

• TypeScript
• ESLint
• Tailwind CSS
• App Router
• Turbopack

作成が完了すると、次のように表示されます。

Success! Created sample at フォルダパス/sample

これでNext.jsプロジェクトの作成は完了です。

作成されたプロジェクトに移動する

cd sample

ディレクトリ内を確認します。

ls

主に以下のファイルやディレクトリが作成されています。

app
public
node_modules
package.json
package-lock.json
next.config.ts
tsconfig.json
.gitignore

環境や選択内容によっては、appディレクトリがsrc/appに配置される場合もあります。

.gitignoreを確認する

create-next-appを使用すると、.gitignoreも自動で生成されます。

主に以下のファイルやディレクトリがGitの管理対象外になっています。

# Dependencies
/node_modules/

# Next.js
/.next/
/out/

# Environment variables
.env*

# TypeScript
*.tsbuildinfo
next-env.d.ts

.env.exampleをGitで管理したい場合は、次の行を追加します。

!.env.example

Gitリポジトリを確認する

create-next-appは、環境によってはGitリポジトリの初期化も行います。

次のコマンドで確認します。

git status

Gitリポジトリとして認識されていれば、現在の変更内容が表示されます。

Gitリポジトリが初期化されていない場合は、次のコマンドを実行します。

git init

ローカル環境で起動する

次のコマンドで開発サーバーを起動します。

npm run dev

正常に起動すると、次のようなURLが表示されます。

http://localhost:3000

ブラウザからアクセスします。

Next.jsの初期画面が表示されれば、プロジェクトの作成と起動は完了です。

まとめ

今回は、create-next-appを使用してNext.jsのプロジェクトを作成し、ローカル環境で起動しました。

実行した主なコマンドは以下です。

npx create-next-app@latest sample
cd sample
npm run dev

次回は、作成されたファイルの役割を確認しながら、トップページを書き換えていきます。