Nrxt 13 + app directory + microCMS

Next.jsの学習用としてこのプロジェクトを作成しました。プロジェクトの構成としては以下になります。

Next 13 + app directory + microCMS + TailWind CSS

このプロジェクトでは以下の機能を実装しています。

• microCMSに投稿した記事の一覧取得
• microCMSに投稿した記事の検索
• microCMSに投稿した記事の詳細取得

Usage

パッケージのインストール。

npm ci

プロジェクトのルート配下に「.env.local」を新規作成して、以下を追加します。

# microCMSのAPIキーを記載します
API_KEY=XXXXXXXXXXXXXXXXXX
# microCMSのサービス名を記載します
SERVICE_DOMAIN=hoge

ローカルサーバーの起動。

npm run dev

サーバー起動後は以下のURLより、アプリの動作確認が可能です。

http://localhost:3000

Demo

• 記事一覧

• 記事検索

• 記事詳細