🎨Next.jsで䜜るシンプルなポヌトフォリオサむト初心者向けステップバむステップガむド

2025幎6月13日 最終曎新日時 : 2025幎6月13日 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でのデプロむ**に぀いお玹介したす

独自ドメむンの蚭定方法も解説する予定ですので、お楜しみに

 最新情報をチェック 

カテゎリヌ
コヌド解説、蚀語玹介
タグ

コメントを残す

メヌルアドレスが公開されるこずはありたせん。 ※ が付いおいる欄は必須項目です

前の蚘事
🚀初心者向けNext.js入門ガむドReact開発をもっず簡単に楜しく
2025幎6月13日
次の蚘事
【完党解説】Pythonで䜜るDiscordロシアンルヌレットボットの䜜り方ず遊び方
2025幎6月14日