概要
このプロジェクトでは、自分用の Next.js ボイラープレートを構築します。
Next.js でプロジェクトを立ち上げる際に、毎回行っている設定などをまとめ、それを紹介する Web サイトとともに公開します。
学習目標
Next.js App Router におけるルーティング、特別ファイルなどの各種規約・設定について学習します。
各ページの適切な SEO 設定、動的ルーティングの実装、サイトを公開する前の各種設定について、理解を深めてください。
推奨技術
このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。
- Next.js 15 App Router
- TypeScript による型チェック
- Tailwind CSS を用いたスタイリング
- shadcn/ui によるコンポーネントの導入
- Lucide によるアイコンの導入
- GitHub Pages によるサイトの公開
🎯 お題
- 「ユーザーストーリー」を全て満たすアプリを構築してください。
- 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。
- スタイルは、あなた自身で独自にカスタマイズすることが可能です。
必須要素
- トップページ：
- ボイラープレートの導入を紹介するホームページを作成。
- 概要ページ:
- ボイラープレートに含まれる技術構成などを掲載。
- 更新の履歴にもアクセスできる。
- リリースノート：
- バージョン毎の更新履歴を動的ルーティングで掲載。
- その他：
- 各ページには必要な設定を記述。
ユーザーストーリー
- ユーザーがサイトにアクセスすると、ボイラープレートの使用手順が表示されている。
- 概要ページでは、ボイラープレートに含まれる技術スタックなどを確認できる。
- 概要ページには、リリースノートにアクセスできるリンクが配置されている。
- 特定のバージョンをクリックすると、そのバージョンの詳細ページに遷移できる。
- 各ページには適切なタイトル、説明、OG イメージが設定されている。
- ページ遷移時にはローディング状態が表示される。
- 存在しない URL にアクセスした場合、カスタマイズされた 404 ページが表示される。
- アプリケーションがインターネット上に公開されており、誰でもアクセス可能である。