LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kom-nori(K T)

Next.js環境構築とVercelにデプロイしてみた

Posted at

Next.js でポートフォリオサイトを作って Vercel で公開しよう

📋 この記事で学べること

  • Docker コンテナ内で Next.js 開発環境を構築する方法
  • Next.js の基本的な使い方
  • Vercel を使った無料デプロイ方法
  • 初心者が躓きやすいポイントの解決法

🎯 対象読者

  • JavaScript/React の基礎知識がある方
  • 自分のポートフォリオサイトを作りたい方
  • Next.js を初めて触る方

📖 目次

  1. 概要
  2. 前提条件・必要な環境
  3. セットアップ手順
  4. Vercel でサイトを公開
  5. よくあるトラブルと解決法
  6. 次のステップ
  7. まとめ

1. 概要

この記事では、Next.jsを使ってポートフォリオサイトを作成し、Vercelで無料公開するまでの手順を初心者向けに解説します。

💡 Next.js とは？

Next.js は、React をベースにしたフルスタック Web フレームワークです。以下の特徴があります：

  • サーバーサイドレンダリング（SSR）：SEO に強い
  • 静的サイト生成（SSG）：高速なサイト表示
  • API Routes：バックエンド機能も作れる
  • ゼロ設定：複雑な設定なしですぐ始められる

🚀 今回作るもの

最初はシンプルな "Hello World" サイトを作成し、後でカスタマイズしていきます。

2. 前提条件・必要な環境

📋 必要なソフトウェア

項目 推奨バージョン 説明
Node.js 18.x 以上 JavaScript ランタイム
npm 9.x 以上 パッケージマネージャー（Node.js と一緒にインストールされます）
Docker 24.x 以上 コンテナ化ツール
Git 最新版 バージョン管理ツール

💻 対応 OS

  • Windows 10/11
  • macOS
  • Linux（Ubuntu 推奨）

⚠️ 事前準備

以下を済ませておいてください：

  • Docker のインストールと動作確認
  • GitHub アカウントの作成
  • テキストエディタの準備（VS Code 推奨）

3. セットアップ手順

3.1 プロジェクト作成

Step 1: プロジェクトフォルダを作成

まず、ポートフォリオ用のディレクトリを作成します。

# ポートフォリオ用のフォルダを作成
mkdir my-portfolio
cd my-portfolio

Step 2: 現在の状態を確認

# インストール済みのnpmパッケージを確認
npm list

最初は何もインストールされていないので、エラーメッセージが表示されますが、これは正常です。

Step 3: Next.js プロジェクトを作成

# Next.jsプロジェクトを作成（最新版を使用）
npx create-next-app@latest .

💡 コマンドの説明

  • npx：パッケージを一時的にダウンロードして実行
  • create-next-app@latest：Next.js の最新のプロジェクト作成ツール
  • .：現在のディレクトリにプロジェクトを作成

Step 4: 設定オプションを選択

コマンドを実行すると、以下のような質問が表示されます：

✔ 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

🔧 推奨設定

質問 推奨回答 理由
TypeScript? No 初心者には JavaScript の方が分かりやすい
ESLint? Yes コードの品質を保つため
Tailwind CSS? Yes 簡単にスタイリングできる
src/ directory? Yes プロジェクト構造が整理される
App Router? Yes Next.js 13 以降の推奨方式
Turbopack? Yes 開発時の動作が高速になる
Import alias? No デフォルトで十分

Step 5: インストール完了を確認

# インストールされたパッケージを確認
npm list --depth=0

以下のようなパッケージが表示されれば成功です：

my-portfolio
├── next@15.x.x
├── react@19.x.x
├── react-dom@19.x.x
└── tailwindcss@4.x.x

📁 プロジェクト構造の説明

作成されたファイル・フォルダの説明：

my-portfolio/
├── src/                    # ソースコードフォルダ
│   └── app/               # App Routerのページファイル
│       ├── globals.css    # グローバルスタイル
│       ├── layout.js      # レイアウトコンポーネント
│       └── page.js        # トップページ
├── public/                # 静的ファイル（画像など）
├── package.json           # プロジェクト設定とパッケージ情報
├── tailwind.config.js     # Tailwind CSSの設定
├── next.config.js         # Next.jsの設定
└── README.md              # プロジェクトの説明

💡 package.json の中身を理解しよう

{
  "name": "my-portfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack", // 開発サーバー起動
    "build": "next build", // 本番用ビルド
    "start": "next start", // 本番サーバー起動
    "lint": "next lint" // コードチェック
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "15.3.2"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4"
  }
}

