このサイトについて

使用技術

• Next.js 13 - 最新バージョンを使用
• Tailwind CSS - スタイリングに利用
• Contentlayer - Markdown記事の管理
• Upstash Redis - ページビューカウンター

制作意図

• Next.jsの最新機能を学ぶ
• SEOに優れたサイトを構築する
• 管理の容易さを重視する

こだわりポイント

• App RouterによるクリーンなURL
• 動的なSEO対応
• ダークモード対応
• レスポンシブデザイン

サイト名：Portfolio
 
## フレームワーク
    Next.js13
 
## CSS
    Tailwind
 
## データベース
    Upstash
 

https://portfolio.prodouga.com/

このサイトはNext.jsを使って作成されたポートフォリオサイトの例です。

特徴としては以下の点が挙げられます。

• Next.js 13のApp Routerを利用し、クリーンなURLでルーティング
• Contentlayerで Markdown記事の管理
• Upstash Redisを使い、記事ごとのページビュー数をカウント
• Tailwind CSSによるスタイリング
• 動的なSEO対応
• ダークモード対応
• レスポンシブデザイン

Next.jsの最新機能を活用し、パフォーマンスとSEOに優れたサイトを構築しています。

Redisを使ったページビューカウンターは、最近のトレンドを取り入れた実装です。

Markdown記事の管理にContentlayerを使うことで、記事作成を効率化しています。

またTailwind CSSを使ったスタイリングは、カスタマイズ性が高くメンテナンス性に優れています。

先進的な技術スタックを活用した、見本となるようなポートフォリオサイトの実装例だと言えます。

ディレクトリ構造

treeコマンドを使用して出力します。

% tree -L 2 -I node_modules*

node_modulesディレクトリは除外しています。

.
├── LICENSE
├── README.md
├── app
│   ├── components
│   ├── contact
│   ├── layout.tsx
│   ├── page.tsx　// ライブラリ側
│   └── projects
├── content
│   └── projects
├── contentlayer.config.js
├── global.css
├── mdx-components.tsx
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── pages
│   └── api
├── pnpm-lock.yaml
├── postcss.config.js
├── public
│   ├── favicon.png
│   ├── fonts
│   ├── og.png
│   └── planetfall.png
├── rome.json
├── tailwind.config.js
├── tsconfig.json
├── types
│   └── mdx.d.ts
└── util
    └── mouse.ts