対象
- Vercel 初心者
- 初デプロイを考えている人
おことわり
この記事はNext.js, TailwindCSS等を使って初めてプロジェクトを作ってみた時の記録です。
何回かやり方を忘れていたのでメモにしていて未公開だったので、一部を改変してこの機会に公開することにしました。
個人プロジェクト作成フロー
１．GitHubリポジトリ作成
リポジトリ名
例）portfolio
Public or Private
例）Public：リポジトリはだれでも見ることができる
README.md の作成
# アプリ概要
# 制作のきっかけ
# 技術選定
# ページ構成
# 参考
# 備考
２．プロジェクト初期化
# Next.js プロジェクト作成
npx create-next-app@latest portfolio-site
cd portfolio-site
# Tailwind CSS 設定
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
# 必要な依存パッケージインストール（ダークモード/フォーム向け）
npm install react-hook-form axios
３．Tailwind 設定
tailwind.config.js
module.exports = {
content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: 'class', // ダークモード設定
theme: {
extend: {},
},
plugins: [],
}
４．Git 初期設定 & Push
git init
git add .
git commit -m "Initial commit for portfolio"
git branch -M main
git remote add origin <GitHubリポジトリURL>
git push -u origin main
５．Vercel デプロイ
- Vercel にログイン
- GitHub リポジトリ連携
- 自動ビルド & デプロイ設定
６．Cloudflare DNS設定
- Cloudflareにドメイン登録
- VercelのエイリアスをCloudflare側に設定
プロジェクト初期設定
✔ 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
Would you like to use TypeScript?
- Yes （おすすめ）
型安全でエラーを早期に検知可能
大規模・保守性が高いコードを書くのに便利 - No （既存のJavaScriptだけで進めたい場合）
Would you like to use ESLint?
- Yes （おすすめ）
コード品質を維持しやすく、バグを減らす
チーム開発でも役立つ - No （気軽に進めたい場合）
Would you like to use Tailwind CSS?
- Yes（強くおすすめ）
開発効率が向上し、ダークモードも簡単に実装可能
Would you like your code inside a src/ directory?
- Yes （おすすめ）
フォルダ構造が整い、プロジェクトが大きくなった際に整理しやすい - No （小規模プロジェクトなら問題なし）
Would you like to use App Router? (recommended)
- Yes （おすすめ）
Next.js 13以降の新しいルーティング方式
サーバーコンポーネントがデフォルトで有効
ページとAPIが統一的に扱える （app / ディレクトリ） - No
従来の pages / ディレクトリ方式
旧バージョンとの互換性あり
Would you like to use Turbopack for next dev?
- Yes （試してみる価値あり）
Webpack に代わる高速な開発ビルドツール
ビルド速度が速い（大規模アプリで特に有効）
ただし、現時点ではまだベータ版 - No （安定を重視するならおすすめ）
標準の Webpack を使用
信頼性が高い
Would you like to customize the import alias (@/* by default)?
- No （おすすめ）
デフォルトの @/ をそのまま使用
シンプルで他のプロジェクトとの互換性が高い
Next.js標準で推奨される方法 - Yes
独自のエイリアス名を使う場合
たとえば ~/components や @root/ などにカスタマイズ可能
コンフリクト対策は必至
コンフリクトが起こる要因
- リモートリポジトリ（GitHub上など）に既にコミットが存在する場合
- ローカルリポジトリの履歴とリモートリポジトリの履歴が異なる場合
解決方法
強制プッシュ
git push -u origin main --force
- リモートの内容を無視して、ローカルを完全に上書き
- 注意: 他の開発者がいる場合は慎重に
リモート内容をマージ
git fetch origin
git pull origin main --rebase
git push -u origin main
-
rebaseによって履歴を整理しながらローカルとリモートを統合 - 推奨: 履歴を綺麗に保てる
対策のフロー
１．リモートの内容を確認
git remote show origin
２．差分があったとき
git pull origin <ブランチ名>
ローカル修正後にプッシュ
- ブランチ名が一致するとき
git push origin <ブランチ名>
- ブランチ名が異なるとき
git push origin <ローカルブランチ>:<リモートブランチ>
独自ドメイン未取得時の流れ
ドメイン取得（任意）
- Google Domains: 分かりやすい管理画面
- お名前.com: 日本の人気サービス
- Namecheap: 海外でリーズナブル
ちなみに
- .com, .net, .dev などは無難で人気
- .tech や .io は技術系ポートフォリオにおすすめ
Cloudflare に登録
- Cloudflare にアクセスしてアカウント作成
- Add a Site から取得したドメインを追加
- Cloudflareが提供するネームサーバーに変更するよう指示されるので、ドメイン管理サービスで設定
Vercel側でエイリアス設定
- Vercel ダッシュボードでプロジェクトを開く
- Settings > Domains へ移動
- ドメインを追加（例: example.com）
CloudflareでDNS設定
- DNS セクションに移動
- 以下のレコードを追加
未取得段階でテストする方法
- Vercel のデフォルトドメインを使う
your-project-name.vercel.app - ドメイン取得前に十分テスト可能
例：ポートフォリオの作成
ディレクトリ構成案
src/
├── app/
│ ├── page.js # ホームページ
│ ├── about/ # 自己紹介ページ
│ ├── projects/ # プロジェクト一覧ページ
│ ├── contact/ # コンタクトフォーム
│ └── components/ # 再利用可能なUIコンポーネント
├── styles/ # カスタムスタイル
├── assets/ # 画像やアイコン
各セクションのアイディア
-
トップページ (
page.js)- 自己紹介キャッチコピー
- ポートフォリオリンクへのナビゲーション
-
自己紹介 (
/about)- 簡単な経歴やスキルセット一覧
- 興味のある分野
-
プロジェクト一覧 (
/projects)- プロジェクトの画像、リンク、使用技術などをカード表示
- フィルター機能（技術ごとの絞り込み）
-
コンタクトフォーム (
/contact)- 名前、メール、メッセージ入力フィールド
- 送信確認機能
※この記事は過去の記事を軽く見直して再編したものです。間違いがあれば優しくご指摘お願いします。
2025.04 初期作成
2025.12 更新(確認)