ポートフォリオサイトを作成したいが、どの技術を選べばよいか迷っていませんか？
Next.jsは、Reactベースのフレームワークで、静的サイト生成やサーバーサイドレンダリングに対応しており、ポートフォリオサイトの構築に最適です。
この記事では、Next.jsを使用して、シンプルで効果的なポートフォリオサイトを構築する方法を、ステップバイステップで解説します。
デザインや機能性を重視しつつ、効率的な開発を目指す方にとって、実践的なガイドとなるでしょう。
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を使用する場合は、以下のコマンドで必要なパッケージをインストールします。
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を使用することで、効率的かつ高品質なポートフォリオサイトを構築できます。
本記事で紹介したステップに従って、ぜひ自分だけのポートフォリオサイトを作成してみてください。
デザインや機能のカスタマイズを通じて、さらなるスキルアップを目指しましょう。
Japanese 
English