Next.jsの学習用としてこのプロジェクトを作成しました。プロジェクトの構成としては以下になります。
Next 13 + app directory + microCMS + TailWind CSS
このプロジェクトでは以下の機能を実装しています。
- microCMSに投稿した記事の一覧取得
- microCMSに投稿した記事の検索
- microCMSに投稿した記事の詳細取得
パッケージのインストール。
npm ciプロジェクトのルート配下に「.env.local」を新規作成して、以下を追加します。
# microCMSのAPIキーを記載します
API_KEY=XXXXXXXXXXXXXXXXXX
# microCMSのサービス名を記載します
SERVICE_DOMAIN=hogeローカルサーバーの起動。
npm run devサーバー起動後は以下のURLより、アプリの動作確認が可能です。
- 記事一覧
- 記事検索
- 記事詳細
