🎨Next.jsで作るシンプルなポートフォリオサイト：初心者向けステップバイステップガイド
adminはじめに
前回の記事「初心者向けNext.js入門ガイド」では、Next.jsの基本的な機能や使い方を紹介しました。今回はその続きとして、実際にNext.jsを使ってポートフォリオサイトを作ってみましょう！
「難しそう…」と思った方もご安心ください。この記事では、初心者でも迷わないように、コード付きで丁寧に解説していきます。
🎯 ゴール：こんなポートフォリオを作ります
- トップページに自己紹介文とプロフィール画像
- 制作物一覧ページ（Projectページ）
- お問い合わせフォーム（ダミー）
- スタイリングはCSS Modulesを使用
- SEO対策も意識した構造
ポートフォリオサイトは、自分のスキルや実績を紹介するためのWebサイトです。就職活動やフリーランス活動でも活躍します。
🛠 1. プロジェクトの準備
まずはNext.jsの新しいプロジェクトを作成しましょう。
npx create-next-app@latest my-portfolio
cd my-portfolio
npm run dev
このコマンドでNext.jsのひな型プロジェクトが作成され、npm run devでローカルサーバーが起動します。
ブラウザで http://localhost:3000 を開くと、Next.jsのスタートページが表示されます。
📁 2. ページ構成を作る
Next.jsでは、pagesフォルダ内のファイル名が自動的にルーティングされ、URLに対応します。
以下のようにファイルを作成すると、それぞれに対応するページができます：
/pages
├── index.tsx ← トップページ（自己紹介）
├── projects.tsx ← 制作物一覧ページ
└── contact.tsx ← お問い合わせページ
index.tsx（トップページ）
export default function Home() {
return (
<div>
<h1>こんにちは、わたしはWebエンジニアの山田です。</h1>
<p>Next.jsでの開発が大好きです！</p>
<img src="/me.jpg" alt="プロフィール画像" width={200} />
</div>
);
}
このページでは、シンプルに名前と紹介文、プロフィール画像を表示しています。
SEO対策のために、ページタイトルやメタデータを追加するとさらに効果的です。
import Head from 'next/head';
export default function Home() {
return (
<>
<Head>
<title>山田のポートフォリオ | Webエンジニア</title>
<meta name="description" content="Next.jsで作った山田のポートフォリオサイトです。Webエンジニアとしてのスキルを紹介します。" />
</Head>
<div>
<h1>こんにちは、わたしはWebエンジニアの山田です。</h1>
<p>Next.jsでの開発が大好きです！</p>
<img src="/me.jpg" alt="プロフィール画像" width={200} />
</div>
</>
);
}
projects.tsx（制作物）
import Head from 'next/head';
const projects = [
{ title: "Todoアプリ", description: "Next.js + TypeScriptで作成" },
{ title: "ブログサイト", description: "MarkdownとSSGを使用" },
];
export default function Projects() {
return (
<>
<Head>
<title>制作物一覧 | 山田のポートフォリオ</title>
<meta name="description" content="山田が作成したWeb制作物の一覧。ReactやNext.jsを活用したプロジェクトを紹介します。" />
</Head>
<div>
<h1>制作物一覧</h1>
<ul>
{projects.map((p, i) => (
<li key={i}>
<h2>{p.title}</h2>
<p>{p.description}</p>
</li>
))}
</ul>
</div>
</>
);
}
contact.tsx（お問い合わせ）
import Head from 'next/head';
export default function Contact() {
return (
<>
<Head>
<title>お問い合わせ | 山田のポートフォリオ</title>
<meta name="description" content="Webエンジニア山田へのお問い合わせフォーム。お気軽にご連絡ください。" />
</Head>
<div>
<h1>お問い合わせ</h1>
<form>
<input type="text" placeholder="お名前" required /><br />
<input type="email" placeholder="メールアドレス" required /><br />
<textarea placeholder="お問い合わせ内容" required></textarea><br />
<button type="submit">送信</button>
</form>
</div>
</>
);
}
🎨 3. スタイリング（CSS Modules）
Next.jsは、CSS Modulesという仕組みを使ってスタイルを管理できます。
たとえば、styles/Home.module.cssというファイルを作って、以下のように記述します：
.container {
padding: 20px;
text-align: center;
}
これをindex.tsxにインポートして使います：
import styles from '../styles/Home.module.css';
<div className={styles.container}>
...
</div>
CSS Modulesを使うことで、クラス名の衝突を避けながらモジュールごとにスタイルを管理できます。
🌍 4. ナビゲーションを追加
複数のページを作ったので、ユーザーが移動しやすいようにナビゲーションを用意しましょう。
共通パーツとしてcomponents/Header.tsxを作ります。
// components/Header.tsx
import Link from 'next/link';
export default function Header() {
return (
<nav>
<Link href="/">Home</Link> |
<Link href="/projects">Projects</Link> |
<Link href="/contact">Contact</Link>
</nav>
);
}
このコンポーネントを各ページにインポートすることで、共通のメニューを表示できます。
import Header from '../components/Header';
export default function Home() {
return (
<div>
<Header />
{/* 以下省略 */}
</div>
);
}
🚀 おわりに
これで、基本的なポートフォリオサイトが完成しました！
Next.jsの機能（ルーティング、コンポーネント構成、スタイル管理）を使いながら、実践的な開発を体験できたはずです。
また、SEO対策として<Head>コンポーネントによるメタデータ設定を行うことで、検索エンジンに強いサイト構成になります。
🔜 次回予告：Vercelでのデプロイとカスタムドメイン設定
次回は、このポートフォリオサイトを**インターネット上に公開する方法（Vercelでのデプロイ）**について紹介します！
独自ドメインの設定方法も解説する予定ですので、お楽しみに！