3.2 開発サーバーを起動して確認

Step 1: 開発サーバーを起動

npm run dev

Step 2: 動作確認

成功すると、ターミナルに以下のような表示が出ます：

▲ Next.js 15.3.2
- Local:        http://localhost:3000
- Environments: .env.local

✓ Starting...
✓ Ready in 2.1s

Step 3: ブラウザで確認

  1. ブラウザを開く
  2. http://localhost:3000 にアクセス
  3. Next.js のデフォルトページが表示されることを確認

Next.jsデフォルトページ

🎉 成功！

おめでとうございます！Next.js の開発環境が正常に動作しています。

4. Vercel でサイトを公開

開発環境が整ったので、実際に Web サイトとして公開してみましょう。

Step 1: GitHub リポジトリを作成

  1. GitHubにログイン
  2. 「New repository」をクリック
  3. リポジトリ名を入力（例：my-portfolio）
  4. 「Public」を選択
  5. 「Create repository」をクリック

Step 2: プロジェクトを GitHub にプッシュ

# Gitリポジトリを初期化
git init

# ファイルを追加
git add .

# 最初のコミット
git commit -m "Initial commit: Next.js project setup"

# GitHubリポジトリと連携（YOUR_USERNAMEを自分のユーザー名に変更）
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/my-portfolio.git
git push -u origin main

Step 3: Vercel でデプロイ

  1. Vercelにアクセス
  2. 「Sign up」をクリックして GitHub アカウントで登録
  3. ダッシュボードで「Add New...」→「Project」を選択
  4. GitHub から作成したリポジトリを選択
  5. 「Deploy」をクリック

Step 4: デプロイ確認

デプロイが完了すると、Vercel から公開 URL が発行されます。
（例：https://my-portfolio-username.vercel.app）

🎊 おめでとうございます！
あなたの Next.js サイトが世界中からアクセスできるようになりました！

5. よくあるトラブルと解決法

❌ ポート 3000 にアクセスできない

症状：npm run dev実行後、ブラウザでページが表示されない

解決法：

  1. ポートが他のアプリケーションで使われていないか確認
  2. Docker を使用している場合、ポートフォワードの設定を確認
  3. ファイアウォールの設定を確認
# 使用中のポートを確認（Windows）
netstat -ano | findstr :3000

# 使用中のポートを確認（Mac/Linux）
lsof -i :3000

❌ npm install でエラーが発生

症状：パッケージのインストール時にエラーが発生

解決法：

# npmキャッシュをクリア
npm cache clean --force

# node_modulesを削除して再インストール
rm -rf node_modules
rm package-lock.json
npm install

❌ Vercel でデプロイエラー

症状：デプロイが失敗する

解決法：

  1. npm run buildでローカルでビルドエラーがないか確認
  2. Node.js のバージョンが Vercel でサポートされているか確認
  3. 環境変数の設定を確認

6. 次のステップ

基本的なセットアップが完了したら、以下にチャレンジしてみましょう：

🎨 デザインをカスタマイズ

  • src/app/page.jsを編集してコンテンツを変更
  • Tailwind CSS でスタイリング
  • 独自のコンポーネントを作成

📄 ページを追加

  • About、Projects、Contact ページの作成
  • ナビゲーションの実装
  • レスポンシブデザインの対応

⚡ 機能を拡張

  • 画像の最適化
  • SEO 対策の実装
  • お問い合わせフォームの追加
  • CMS との連携

🔧 パフォーマンス最適化

  • Lighthouse スコアの改善
  • 画像の最適化
  • コードの分割

7. まとめ

この記事では、Next.js を使ったポートフォリオサイトの基本的なセットアップから、Vercel での公開まで解説しました。

✅ 学んだこと

  • Next.js プロジェクトの作成方法
  • 開発サーバーの起動と確認
  • Vercel を使った無料デプロイ
  • よくあるトラブルの解決法

🚀 これから

基本的な環境は整いました。ここからは自分だけのポートフォリオサイトを作り上げていきましょう！

📚 参考リンク

💬 サンプルコード

完成したポートフォリオサイトのサンプルコードは、以下の GitHub リポジトリで公開予定です：

https://github.com/your-username/next-portfolio-sample

📝 更新履歴

  • 2025-05-29: 初版作成
  • より初心者向けに詳細な説明を追加
  • トラブルシューティングセクションを追加
  • 次のステップガイドを追加

Happy Coding! 🎉

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?