【完全ガイド】Next.jsで作る簡単ポートフォリオサイトの作り方

ポートフォリオサイトを作成したいが、どの技術を選べばよいか迷っていませんか？

Next.jsは、Reactベースのフレームワークで、静的サイト生成やサーバーサイドレンダリングに対応しており、ポートフォリオサイトの構築に最適です。

この記事では、Next.jsを使用して、シンプルで効果的なポートフォリオサイトを構築する方法を、ステップバイステップで解説します。

デザインや機能性を重視しつつ、効率的な開発を目指す方にとって、実践的なガイドとなるでしょう。

Next.jsとは何か？
1. 主な特徴
開発環境の構築
1. 必要なツールのインストール
プロジェクトの初期設定
1. ディレクトリ構成の確認
2. TypeScriptの導入（任意）
ページとルーティングの作成
1. ホームページの作成
2. その他のページの追加
スタイリングの実装
1. CSS Modulesの使用
2. Tailwind CSSの導入（任意）
デプロイと公開
1. Vercelへのデプロイ
まとめ

Next.jsとは何か？

Next.jsは、Reactの機能を拡張し、サーバーサイドレンダリングや静的サイト生成を可能にするフレームワークです。

これにより、SEO対策やパフォーマンスの向上が期待できます。

主な特徴

• 静的サイト生成（SSG）：ビルド時にHTMLを生成し、読み込み速度を向上させます。

• サーバーサイドレンダリング（SSR）：リクエスト時にHTMLを生成し、動的なコンテンツに対応します。

• APIルート：バックエンドの機能を同一プロジェクト内で実装可能です。

• ファイルベースのルーティング：ディレクトリ構造に基づいたルーティングが自動で行われます。

開発環境の構築

必要なツールのインストール

まず、Node.jsとnpmがインストールされていることを確認してください。

次に、以下のコマンドでNext.jsのプロジェクトを作成します。

npx create-next-app@latest my-portfolio
cd my-portfolio
npm run dev

これで、ローカルサーバーが起動し、http://localhost:3000でアプリケーションを確認できます。

プロジェクトの初期設定

ディレクトリ構成の確認

create-next-appで生成されたプロジェクトには、以下のようなディレクトリが含まれています。

• pages/：ページコンポーネントを配置します。

• public/：画像やフォントなどの静的ファイルを配置します。

• styles/：CSSファイルを配置します。

TypeScriptの導入（任意）

TypeScriptを使用する場合は、以下のコマンドで必要なパッケージをインストールします。

1	`npm install --save-dev typescript @types/react @types/node`

その後、プロジェクトを再起動すると、tsconfig.jsonが自動生成されます。

ページとルーティングの作成

ホームページの作成

pages/index.jsを編集して、ホームページのコンテンツを作成します。

export default function Home() {
  return (
    <div>
      <h1>私のポートフォリオへようこそ</h1>
      <p>ここに自己紹介やプロジェクトの概要を記載します。</p>
    </div>
  );
}

その他のページの追加

pages/about.jsやpages/projects.jsなどを作成し、必要なページを追加します。

Next.jsでは、pages/ディレクトリ内のファイルが自動的にルーティングされます。

スタイリングの実装

CSS Modulesの使用

Next.jsでは、CSS Modulesを使用して、コンポーネントごとにスタイルを適用できます。

例えば、styles/Home.module.cssを作成し、以下のように記述します。

.title {
  color: blue;
  font-size: 2rem;
}

そして、コンポーネント内でインポートして使用します。

import styles from '../styles/Home.module.css';
 
export default function Home() {
  return <h1 className={styles.title}>私のポートフォリオへようこそ</h1>;
}

Tailwind CSSの導入（任意）

Tailwind CSSを使用することで、効率的にスタイリングが可能です。

導入方法は、公式ドキュメントを参照してください。

デプロイと公開

Vercelへのデプロイ

Next.jsは、Vercelとの親和性が高く、簡単にデプロイできます。

1. Vercelのアカウントを作成し、GitHubと連携します。

2. リポジトリを選択し、デプロイを実行します。

3. デプロイが完了すると、独自のURLが発行されます。

詳細な手順は、Vercelの公式ドキュメントを参照してください。

まとめ

Next.jsを使用することで、効率的かつ高品質なポートフォリオサイトを構築できます。

本記事で紹介したステップに従って、ぜひ自分だけのポートフォリオサイトを作成してみてください。

デザインや機能のカスタマイズを通じて、さらなるスキルアップを目指しましょう。