Next.js+ microCMS

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

Next.js + 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

• 記事検索

• 記事閲覧