Next.js 16、TypeScript、Tailwind CSS 4を使用して、モダンで洗練されたポートフォリオ兼ブログサイトを構築した過程と学びを紹介します。
この記事では、Next.js 16、TypeScript、Tailwind CSS 4を使用してポートフォリオ兼ブログサイトを構築した過程、技術的な実装の詳細、そして学びを紹介します。
名古屋大学理学部物理学科に在籍しながら、フルスタックエンジニアとして活動する中で、自分の作品や経験をまとめて発信する場が必要だと感じていました。特に、チャット型医薬品相談ツールの開発経験や、医療×AI分野での取り組みを、技術的な詳細とともに紹介したいと考えていました。
また、ブログ機能も兼ねることで、日々の学習記録や技術的な学び、コンテスト参加の経験なども発信できるようにしました。
プロジェクト一覧と詳細ページを実装しました。各プロジェクトには以下の情報を表示しています：
プロジェクトデータは content/projects/projects.json で管理し、TypeScriptの型定義により型安全性を確保しています。
interface Project {
id: string;
name: string;
description: string;
category: "Web Application" | "Algorithm" | "Infrastructure";
technologies: string[];
image?: string;
githubUrl?: string;
demoUrl?: string;
featured: boolean;
date: {
start: string; // YYYY-MM
end?: string;
};
highlights: string[];
}
Markdown/MDX形式でブログ記事を管理しています。主な特徴：
react-syntax-highlighterを使用したコードブロックのハイライトブログ記事は content/blog/ ディレクトリに配置し、gray-matterでフロントマターを解析、next-mdx-remoteでレンダリングしています。
自己紹介、経歴、スキル、大会・賞歴をタイムライン形式で表示しています。特に、学歴セクションにはテニスサーブのCanvasアニメーションを実装し、中高時代のテニス部経験を視覚的に表現しました。
PDF形式の履歴書をダウンロードできる機能を実装しました。LaTeXで作成した履歴書をPDFに変換し、/public/resume/に配置しています。
以下のSEO対策を実装しました：
app/sitemap.tsで動的に生成app/robots.tsで動的に生成next/fontを使用したフォントの最適化WCAG AA準拠を意識した実装を行いました：
aria-label、aria-describedbyの設定next-themesを使用してダークモードを実装しました。ユーザーのシステム設定に応じて自動的に切り替わり、手動での切り替えも可能です。
next.config.tsで画像最適化の設定を行いました：
const nextConfig: NextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "**",
},
{
protocol: "http",
hostname: "**",
},
],
dangerouslyAllowSVG: true,
contentDispositionType: "attachment",
contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
formats: ["image/avif", "image/webp"],
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
},
};
remotePatternsで外部画像の読み込みを許可dangerouslyAllowSVGでSVG画像の読み込みを許可（セキュリティポリシーと併用）ブログ記事はMarkdownファイルとして管理し、以下のような構造になっています：
---
title: 記事タイトル
description: 記事の説明
date: '2026-02-12'
category: 技術
tags:
- Next.js
- TypeScript
author: 川嶋宥翔
slug: article-slug
featured: true
hidden: false
---
# 記事本文
...
lib/blog.tsで記事の読み込みとパースを行い、app/blog/[slug]/page.tsxで動的ルーティングにより各記事を表示しています。
ローカル開発時のみ利用できる管理画面を実装しました：
.env.localにENABLE_ADMIN=trueを設定/adminにアクセスすると404を返すNext.js App Routerの理解: App Routerのルーティング、レイアウト、メタデータの設定方法を学びました。
TypeScriptの型安全性: プロジェクトデータやブログ記事の型定義により、コンパイル時にエラーを検出できるようになりました。
SEO最適化の重要性: 構造化データやOGPタグの設定により、検索エンジンでの表示が改善されました。
アクセシビリティの実装: WCAG準拠を意識した実装により、より多くのユーザーにアクセス可能なサイトになりました。
パフォーマンス最適化: 画像最適化やコード分割により、ページの読み込み速度が向上しました。
テストの不足: 現在、ユニットテストやE2Eテストが不足しています。今後、JestやPlaywrightなどを導入してテストを追加する予定です。
パフォーマンスの測定: Lighthouseなどのツールを使用して、定期的にパフォーマンスを測定し、改善していく必要があります。
コンテンツの充実: ブログ記事の数を増やし、より多様なコンテンツを提供していきたいです。
多言語対応: 将来的には英語版も追加し、より多くのユーザーにアクセスしてもらえるようにしたいです。
AI機能の追加: 記事要約機能や、AIによる記事推薦機能などの追加を検討しています。
Next.js 16、TypeScript、Tailwind CSS 4を使用して、モダンで洗練されたポートフォリオ兼ブログサイトを構築しました。技術的な実装の詳細、SEO最適化、アクセシビリティ対応など、多くのことを学ぶことができました。
今後も、継続的に改善を重ねながら、より良いサイトにしていきたいと思います。
Next.js 16を使用したポートフォリオサイトのパフォーマンス最適化で実践したテクニックと実装の詳細を紹介します。
学歴（中高・大学）を表示する About ページに、Canvas で描画するテニスサーブのアニメーションを追加した話です。
医療×AI分野での開発経験から学んだ、TypeScriptで安全なコードを書くための実践的なテクニックを紹介します。
RenderからGCP Cloud Runへの移行、Neon PostgreSQLへの移行、GitHub連携による継続的デプロイの実装について
医療情報システムの開発において、倫理的な配慮がどのように実装に反映されるかを、チャット型医薬品相談ツールの経験から解説します。
WCAG AA準拠のアクセシビリティ機能、音声読み上げ、文字サイズ調整、多言語対応など、すべてのユーザーが使いやすいUI/UXの実装について