Next.jsは、Reactベースのウェブアプリケーションフレームワークです。このガイドでは、Next.jsプロジェクトの作成方法を初心者にもわかりやすく解説します！
前提条件
Next.jsを使い始める前に、以下のものが必要です：
- Node.js（バージョン18.17以降）
- Node.jsは公式サイト（https://nodejs.org/）からダウンロードできます
- インストール後、ターミナルで
node -vを実行してバージョンを確認できます
プロジェクトの作成手順
1. プロジェクトの作成
ターミナルを開きます。プロジェクトを作成したいフォルダまで移動して、以下のコマンドのいずれかを実行します
# npmを使用する場合
npx create-next-app@latest プロジェクト名
# yarnを使用する場合
yarn create next-app プロジェクト名ここで一点注意なのですが、長いプロジェクト名を設定する際には「-」繋ぎで記載するようにしてください。
❌ npx create-next-app@latest SampleNextProject
⭕️ npx create-next-app@latest sample-next-project2. 初期設定の質問に答える
コマンドを実行すると、いくつかの質問が表示されますので答えていきます。
こちらはプロジェクトを作成する際に、設定などを対話形式で設定していきます。
What is your project named? プロジェクト名
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 to use `src/` directory? › No / Yes
Would you like to use App Router? (recommended) › No / Yes
Would you like to customize the default import alias? › No / Yes基本的には以下のように答えていきます。
- TypeScript: Yes（Typescriptを使うことで型安全なコードが書けますが慣れるまではJavascriptで書くことをおすすめします）
- ESLint: Yes（コードの品質を保てます）
- Tailwind CSS: Yes（スタイリングが簡単になります）
- src/ directory: Yes（コードの整理がしやすくなります）
- App Router: Yes（Next.jsの最新機能が使えます）
- Import alias: No（まずは基本的な設定で始めましょう）
3. プロジェクトの起動
プロジェクトが作成されたら、以下の手順で起動します：
- プロジェクトディレクトリに移動
cd プロジェクト名- 開発サーバーを起動
npm run dev
# または
yarn dev- ブラウザで http://localhost:3000 を開く
プロジェクトの構造
作成されたプロジェクトの主要なファイルとディレクトリの説明は以下になります。
基本的には、srcフォルダにソースコードをガシガシと記載します。
プロジェクト名/
├── README.md
├── app # ページやコンポーネントを配置
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx # 共通レイアウト
│ ├── page.module.css
│ └── page.tsx # メインページ
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts # Next.jsの設定ファイル
├── node_modules
├── package-lock.json
├── package.json # プロジェクトの設定と依存関係
├── public # プロジェクトで使う画像ファイル等を保存
│ ├── file.svg
│ ├── globe.svg
│ ├── next.svg
│ ├── vercel.svg
│ └── window.svg
└── tsconfig.json #Typescriptの設定ファイルよくある問題と解決方法
- Node.jsのバージョンエラー
- 最新のLTS版Node.jsをインストールしましょう
- ポート3000が使用中
- 別のポートを使用：
npm run dev -- -p 3001
- パッケージのインストールエラー
node_modulesを削除してnpm installを再実行
まとめ
Next.jsプロジェクトの作成は、create-next-appを使うことで非常に簡単です。基本的な設定を選択し、開発サーバーを起動するだけで、すぐにアプリケーション開発を始められます。
このガイドで紹介した手順に従えば、モダンなウェブアプリケーション開発の第一歩を踏み出すことができます。次は、Next.jsの公式ドキュメントを参照しながら、さらに機能を追加していってください。
コメント